/* Basic reset */
* { box-sizing: border-box; user-select: none; -webkit-user-select: none; -ms-user-select:none; -webkit-touch-callout: none; }
html,body{ height:100%; margin:0; font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:#fff; color:#111; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* Top status bar */
.status-bar{
  /* make header fixed at top so brand truly centers and mobile layout is stable */
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  border-bottom:1px solid rgba(0,0,0,0.06);
  background: #fff;
  z-index: 10;
}
/* small gear button */
.icon-btn{ background:transparent; border:0; font-size:16px; padding:4px; margin-right:4px; cursor:pointer; }

/* centered modal variant */
.modal.centered{ display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.18); }
.modal.centered[aria-hidden="false"]{ display:flex; }

/* left column (brand centered above, time + date stacked under left area) */
.left-status{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding-left:4px; width:110px; }
/* new brand centered in header between left and right */
.status-bar { position:relative; }
.brand{
  /* center brand absolutely across the top for perfect centering on mobile portrait */
  position:absolute;
  left:50%;
  top:6px;
  transform:translateX(-50%);
  font-size:20px; /* increased size per request */
  text-align:center;
  font-weight:800;
  z-index:12;
  pointer-events:none;
  display:flex;
  align-items:center;
  gap:8px;
}
/* small inline icon left of site name */
.brand-icon{
  width:50px;
  height:50px;
  object-fit:contain;
  display:inline-block;
  vertical-align:middle;
  border-radius:6px;
}
.brand-text{ font-size:20px; font-weight:800; line-height:1; }
/* time now stacks under brand on left */
.time{ font-size:14px; color:#111; margin-left:0; position:relative; left:6px; margin-top:12px; transform: translate(4px,4px); }
/* date now smaller and under time */
.date{ font-size:12px; color:#111; margin-left:0; position:relative; left:6px; margin-top:2px; transform: translate(4px,2px); }

/* right column (time + date stacked under right area) */
.right-status { display:flex; align-items:center; gap:6px; padding-right:2px; min-width:60px; justify-content:flex-end; transform: translate(6px,-6px); }

/* Page container */
.container{ padding:14px; padding-top:88px; /* make icons area scrollable while top bar remains fixed */ max-height: calc(100vh - 88px); overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Frame similar to screenshot: rounded rectangle with subtle border and inner background */
.frame{ 
  display:block; /* keep if referenced elsewhere but hide framed visuals */
  border-radius:0;
  padding:0;
  max-width:none;
  margin:0;
  background:transparent;
  box-shadow:none;
}

/* when fullscreen toggle active, make frame fill viewport */
.frame.fullscreen{
  width:100%;
  height:calc(100vh - 80px);
  margin:8px 0;
  border-radius:10px;
  max-width:none;
}

/* icon grid: simple responsive inline layout (no container card) */
.icon-grid{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  align-items:flex-start;
  padding:12px 8px;
  width:100%;
  max-height:none;
}

/* ensure tiles keep names visible and align nicely */
.tile{ 
  background:transparent;
  height:96px;
  width:96px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  cursor:pointer;
  position:relative;
}
.tile .icon-wrap{
  width:64px;
  height:64px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}

/* Each tile: larger flattened border, black */
.tile{
  background: transparent;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px; /* slightly flattened corners */
  border:0;
  position:relative;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.tile .icon-wrap{
  background:transparent;
  border:4px solid #000000; /* enforce default black border */
  border-radius:6px; /* flattened corners */
  width:60px; /* slightly larger */
  height:60px; /* slightly larger */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* icon SVG fill color controlled via currentColor */
.tile svg { width:36px; height:36px; }

/* assign distinct dark-toned colors per tile (cycles through first 9) */
.icon-grid .tile:nth-child(1) svg { color: #0b3a2e; }
.icon-grid .tile:nth-child(2) svg { color: #2b2b4a; }
.icon-grid .tile:nth-child(3) svg { color: #3a1f1f; }
.icon-grid .tile:nth-child(4) svg { color: #253845; }
.icon-grid .tile:nth-child(5) svg { color: #3a2b1f; }
.icon-grid .tile:nth-child(6) svg { color: #2f2f2f; }
.icon-grid .tile:nth-child(7) svg { color: #2c3e2f; }
.icon-grid .tile:nth-child(8) svg { color: #3a2b4d; }
.icon-grid .tile:nth-child(9) svg { color: #2f2730; }
/* colors for newly added icons (10-12) */
.icon-grid .tile:nth-child(10) svg { color: #3b1f3b; }
.icon-grid .tile:nth-child(11) svg { color: #1f3a3b; }
.icon-grid .tile:nth-child(12) svg { color: #2f1f2b; }
/* extend color set for up to 18 icons */
.icon-grid .tile:nth-child(13) svg { color: #1f2b3a; }
.icon-grid .tile:nth-child(14) svg { color: #3b2a1f; }
.icon-grid .tile:nth-child(15) svg { color: #2b3b2a; }
.icon-grid .tile:nth-child(16) svg { color: #1f2b2f; }
.icon-grid .tile:nth-child(17) svg { color: #3a1f2b; }
.icon-grid .tile:nth-child(18) svg { color: #2b1f3a; }

/* make the last three tiles' wraps a bit larger and their icons more prominent */
.icon-grid .tile:nth-child(19) .icon-wrap,
.icon-grid .tile:nth-child(20) .icon-wrap,
.icon-grid .tile:nth-child(21) .icon-wrap {
  width:72px;
  height:72px;
  border-radius:8px;
}
.icon-grid .tile:nth-child(19) svg,
.icon-grid .tile:nth-child(20) svg,
.icon-grid .tile:nth-child(21) svg {
  width:40px;
  height:40px;
}

/* subtle label under tile (mobile-friendly) */
.tile-label{
  position:absolute;
  bottom:-8px;
  font-size:12px;
  color:#111;
  width:100%;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:0.6px;
  font-weight:700;
}

/* App modal minor tweaks reuse modal.centered styles */
.modal.centered .modal-sheet#appSheet{ max-width:420px; }

/* Modal styles */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-end;
  justify-content:center;
  background:linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18));
  padding:12px;
}
.modal[aria-hidden="false"]{ display:flex; }
.modal-sheet{
  width:100%;
  max-width:520px;
  border-radius:12px; /* slightly reduced */
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.10);
  overflow:hidden;
  padding:8px 0; /* reduced top/bottom padding to make modal half-taller */
}
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid #f0f0f0;}
.modal-body{ padding:8px 12px; }
.modal-footer{ padding:12px 16px; display:flex; gap:8px; justify-content:flex-end; border-top:1px solid #f6f6f6; }
.close-btn{ background:transparent; border:0; font-size:18px; cursor:pointer; }

.preview-row{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.preview-icon{ width:56px; height:56px; border-radius:10px; display:flex; align-items:center; justify-content:center; border:2px solid #ddd; background:transparent; color:#111; }
.preview-meta .small{ font-size:12px; }
.small.muted{ color:#666; }

.control{ margin-bottom:10px; display:flex; flex-direction:column; gap:6px; }
.control label{ font-size:13px; color:#333; }

.suggestions{ display:flex; gap:8px; flex-wrap:wrap; }
.suggestion{
  padding:8px; background:#f7f7f7; border-radius:8px; cursor:pointer; display:flex; gap:8px; align-items:center;
  border:1px solid transparent;
}
.suggestion:hover{ border-color:#e0e0e0; }

.btn{ padding:8px 12px; border-radius:8px; border:1px solid #d0d0d0; background:#fff; cursor:pointer; }
.btn.primary{ background:#111; color:#fff; border-color:transparent; }

/* battery */
.battery{
  width:48px;
  height:22px;
  border:2px solid #111;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding-right:6px;
  box-sizing:border-box;
  transform: translate(6px,-4px); /* slightly higher and to the right */
}
.battery::after{
  content:'';
  position:absolute;
  right:0px;
  top: 0px;
  width:5px;
  height:10px;
  background:#111;
  border-radius:2px;
}
.battery-inner{ font-size:13px; font-weight:600; color:#fff; background:#111; padding:4px 8px; border-radius:4px; }

/* small responsive tweaks for mobile */
@media (max-width:480px){
  .icon-grid{ gap:10px; padding:8px; }
  .left-status{ width:98px; }
  .right-status{ min-width:86px; }
  .brand{ font-size:15px; top:6px; }
  .container{ padding-top:92px; }
}

/* full screen iframe container */
.full-iframe{
  position:fixed;
  left:0;
  right:0;
  top:64px; /* start directly below the top status bar (including energy line) */
  bottom:0;
  display:flex;
  flex-direction:column;
  background:#fff;
  z-index:20; /* increased so iframe appears above icons and labels */
}
.full-iframe .iframe-topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-bottom:1px solid #eee;
}
.full-iframe iframe{ flex:1; width:100%; height:100%; border:0; }

/* password modal tweak (reuse modal.centered style but ensure visible) */
#passwordModal .modal-sheet{ max-width:380px; }

/* Particle canvas fills behind content */
#bgCanvas{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  display:block;
  background:linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 40%);
  pointer-events:none;
}

/* ensure main UI sits above canvas */
.status-bar, .container, .modal { z-index: 10; position:relative; }

/* energy line: full width under date, animated left->right */
.energy-line{
  position:relative;
  margin-top:8px;
  width:500px; /* fixed moving band width requested */
  height:6px;
  overflow:hidden;
  background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  margin-left:auto; /* align more to the right as requested */
  margin-right:12px;
}
.energy-line::before{
  content:'';
  position:absolute;
  left:-500px;
  top:0;
  height:100%;
  width:500px;
  background: linear-gradient(90deg, rgba(0,160,255,0.0), rgba(0,200,255,0.95), rgba(0,160,255,0.0));
  filter: drop-shadow(0 0 12px rgba(0,180,255,0.45));
  animation: energyMove 2.4s linear infinite;
}
@keyframes energyMove{
  0% { left: -500px; }
  100% { left: 100%; }
}

/* push existing container padding so content not covered by top bar on mobile */
.container{ padding-top:18px; }

/* compact settings row: smaller gaps and tighter alignment so controls occupy single horizontal band */
.settings-row{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
}
/* ensure compact action buttons align visually */
.compact-actions .icon-btn{ padding:8px; border-radius:8px; border:1px solid transparent; background:transparent; }

/* Settings modal reposition: show under blue line instead of below last icon */
#settingsModal { align-items:flex-start; padding-top:0; }
#settingsModal .modal-sheet{
  position:fixed;
  top:72px; /* directly under the header + energy line */
  right:12px;
  left:auto;
  width:320px;
  max-width:calc(100% - 28px);
  border-radius:10px;
}

/* Menu popover styles */
.menu-popover{ position:fixed; top:72px; right:12px; z-index:30; }
.menu-sheet{ background:#fff; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.12); padding:8px; display:flex; flex-direction:column; gap:6px; min-width:160px; 
  /* new: clear black border + subtle white halo to give a "white-shadowed" effect on top of black border */
  border:1px solid #000;
  box-shadow: 0 6px 18px rgba(255,255,255,0.06), 0 10px 30px rgba(0,0,0,0.12);
  color: #000; /* ensure default text/icon color is black and can be inherited */
}
/* ensure icon + text are perfectly aligned on the same line */
.menu-item{ background:transparent; border:0; text-align:left; padding:10px 12px; cursor:pointer; font-weight:700; border-radius:8px; display:flex; align-items:center; gap:8px; color: inherit; }
/* make the text vertically centered relative to the feather icon */
/* moved 1px down relative to previous -3px => now -2px (labels shifted 1px down) */
.menu-item span{ display:inline-block; transform: translateY(-2px); color: inherit; }
/* nudge the "Modo" label up a bit more (moved down 1px from -7 to -6) */
.menu-item i#modeIcon + span { transform: translateY(-6px); }

/* submenu for inline configuration (hidden by default) */
.menu-submenu{
  display:none;
  margin-top:6px;
  padding:8px;
  background: #fbfbff;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(10,20,40,0.04);
  flex-direction:column;
  gap:8px;
  /* new: match parent popover border and subtle white halo (default light mode) */
  border: 1px solid #000;
  box-shadow: 0 6px 18px rgba(255,255,255,0.06), 0 8px 22px rgba(0,0,0,0.08);
  color: inherit; /* inherit color from .menu-sheet so labels follow the same color as "Configurar" */
}
.menu-submenu.visible{ display:flex; }
/* compact controls inside submenu */
.menu-submenu label{ font-size:13px; font-weight:700; color: inherit; }
.menu-submenu input[type="color"]{ width:46px; height:30px; border:0; padding:0; background:transparent; cursor:pointer; }
/* reset button style */
.menu-submenu .reset-btn{ padding:8px; border-radius:8px; border:1px solid #e0e0e0; background:#fff; cursor:pointer; font-weight:700; }

/* Minimal dark-mode theme */
body.dark-mode {
  background-color: #000000;
  color: #ffffff;
}
/* ensure header, modals, menu and tiles go fully white-on-black when dark-mode active */
body.dark-mode .status-bar,
body.dark-mode .modal-sheet,
body.dark-mode .menu-sheet {
  background: #000000;
  color: #ffffff;
  border-color: rgba(255,255,255,0.06);
}
body.dark-mode .tile-label { color: #ffffff; }
body.dark-mode .icon-grid .tile .icon-wrap { border-color: #ffffff !important; background: transparent !important; }
body.dark-mode .tile svg,
body.dark-mode .svg-container svg {
  color: #ffffff !important;
  /* make interior transparent and rely on stroke for visible shape */
  fill: transparent !important;
  /* ensure stroke/lines are visible in white */
  stroke: #ffffff !important;
}
/* also ensure inline SVG children (paths, circles, rects) don't keep filled white */
body.dark-mode .tile svg * ,
body.dark-mode .svg-container svg * {
  fill: transparent !important;
  stroke: #ffffff !important;
}
body.dark-mode .brand-text,
body.dark-mode .brand,
body.dark-mode .status-bar .time,
body.dark-mode .status-bar .date { color: #ffffff; }
/* ensure modals backdrop is darker */
body.dark-mode .modal { background: rgba(0,0,0,0.7); }
body.dark-mode .menu-sheet,
body.dark-mode .menu-submenu {
  background: #000000;
  color: #ffffff;
  /* invert border to white in dark mode so the "white-shadowed" look remains */
  border-color: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), 0 6px 18px rgba(255,255,255,0.06);
}
/* ensure feather icon placeholders and svg inside menu inherit color */
.menu-item i, .menu-item svg { color: inherit; stroke: currentColor; fill: none; }

/* ensure hamburger menu icon scales and changes color with mode */
.icon-btn svg { display:block; width:22px; height:22px; stroke:currentColor; color:#000; }
body.dark-mode .icon-btn svg { color:#fff; stroke:#fff; }