:root{
  --winmo-chrome1:#eef2f6; --winmo-chrome2:#c7d0da; --winmo-blue:#1BA1E2; --winmo-teal:#00ABA9;
  --winmo-green:#60A917; --winmo-orange:#FA6800; --winmo-magenta:#D80073; --winmo-navy:#173a56;
  --winmo-ink:#1b2733; --winmo-panel:#ffffff; --winmo-border:#aebdce;
  --dos-bg:#000000; --dos-fg:#33ff33; --dos-dim:#1c8f1c; --dos-amber:#ffb000; --dos-border:#33ff33;
  --ios-bezel1:#4a4d52; --ios-bezel2:#111214; --ios-screen-bg:#d6d9de; --ios-panel:#ffffff;
  --ios-blue:#3d7fe0; --ios-blue-dark:#0a4bb0; --ios-ink:#2b2f36; --ios-border:#c3c8cf;
  --ios-green1:#8fe08a; --ios-green2:#3f9e3a; --ios-orange1:#ffcf7a; --ios-orange2:#e08c1e;
  --ios-purple1:#c9b3ec; --ios-purple2:#7a4dc4; --ios-red1:#ff9d94; --ios-red2:#c62f2f;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{min-height:100vh;transition:background .25s,color .25s;}

/* ============ LAYOUT SHARED ============ */
.app{max-width:1180px;margin:0 auto;padding:0 16px 60px;}
.hidden{display:none !important;}
img{max-width:100%;display:block;}
a{text-decoration:none;}
button{cursor:pointer;font-family:inherit;}

/* ---------- TOPBAR (universal) ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px;flex-wrap:wrap;font-size:12px;}
.topbar .clock{font-variant-numeric:tabular-nums;}
.topbar .status-open{color:#2e7d32;font-weight:700;}
.topbar .status-closed{color:#c62828;font-weight:700;}

/* Search bar bergaya "Yahoo" - pil gradasi warna-warni, universal di semua tema */
.search-yahoo{
  display:flex;align-items:center;gap:0;
  background:#fff;border-radius:999px;padding:3px 3px 3px 14px;
  border:2px solid transparent;
  background-image:linear-gradient(#fff,#fff),linear-gradient(90deg,#6001d2,#ff0080,#ff8a00);
  background-origin:border-box;background-clip:padding-box, border-box;
  box-shadow:0 3px 12px rgba(96,1,210,.25);
  margin-left:auto;
}
.search-yahoo-icon{font-size:13px;margin-right:6px;opacity:.7;}
.search-yahoo input{
  border:none !important;outline:none;background:transparent !important;
  font-size:12.5px;padding:6px 4px !important;width:190px;color:#333;margin:0 !important;
  box-shadow:none !important;
}
.search-yahoo-btn{
  border:none;border-radius:999px;padding:7px 16px;font-size:11.5px;font-weight:700;color:#fff;cursor:pointer;
  background:linear-gradient(90deg,#6001d2,#ff0080);
  box-shadow:0 2px 6px rgba(96,1,210,.4);
  transition:transform .15s;
}
.search-yahoo-btn:hover{transform:scale(1.05);}
@media(max-width:820px){
  .search-yahoo{margin-left:0;width:100%;order:99;}
  .search-yahoo input{width:100%;}
}
.theme-switch button{border:none;padding:6px 12px;border-radius:6px;font-size:11px;font-weight:600;margin-left:4px;}
.a11y-controls{display:flex;gap:6px;align-items:center;}
.a11y-controls button{width:26px;height:26px;border-radius:5px;font-size:12px;}

/* ============================================================
   THEME 1: WINDOWS MOBILE
   ============================================================ */
body[data-theme="winmo"]{
  background:linear-gradient(180deg,#dfe7ee 0%,#c9d4e0 400px,#eef2f6 400px);
  color:var(--winmo-ink);
  font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
}
body[data-theme="winmo"] .device-frame{
  max-width:1180px;margin:14px auto;border-radius:22px;
  background:linear-gradient(180deg,#3a4a5c,#1c2733);
  padding:14px;box-shadow:0 20px 45px rgba(20,30,45,.35);
}
body[data-theme="winmo"] .screen{
  background:var(--winmo-panel);border-radius:14px;overflow:hidden;
  box-shadow:inset 0 0 0 2px #0d1620;
}
body[data-theme="winmo"] .topbar{
  background:linear-gradient(180deg,var(--winmo-chrome1),var(--winmo-chrome2));
  border-bottom:1px solid var(--winmo-border);color:var(--winmo-navy);
}
body[data-theme="winmo"] .theme-switch button{background:#dbe4ee;color:#274156;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);}
body[data-theme="winmo"] .theme-switch button.active{background:var(--winmo-blue);color:#fff;}
body[data-theme="winmo"] .a11y-controls button{background:#dbe4ee;border:1px solid var(--winmo-border);color:#274156;}

body[data-theme="winmo"] .hero{
  background:linear-gradient(135deg,var(--winmo-blue),#0f6fb3);
  color:#fff;padding:26px 22px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;
}
body[data-theme="winmo"] .hero img.logo{background:#fff;border-radius:10px;padding:6px;width:110px;}
body[data-theme="winmo"] .hero h1{margin:0 0 6px;font-size:22px;letter-spacing:.3px;}
body[data-theme="winmo"] .hero p{margin:0;opacity:.92;font-size:13.5px;max-width:560px;}

body[data-theme="winmo"] .infobar{display:flex;gap:10px;flex-wrap:wrap;padding:12px 18px;background:#f3f6f9;border-bottom:1px solid var(--winmo-border);}
body[data-theme="winmo"] .infochip{background:#fff;border:1px solid var(--winmo-border);border-radius:10px;padding:8px 12px;font-size:12px;box-shadow:0 2px 4px rgba(0,0,0,.05);flex:1 1 150px;min-width:150px;}
body[data-theme="winmo"] .infochip b{display:block;font-size:14px;color:var(--winmo-navy);}

/* Tile nav (start screen style) */
body[data-theme="winmo"] .tilenav{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:14px 18px;}
body[data-theme="winmo"] .tile{
  border:none;border-radius:8px;color:#fff;padding:16px 8px;font-weight:700;font-size:12px;text-align:left;
  min-height:78px;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:inset 0 -30px 30px -20px rgba(0,0,0,.25);
  transition:transform .12s;
}
body[data-theme="winmo"] .tile:hover{transform:translateY(-2px);}
body[data-theme="winmo"] .tile.active{outline:3px solid #123;}
body[data-theme="winmo"] .tile .icon{font-size:22px;margin-bottom:6px;}
body[data-theme="winmo"] .tile.c1{background:var(--winmo-blue);}
body[data-theme="winmo"] .tile.c2{background:var(--winmo-teal);}
body[data-theme="winmo"] .tile.c3{background:var(--winmo-green);}
body[data-theme="winmo"] .tile.c4{background:var(--winmo-orange);}
body[data-theme="winmo"] .tile.c5{background:var(--winmo-magenta);}

body[data-theme="winmo"] .subtabs{display:flex;gap:6px;flex-wrap:wrap;padding:12px 18px 0;}
body[data-theme="winmo"] .subtab{border:1px solid var(--winmo-border);background:#fff;border-radius:20px;padding:7px 14px;font-size:12px;font-weight:600;color:#345;}
body[data-theme="winmo"] .subtab.active{background:var(--winmo-blue);border-color:var(--winmo-blue);color:#fff;}

body[data-theme="winmo"] .content{padding:16px 18px 30px;}
body[data-theme="winmo"] .card{background:#fff;border:1px solid var(--winmo-border);border-radius:12px;padding:16px 18px;margin-bottom:14px;box-shadow:0 2px 6px rgba(20,30,45,.06);}
body[data-theme="winmo"] .card h2{margin-top:0;color:var(--winmo-navy);font-size:17px;border-bottom:2px solid var(--winmo-blue);padding-bottom:8px;}
body[data-theme="winmo"] .card h3{color:var(--winmo-navy);font-size:14.5px;}
body[data-theme="winmo"] .pill{display:inline-block;background:#eaf4fc;color:#0f6fb3;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;margin-bottom:8px;}
body[data-theme="winmo"] table{width:100%;border-collapse:collapse;font-size:12.5px;}
body[data-theme="winmo"] th,body[data-theme="winmo"] td{border:1px solid var(--winmo-border);padding:8px;text-align:left;}
body[data-theme="winmo"] th{background:#eaf1f8;color:var(--winmo-navy);}
body[data-theme="winmo"] .btn{display:inline-block;background:var(--winmo-blue);color:#fff;padding:9px 16px;border-radius:8px;font-size:12.5px;font-weight:700;border:none;}
body[data-theme="winmo"] .btn.secondary{background:#eaf1f8;color:var(--winmo-navy);}
body[data-theme="winmo"] input,body[data-theme="winmo"] textarea,body[data-theme="winmo"] select{
  width:100%;padding:9px 10px;border:1px solid var(--winmo-border);border-radius:8px;font-size:12.5px;margin-bottom:10px;font-family:inherit;background:#fbfcfe;}
body[data-theme="winmo"] label{font-size:12px;font-weight:700;color:var(--winmo-navy);display:block;margin-bottom:4px;}
body[data-theme="winmo"] .step{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start;}
body[data-theme="winmo"] .step .n{background:var(--winmo-blue);color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
body[data-theme="winmo"] footer{background:linear-gradient(180deg,var(--winmo-chrome1),var(--winmo-chrome2));border-top:1px solid var(--winmo-border);padding:16px 18px;font-size:11.5px;color:#345;}
body[data-theme="winmo"] .footgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
body[data-theme="winmo"] .footgrid a{color:#0f6fb3;display:block;margin:3px 0;}

/* ============================================================
   THEME 2: DOS PROMPT
   ============================================================ */
body[data-theme="dos"]{
  background:#000;color:var(--dos-fg);
  font-family:"Consolas","Courier New",monospace;
}
body[data-theme="dos"] .device-frame{max-width:1180px;margin:14px auto;padding:0;}
body[data-theme="dos"] .screen{background:#000;position:relative;border:2px solid var(--dos-fg);border-radius:2px;}
body[data-theme="dos"] .screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(51,255,51,.035) 0px,rgba(51,255,51,.035) 1px,transparent 2px,transparent 3px);
}
body[data-theme="dos"] .topbar{background:#000;border-bottom:1px dashed var(--dos-fg);color:var(--dos-fg);font-family:inherit;}
body[data-theme="dos"] .theme-switch button{background:#000;color:var(--dos-fg);border:1px solid var(--dos-fg);border-radius:0;font-family:inherit;}
body[data-theme="dos"] .theme-switch button.active{background:var(--dos-fg);color:#000;}
body[data-theme="dos"] .a11y-controls button{background:#000;border:1px solid var(--dos-fg);color:var(--dos-fg);border-radius:0;}

body[data-theme="dos"] .hero{padding:18px;border-bottom:1px dashed var(--dos-fg);}
body[data-theme="dos"] .hero .asciibox{border:1px solid var(--dos-fg);padding:14px;}
body[data-theme="dos"] .hero img.logo{width:70px;filter:grayscale(1) contrast(1.4);border:1px solid var(--dos-fg);}
body[data-theme="dos"] .hero h1{margin:10px 0 6px;font-size:18px;letter-spacing:.5px;}
body[data-theme="dos"] .hero h1::before{content:"C:\\KSDE> ";color:var(--dos-dim);}
body[data-theme="dos"] .hero p{margin:0;font-size:12.5px;color:var(--dos-fg);opacity:.9;}
body[data-theme="dos"] .blink{animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

body[data-theme="dos"] .infobar{display:flex;gap:10px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px dashed var(--dos-fg);font-size:11.5px;}
body[data-theme="dos"] .infochip{border:1px solid var(--dos-fg);padding:7px 10px;flex:1 1 150px;min-width:150px;}
body[data-theme="dos"] .infochip b{display:block;color:var(--dos-amber);}

body[data-theme="dos"] .tilenav{display:flex;flex-wrap:wrap;gap:0;padding:10px 18px;border-bottom:1px dashed var(--dos-fg);}
body[data-theme="dos"] .tile{
  background:#000;color:var(--dos-fg);border:1px solid var(--dos-fg);border-radius:0;
  padding:9px 14px;font-size:12px;font-weight:700;margin:3px;font-family:inherit;
}
body[data-theme="dos"] .tile::before{content:"[ ";}
body[data-theme="dos"] .tile::after{content:" ]";}
body[data-theme="dos"] .tile.active{background:var(--dos-fg);color:#000;}
body[data-theme="dos"] .tile .icon{display:none;}

body[data-theme="dos"] .subtabs{display:flex;flex-wrap:wrap;gap:0;padding:10px 18px 0;}
body[data-theme="dos"] .subtab{background:#000;color:var(--dos-fg);border:1px solid var(--dos-dim);border-radius:0;padding:6px 12px;font-size:11.5px;margin:2px;font-family:inherit;}
body[data-theme="dos"] .subtab::before{content:"> ";}
body[data-theme="dos"] .subtab.active{background:var(--dos-fg);color:#000;border-color:var(--dos-fg);}

body[data-theme="dos"] .content{padding:16px 18px 30px;}
body[data-theme="dos"] .card{border:1px solid var(--dos-fg);padding:14px 16px;margin-bottom:14px;}
body[data-theme="dos"] .card h2{margin-top:0;font-size:15px;color:var(--dos-amber);border-bottom:1px dashed var(--dos-fg);padding-bottom:8px;}
body[data-theme="dos"] .card h2::before{content:"### ";}
body[data-theme="dos"] .card h3{color:var(--dos-fg);font-size:13px;}
body[data-theme="dos"] .card h3::before{content:"- ";color:var(--dos-dim);}
body[data-theme="dos"] .pill{display:inline-block;border:1px solid var(--dos-amber);color:var(--dos-amber);padding:2px 8px;font-size:10.5px;margin-bottom:8px;}
body[data-theme="dos"] table{width:100%;border-collapse:collapse;font-size:11.5px;}
body[data-theme="dos"] th,body[data-theme="dos"] td{border:1px solid var(--dos-dim);padding:7px;text-align:left;}
body[data-theme="dos"] th{color:var(--dos-amber);}
body[data-theme="dos"] .btn{display:inline-block;background:#000;color:var(--dos-fg);padding:8px 14px;border:1px solid var(--dos-fg);font-size:12px;font-weight:700;}
body[data-theme="dos"] .btn::before{content:"[ ";}
body[data-theme="dos"] .btn::after{content:" ]";}
body[data-theme="dos"] .btn.secondary{color:var(--dos-dim);border-color:var(--dos-dim);}
body[data-theme="dos"] input,body[data-theme="dos"] textarea,body[data-theme="dos"] select{
  width:100%;padding:8px 9px;background:#000;color:var(--dos-fg);border:1px solid var(--dos-fg);border-radius:0;font-size:12px;margin-bottom:10px;font-family:inherit;}
body[data-theme="dos"] label{font-size:11.5px;color:var(--dos-amber);display:block;margin-bottom:4px;}
body[data-theme="dos"] label::before{content:"> ";}
body[data-theme="dos"] .step{display:flex;gap:8px;margin-bottom:8px;font-size:12.5px;}
body[data-theme="dos"] .step .n{color:var(--dos-amber);flex-shrink:0;}
body[data-theme="dos"] footer{border-top:1px dashed var(--dos-fg);padding:14px 18px;font-size:11px;}
body[data-theme="dos"] .footgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
body[data-theme="dos"] .footgrid a{color:var(--dos-fg);display:block;margin:3px 0;}
body[data-theme="dos"] .footgrid a::before{content:"* ";}
body[data-theme="dos"] img.photo{filter:grayscale(.15) contrast(1.05) sepia(.08);border:1px solid var(--dos-fg);}

/* ---------- shared bits ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.upload-panel{margin-top:12px;padding:12px;border-radius:8px;text-align:left;}
body[data-theme="winmo"] .upload-panel{background:#f3f6f9;border:1px solid var(--winmo-border);}
body[data-theme="dos"] .upload-panel{background:#000;border:1px dashed var(--dos-fg);border-radius:0;}
.upload-panel input[type="file"]{padding:6px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.photo{border-radius:8px;width:100%;height:auto;object-fit:cover;}
.center{text-align:center;}
.small{font-size:11px;opacity:.75;}
.note{font-style:italic;}
.barwrap{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:11.5px;}
.bar{height:10px;flex:1;background:rgba(120,120,120,.15);border-radius:6px;overflow:hidden;}
.bar > span{display:block;height:100%;}
body[data-theme="winmo"] .bar>span{background:var(--winmo-blue);}
body[data-theme="dos"] .bar{border:1px solid var(--dos-dim);border-radius:0;background:transparent;}
body[data-theme="dos"] .bar>span{background:var(--dos-fg);}

/* accessibility: high contrast + font scale */
body.hc[data-theme="winmo"]{filter:contrast(1.15) saturate(1.1);}
body.hc[data-theme="winmo"] .card{border-width:2px;}
body.fs-1 .app{font-size:1.08em;}
body.fs-2 .app{font-size:1.18em;}

@media(max-width:820px){
  .tilenav{grid-template-columns:repeat(3,1fr);}
  .grid2,.grid3,.footgrid{grid-template-columns:1fr;}
}

.leader-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.leader-photo{
  width:auto;height:180px;max-width:100%;object-fit:contain;
  border-radius:10px;margin:0;display:block;
}
body[data-theme="winmo"] .leader-photo{border:2px solid var(--winmo-border);box-shadow:0 3px 8px rgba(20,30,45,.12);}
body[data-theme="dos"] .leader-photo{border:1px solid var(--dos-fg);border-radius:0;}

/* watermark - teks polos di pojok kanan bawah, gaya ExcaMonitor */
.watermark{
  display:block;text-align:right;
  margin:0;padding:18px 20px 26px;
  font-size:13px;font-weight:400;letter-spacing:.2px;
  background:none;border:none;box-shadow:none;
  color:#9aa2ab;opacity:.75;
  pointer-events:none;user-select:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
body[data-theme="winmo"] .watermark{ color:#8a97a6; }
body[data-theme="ios"]   .watermark{ color:#cfd4da; text-shadow:0 1px 2px rgba(0,0,0,.35); }
body[data-theme="dos"]   .watermark{
  color:var(--dos-dim); font-family:"Consolas","Courier New",monospace; opacity:.6;
}
@media(max-width:820px){
  .watermark{font-size:11px;padding:14px 14px 20px;}
}

/* ============================================================
   ANIMASI CAHAYA BERGERAK (FUTURISTIC LIGHT EFFECTS)
   ============================================================ */

/* --- glow border pulsing di frame utama --- */
@keyframes glowPulseWinmo{
  0%,100%{box-shadow:0 20px 45px rgba(20,30,45,.35),0 0 18px rgba(27,161,226,.25);}
  50%{box-shadow:0 20px 45px rgba(20,30,45,.35),0 0 38px rgba(27,161,226,.65);}
}
body[data-theme="winmo"] .device-frame{animation:glowPulseWinmo 4s ease-in-out infinite;}

@keyframes glowPulseDos{
  0%,100%{box-shadow:0 0 10px rgba(51,255,51,.25);}
  50%{box-shadow:0 0 28px rgba(51,255,51,.7);}
}
body[data-theme="dos"] .screen{animation:glowPulseDos 3s ease-in-out infinite;}

/* --- shimmer sweep melintas di hero banner --- */
body[data-theme="winmo"] .hero,
body[data-theme="dos"] .hero{position:relative;overflow:hidden;}

body[data-theme="winmo"] .hero{
  background:linear-gradient(120deg,var(--winmo-blue),#0f6fb3,var(--winmo-teal),var(--winmo-blue));
  background-size:300% 300%;
  animation:flowGradient 8s ease infinite;
}
@keyframes flowGradient{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
body[data-theme="winmo"] .hero::after,
body[data-theme="dos"] .hero::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  animation:shimmerSweep 3.5s ease-in-out infinite;pointer-events:none;
}
body[data-theme="dos"] .hero::after{
  background:linear-gradient(120deg,transparent,rgba(51,255,51,.35),transparent);
}
@keyframes shimmerSweep{
  0%{left:-60%;}
  60%{left:120%;}
  100%{left:120%;}
}

/* --- scanning light beam khusus tema DOS (vertikal, ala radar/terminal) --- */
body[data-theme="dos"] .screen{position:relative;}
body[data-theme="dos"] .screen::before{
  content:"";position:absolute;left:0;right:0;height:60px;z-index:5;
  background:linear-gradient(180deg,transparent,rgba(51,255,51,.22),transparent);
  animation:scanBeam 5s linear infinite;pointer-events:none;
}
@keyframes scanBeam{
  0%{top:-10%;}
  100%{top:105%;}
}

/* --- glow pulsing pada tombol menu (tile) saat hover --- */
@keyframes tileGlowWinmo{
  0%,100%{box-shadow:inset 0 -30px 30px -20px rgba(0,0,0,.25),0 0 8px rgba(255,255,255,.3);}
  50%{box-shadow:inset 0 -30px 30px -20px rgba(0,0,0,.25),0 0 22px rgba(255,255,255,.75);}
}
body[data-theme="winmo"] .tile:hover{animation:tileGlowWinmo 1.4s ease-in-out infinite;}

@keyframes tileGlowDos{
  0%,100%{box-shadow:0 0 4px rgba(51,255,51,.4);text-shadow:0 0 4px rgba(51,255,51,.6);}
  50%{box-shadow:0 0 16px rgba(51,255,51,.95);text-shadow:0 0 10px rgba(51,255,51,1);}
}
body[data-theme="dos"] .tile:hover{animation:tileGlowDos 1.2s ease-in-out infinite;}

/* --- glow lembut pada judul hero (efek neon) --- */
body[data-theme="dos"] .hero h1{
  animation:neonFlicker 3s ease-in-out infinite;
}
@keyframes neonFlicker{
  0%,100%{text-shadow:0 0 4px rgba(51,255,51,.6),0 0 10px rgba(51,255,51,.3);}
  50%{text-shadow:0 0 8px rgba(51,255,51,.9),0 0 20px rgba(51,255,51,.6);}
}

@media (prefers-reduced-motion: reduce){
  body[data-theme="winmo"] .device-frame,
  body[data-theme="dos"] .screen,
  body[data-theme="winmo"] .hero,
  body[data-theme="winmo"] .hero::after,
  body[data-theme="dos"] .hero::after,
  body[data-theme="dos"] .screen::before,
  body[data-theme="winmo"] .tile:hover,
  body[data-theme="dos"] .tile:hover,
  body[data-theme="dos"] .hero h1{
    animation:none !important;
  }
}

/* ============================================================
   THEME 3: iOS CLASSIC (ala iPhone 3G / iPad 1, skeuomorphic 2008-2010)
   ============================================================ */
.ios-home-button{display:none;}

body[data-theme="ios"]{
  background:radial-gradient(ellipse at 50% -10%,#2f5fa8 0%,#173463 45%,#0a1730 100%);
  color:var(--ios-ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  min-height:100vh;
}
body[data-theme="ios"] .device-frame{
  max-width:760px;margin:20px auto;border-radius:34px;padding:16px 12px 44px;
  background:linear-gradient(180deg,var(--ios-bezel1),var(--ios-bezel2));
  box-shadow:0 25px 60px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.25);
  position:relative;
}
body[data-theme="ios"] .ios-home-button{
  display:block;position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(180deg,#2c2e31,#0c0d0e);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -1px 2px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05);
  border:1px solid #050505;
}
body[data-theme="ios"] .screen{
  background:var(--ios-screen-bg);border-radius:6px;overflow:hidden;
  box-shadow:inset 0 0 0 1px #8a8f96, inset 0 2px 4px rgba(0,0,0,.3);
}

/* status bar */
body[data-theme="ios"] .topbar{
  background:linear-gradient(180deg,#3a3d42,#111214);color:#fff;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:600;
  border-bottom:1px solid #000;
}
body[data-theme="ios"] .topbar .clock{color:#fff;}
body[data-theme="ios"] .theme-switch button{
  background:linear-gradient(180deg,#5a5e64,#2a2c2f);color:#fff;border:1px solid #0d0e0f;
  border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.4);
}
body[data-theme="ios"] .theme-switch button.active{
  background:linear-gradient(180deg,var(--ios-blue),var(--ios-blue-dark));color:#fff;
}
body[data-theme="ios"] .a11y-controls button{
  background:linear-gradient(180deg,#5a5e64,#2a2c2f);color:#fff;border:1px solid #0d0e0f;border-radius:6px;
}

/* hero (lock-screen style banner) */
body[data-theme="ios"] .hero{
  background:linear-gradient(160deg,#4f83d1,#0f3d82 70%);
  color:#fff;padding:26px 22px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
body[data-theme="ios"] .hero::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  animation:shimmerSweep 4s ease-in-out infinite;pointer-events:none;
}
body[data-theme="ios"] .hero img.logo{
  background:#fff;border-radius:16px;padding:6px;width:96px;
  box-shadow:0 4px 10px rgba(0,0,0,.35),inset 0 1px 1px rgba(255,255,255,.6);
}
body[data-theme="ios"] .hero h1{margin:0 0 6px;font-size:19px;letter-spacing:.2px;text-shadow:0 1px 2px rgba(0,0,0,.4);}
body[data-theme="ios"] .hero p{margin:0;opacity:.95;font-size:13px;max-width:560px;text-shadow:0 1px 1px rgba(0,0,0,.3);}

/* app icon grid */
body[data-theme="ios"] .tilenav{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px 10px;padding:22px 16px;
  background:var(--ios-screen-bg);
}
body[data-theme="ios"] .tile{
  border:none;background:transparent;box-shadow:none;color:var(--ios-ink);
  padding:0;font-weight:600;font-size:10px;line-height:1.2;text-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:5px;text-align:center;
}
body[data-theme="ios"] .tile .icon{
  width:54px;height:54px;border-radius:20%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:26px;
  box-shadow:0 3px 6px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.4);
  position:relative;overflow:hidden;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);
  margin:0;
}
body[data-theme="ios"] .tile .icon::before{
  content:"";position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  pointer-events:none;
}
body[data-theme="ios"] .tile.c1 .icon{background:linear-gradient(180deg,var(--ios-green1),var(--ios-green2));}
body[data-theme="ios"] .tile.c2 .icon{background:linear-gradient(180deg,#7cb8f2,var(--ios-blue-dark));}
body[data-theme="ios"] .tile.c3 .icon{background:linear-gradient(180deg,var(--ios-orange1),var(--ios-orange2));}
body[data-theme="ios"] .tile.c4 .icon{background:linear-gradient(180deg,var(--ios-purple1),var(--ios-purple2));}
body[data-theme="ios"] .tile.c5 .icon{background:linear-gradient(180deg,var(--ios-red1),var(--ios-red2));}
body[data-theme="ios"] .tile.active .icon{outline:2px solid var(--ios-blue-dark);outline-offset:2px;}
body[data-theme="ios"] .tile:hover .icon{filter:brightness(1.08);}

/* segmented control (subtabs) */
body[data-theme="ios"] .subtabs{
  display:flex;gap:0;flex-wrap:wrap;padding:12px 20px 0;background:var(--ios-screen-bg);
}
body[data-theme="ios"] .subtab{
  border:1px solid var(--ios-border);background:linear-gradient(180deg,#f0f0f0,#dcdcdc);
  border-radius:6px;padding:6px 12px;font-size:11.5px;font-weight:600;color:#333;margin:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
body[data-theme="ios"] .subtab.active{
  background:linear-gradient(180deg,var(--ios-blue),var(--ios-blue-dark));color:#fff;border-color:var(--ios-blue-dark);
}

body[data-theme="ios"] .content{padding:16px 18px 30px;background:var(--ios-screen-bg);}
body[data-theme="ios"] .card{
  background:linear-gradient(180deg,#ffffff,#f4f5f7);border:1px solid var(--ios-border);border-radius:12px;
  padding:16px 18px;margin-bottom:14px;box-shadow:0 2px 5px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.8);
}
body[data-theme="ios"] .card h2{margin-top:0;color:var(--ios-blue-dark);font-size:17px;border-bottom:2px solid var(--ios-blue);padding-bottom:8px;}
body[data-theme="ios"] .card h3{color:var(--ios-blue-dark);font-size:14.5px;}
body[data-theme="ios"] .pill{
  display:inline-block;background:linear-gradient(180deg,#eaf2fc,#d7e7fb);color:var(--ios-blue-dark);
  border-radius:14px;padding:3px 10px;font-size:11px;font-weight:700;margin-bottom:8px;border:1px solid #b9d3f5;
}
body[data-theme="ios"] table{width:100%;border-collapse:collapse;font-size:12.5px;}
body[data-theme="ios"] th,body[data-theme="ios"] td{border:1px solid var(--ios-border);padding:8px;text-align:left;}
body[data-theme="ios"] th{background:#eef1f5;color:var(--ios-blue-dark);}
body[data-theme="ios"] .btn{
  display:inline-block;background:linear-gradient(180deg,#5aa0ff,var(--ios-blue-dark));color:#fff;
  padding:9px 16px;border-radius:8px;font-size:12.5px;font-weight:700;border:1px solid #06285e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.3);
}
body[data-theme="ios"] .btn.secondary{
  background:linear-gradient(180deg,#f5f5f5,#dcdcdc);color:#333;border:1px solid #aaa;
}
body[data-theme="ios"] input,body[data-theme="ios"] textarea,body[data-theme="ios"] select{
  width:100%;padding:9px 10px;border:1px solid #9aa0a8;border-radius:8px;font-size:12.5px;margin-bottom:10px;
  font-family:inherit;background:#fff;box-shadow:inset 0 1px 3px rgba(0,0,0,.15);}
body[data-theme="ios"] label{font-size:12px;font-weight:700;color:var(--ios-blue-dark);display:block;margin-bottom:4px;}
body[data-theme="ios"] .step{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start;}
body[data-theme="ios"] .step .n{
  background:linear-gradient(180deg,#5aa0ff,var(--ios-blue-dark));color:#fff;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
body[data-theme="ios"] footer{
  background:linear-gradient(180deg,#e9ebee,#d3d6db);border-top:1px solid var(--ios-border);
  padding:16px 18px;font-size:11.5px;color:#333;
}
body[data-theme="ios"] .footgrid a{color:var(--ios-blue-dark);display:block;margin:3px 0;}
body[data-theme="ios"] .upload-panel{background:#eef1f5;border:1px solid var(--ios-border);border-radius:10px;}
body[data-theme="ios"] .leader-photo{border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.25);border-radius:12px;}
body[data-theme="ios"] .infochip{
  background:linear-gradient(180deg,#fff,#f0f0f0);border:1px solid var(--ios-border);border-radius:10px;
  padding:8px 12px;font-size:12px;box-shadow:0 1px 3px rgba(0,0,0,.1);flex:1 1 150px;min-width:150px;
}
body[data-theme="ios"] .infochip b{display:block;font-size:14px;color:var(--ios-blue-dark);}
body[data-theme="ios"] .bar{height:10px;flex:1;background:#dcdfe3;border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.2);}
body[data-theme="ios"] .bar>span{background:linear-gradient(180deg,#5aa0ff,var(--ios-blue-dark));display:block;height:100%;}

@media(max-width:820px){
  body[data-theme="ios"] .tilenav{grid-template-columns:repeat(4,1fr);}
  body[data-theme="ios"] .device-frame{border-radius:22px;padding:12px 8px 34px;}
}

/* ============================================================
   MODAL UPLOAD & PREVIEW DOKUMEN PDF (universal, semua tema)
   ============================================================ */
.doc-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.doc-modal{
  background:#fff;color:#1b2733;border-radius:12px;padding:20px;
  width:100%;max-width:380px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.4);
  font-family:"Segoe UI",Tahoma,sans-serif;
}
.doc-modal-wide{max-width:800px;height:82vh;display:flex;flex-direction:column;}
.doc-modal h3{margin-top:0;font-size:15px;color:#173a56;padding-right:24px;}
.doc-modal label{font-size:12px;font-weight:700;color:#173a56;display:block;margin:8px 0 4px;}
.doc-modal input{width:100%;padding:8px 10px;border:1px solid #aebdce;border-radius:8px;font-size:12.5px;}
.doc-modal .btn{background:#1BA1E2;color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:12.5px;font-weight:700;}
.doc-modal .btn.secondary{background:#eaf1f8;color:#173a56;}
.doc-modal-close{
  position:absolute;top:12px;right:14px;background:none;border:none;font-size:16px;
  cursor:pointer;color:#666;
}
.doc-preview-frame{flex:1;width:100%;border:1px solid #ccc;border-radius:8px;margin-top:8px;}

.doc-cell-actions{display:flex;gap:5px;flex-wrap:wrap;align-items:center;}
.doc-btn-mini{
  border:none;border-radius:6px;padding:5px 9px;font-size:10.5px;font-weight:700;cursor:pointer;
}
.doc-btn-view{background:#1BA1E2;color:#fff;}
.doc-btn-download{background:#60A917;color:#fff;}
.doc-btn-manage{background:#eaf1f8;color:#345;border:1px solid #aebdce !important;}
.doc-status-empty{font-size:10.5px;opacity:.7;font-style:italic;}

/* ============================================================
   AI AGENT "ETAM" (avatar bertema logo KSDE: hitam, petir merah, biru)
   ============================================================ */
.ai-agent-toggle{
  position:fixed;bottom:16px;left:16px;z-index:998;
  width:58px;height:58px;border-radius:50%;border:3px solid #1BA1E2;
  background:radial-gradient(circle at 35% 30%,#2a2a2a,#000);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  animation:aiPulse 2.4s ease-in-out infinite;
}
.ai-agent-bolt{font-size:26px;color:#e30613;filter:drop-shadow(0 0 4px rgba(227,6,19,.8));}
@keyframes aiPulse{
  0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 0 0 rgba(27,161,226,.5);}
  50%{box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 0 10px rgba(27,161,226,0);}
}
.ai-agent-toggle:hover{transform:scale(1.08);}

.ai-agent-panel{
  position:fixed;bottom:84px;left:16px;z-index:998;
  width:320px;max-width:calc(100vw - 32px);height:440px;max-height:70vh;
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 15px 45px rgba(0,0,0,.35);
  display:flex;flex-direction:column;
  font-family:"Segoe UI",Tahoma,sans-serif;
}
.ai-agent-header{
  background:linear-gradient(120deg,#111,#1c1c1c 60%,#0d1e33);
  color:#fff;padding:10px 12px;display:flex;align-items:center;gap:10px;
  border-bottom:2px solid #1BA1E2;
}
.ai-agent-avatar-sm{
  width:36px;height:36px;border-radius:50%;border:2px solid #1BA1E2;
  background:radial-gradient(circle at 35% 30%,#2a2a2a,#000);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ai-agent-avatar-sm .ai-agent-bolt{font-size:16px;}
.ai-agent-title{flex:1;line-height:1.3;}
.ai-agent-title strong{font-size:13px;}
.ai-agent-subtitle{font-size:10px;opacity:.75;}
.ai-agent-close{background:none;border:none;color:#fff;font-size:15px;cursor:pointer;opacity:.8;}
.ai-agent-close:hover{opacity:1;}

.ai-agent-messages{
  flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;
  background:#f4f6f8;
}
.ai-msg{max-width:80%;padding:8px 12px;border-radius:14px;font-size:12.5px;line-height:1.4;}
.ai-msg-bot{align-self:flex-start;background:#fff;border:1px solid #e0e3e7;border-bottom-left-radius:4px;color:#222;}
.ai-msg-user{align-self:flex-end;background:linear-gradient(120deg,#1BA1E2,#0f6fb3);color:#fff;border-bottom-right-radius:4px;}
.ai-msg-choices{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.ai-choice-btn{
  border:1px solid #1BA1E2;background:#eaf4fc;color:#0f6fb3;border-radius:14px;
  padding:5px 10px;font-size:11px;font-weight:600;cursor:pointer;
}
.ai-choice-btn:hover{background:#1BA1E2;color:#fff;}

.ai-agent-quickreplies{
  display:flex;gap:6px;padding:8px 10px;background:#fff;border-top:1px solid #e6e8eb;
  flex-wrap:wrap;
}
.ai-qr-btn{
  border:1px solid #cdd3da;background:#f7f8fa;border-radius:14px;padding:5px 9px;
  font-size:10.5px;font-weight:600;color:#345;cursor:pointer;
}
.ai-qr-btn:hover{background:#eaf4fc;border-color:#1BA1E2;color:#0f6fb3;}

.ai-agent-inputrow{display:flex;border-top:1px solid #e6e8eb;padding:8px;gap:6px;background:#fff;}
.ai-agent-inputrow input{
  flex:1;border:1px solid #cdd3da;border-radius:16px;padding:8px 12px;font-size:12px;outline:none;
}
.ai-agent-send{
  background:linear-gradient(120deg,#1BA1E2,#0f6fb3);color:#fff;border:none;border-radius:50%;
  width:34px;height:34px;font-size:14px;cursor:pointer;flex-shrink:0;
}

@media(max-width:480px){
  .ai-agent-panel{left:8px;right:8px;width:auto;bottom:78px;}
  .ai-agent-toggle{left:8px;bottom:10px;}
}
/* ---------- Sorotan baris saat dibuka lewat tautan langsung ---------- */
.baris-disorot td{
  animation: sorotBaris 4s ease-out;
}
@keyframes sorotBaris{
  0%,55%{ background:#fff3bf; }
  100%{ background:transparent; }
}
@media (prefers-reduced-motion: reduce){
  .baris-disorot td{ animation:none; background:#fff3bf; }
}

/* ---------- Hero: lambang Pemkab kiri, logo KSDE kanan ---------- */
.hero .hero-teks{ flex:1 1 300px; min-width:0; }
.hero img.logo-ksde{ margin-left:auto; }
body[data-theme="winmo"] .hero img.logo-pemkab{ background:transparent; padding:0; width:92px; }
body[data-theme="ios"]   .hero img.logo-pemkab{ background:transparent; padding:0; }
body[data-theme="dos"]   .hero img.logo-pemkab{ border:none; }
@media (max-width:640px){
  .hero{ justify-content:center; text-align:center; }
  .hero .hero-teks{ flex:1 1 100%; order:3; text-align:left; }
  .hero img.logo-ksde{ margin-left:0; }
  .hero img.logo-pemkab{ order:1; }
}

/* ---------- Tema DOS: sejajarkan hero seperti tema lain ---------- */
body[data-theme="dos"] .hero{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
body[data-theme="dos"] .hero img.logo-pemkab{
  border:1px solid var(--dos-fg); padding:4px; width:70px;
}
body[data-theme="dos"] .hero h1{ margin:0 0 6px; }
@media (max-width:640px){
  body[data-theme="dos"] .hero{ justify-content:center; }
}

/* ---------- Samakan proporsi foto bidang usaha ---------- */
.photo{ aspect-ratio: 900 / 368; object-position: center 62%; }

/* ---------- Kontrol khusus admin, tersembunyi dari pengunjung ---------- */
.admin-only{ display:none !important; }
body.mode-admin .admin-only{ display:inline-flex !important; }
body.mode-admin .upload-panel.admin-only{ display:block !important; }
body.mode-admin .upload-panel.admin-only.hidden{ display:none !important; }
#tanda-admin{
  position:fixed;left:10px;bottom:10px;z-index:1000;
  background:#8a2b1d;color:#fff;font:600 11px/1 system-ui,sans-serif;
  padding:6px 10px;border-radius:4px;letter-spacing:.3px;
}