/* ===== PAYATE app — theme ===== */
:root{
  --accent:#5B6CFF;
  --accent-ink:#ffffff;
  --bg:#0E1526;
  --bg-elev:#0C1322;
  --card:#172034;
  --card-2:#1A2236;
  --line:#28344E;
  --line-soft:#212C44;
  --text:#EAF0FB;
  --text-2:#B6C1D6;
  --text-3:#8D9BB5;
  --text-4:#73819C;
  --radius:16px;
  --nav-h:60px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
}
a{ color:inherit; text-decoration:none; }

/* safe-area aware top padding */
.safe-top{ padding-top:calc(env(safe-area-inset-top, 0px) + 14px); }

/* ===== Screens ===== */
.screen{ position:fixed; inset:0; display:flex; flex-direction:column; background:var(--bg);
  transition:transform .26s ease, opacity .2s ease; }
.screen.hidden{ transform:translateX(100%); opacity:0; pointer-events:none; }

/* ===== Home header ===== */
.hdr{ padding:0 16px 10px; }
.hdr-row{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{ width:38px; height:38px; border-radius:12px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; }
.brand-logo i{ font-size:22px; color:#fff; }
.brand-name{ font-size:17px; font-weight:600; line-height:1; letter-spacing:.3px; }
.brand-sub{ font-size:10.5px; color:var(--text-3); margin-top:3px; }
.icon-btn{ width:36px; height:36px; border-radius:11px; background:var(--card);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line); }
.icon-btn i{ font-size:18px; color:var(--text-3); }

.search{ margin-top:14px; height:42px; background:var(--card); border:1px solid var(--line);
  border-radius:13px; display:flex; align-items:center; gap:9px; padding:0 13px; }
.search i{ font-size:17px; color:var(--text-4); }
.search input{ flex:1; background:transparent; border:0; outline:0; color:var(--text);
  font-size:14px; -webkit-user-select:text; user-select:text; }
.search input::placeholder{ color:var(--text-4); }

/* ===== Category chips ===== */
.chips{ display:flex; gap:8px; margin-top:13px; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{ font-size:12px; padding:7px 14px; border-radius:20px; white-space:nowrap; cursor:pointer;
  background:var(--card); color:var(--text-3); border:1px solid var(--line); }
.chip.on{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }

/* ===== Ad banner (remote, from app-banner.json) ===== */
.banner{ display:none; margin:12px 0 0; border-radius:12px; overflow:hidden; border:1px solid var(--line);
  background:var(--card); cursor:pointer; aspect-ratio:1080/300; width:100%; }
.banner img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== Scroll body ===== */
.body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 14px 14px; }
.sec-title{ font-size:10.5px; color:var(--text-4); text-transform:uppercase; letter-spacing:.07em;
  margin:16px 2px 2px; }

/* ===== Icon grid ===== */
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px 4px; margin-top:8px; }
.cell{ display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; }
.cell:active .tile{ transform:scale(.92); }
.tile{ width:62px; height:62px; border-radius:19px; display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease; position:relative; }
.tile svg{ width:100%; height:100%; display:block; border-radius:19px; }
.tile i{ font-size:29px; color:#fff; }
.cell-name{ font-size:9.5px; color:var(--text-2); text-align:center; line-height:1.18; max-width:66px; }
.cell-sub{ display:block; color:var(--text-4); font-size:8.5px; }
.fav-dot{ position:absolute; top:-3px; right:-3px; width:15px; height:15px; border-radius:50%;
  background:#F0923E; display:none; align-items:center; justify-content:center; border:2px solid var(--bg); }
.fav-dot i{ font-size:8px; color:#fff; }
.cell.is-fav .fav-dot{ display:flex; }

.empty{ text-align:center; color:var(--text-4); font-size:13px; padding:40px 20px; }

/* ===== Bottom nav ===== */
.nav{ height:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--bg-elev); border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-around; }
.nav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; flex:1; padding-top:4px; }
.nav-item i{ font-size:21px; color:var(--text-4); }
.nav-item span{ font-size:8.5px; color:var(--text-4); }
.nav-item.on i, .nav-item.on span{ color:var(--accent); }

/* ===== Tool screen (in-app webview header fallback) ===== */
.tool-bar{ display:flex; align-items:center; gap:10px; padding:0 12px 12px; background:var(--accent); }
.tool-bar .back{ font-size:24px; color:#fff; cursor:pointer; }
.tool-bar .tt{ flex:1; }
.tool-bar .tt b{ font-size:14px; font-weight:600; color:#fff; display:block; line-height:1.15; }
.tool-bar .tt span{ font-size:9.5px; color:#DADFFF; }
.tool-bar .act{ font-size:17px; color:#fff; cursor:pointer; }
.frame-wrap{ flex:1; background:#fff; position:relative; }
.frame-wrap iframe{ width:100%; height:100%; border:0; }
.loader{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; background:var(--bg); color:var(--text-3); }
.spinner{ width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===== More / list ===== */
.sub-hdr{ display:flex; align-items:center; gap:11px; padding:0 16px 12px; border-bottom:1px solid var(--line-soft); }
.sub-hdr .back{ font-size:23px; color:var(--text-2); cursor:pointer; }
.sub-hdr b{ font-size:16px; font-weight:600; }
.rows{ flex:1; overflow-y:auto; padding:8px 14px 20px; }
.row{ display:flex; align-items:center; gap:13px; padding:14px 10px; border-bottom:1px solid #161a22; cursor:pointer; }
.row i.lead{ font-size:19px; color:var(--text-3); width:22px; text-align:center; }
.row .rname{ flex:1; font-size:14px; color:var(--text); }
.row i.chev{ font-size:17px; color:#555b6a; }
.more-foot{ text-align:center; color:var(--text-4); font-size:11px; padding:22px 10px 8px; }