*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:#18310f;background:#f0f9e8}body{overflow-x:hidden}.scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 10% 8%,rgba(202,255,112,.85),transparent 24%),radial-gradient(circle at 90% 90%,rgba(88,198,43,.25),transparent 28%),linear-gradient(145deg,#fbfff6,#e7f5d9 55%,#f6ffed)}.scene i{position:absolute;width:260px;height:120px;background:rgba(113,210,42,.12);border-radius:100% 0;filter:blur(1px)}.scene i:nth-child(1){left:-100px;top:12%;transform:rotate(-25deg)}.scene i:nth-child(2){right:-90px;top:30%;transform:rotate(35deg)}.scene i:nth-child(3){left:15%;bottom:-70px;transform:rotate(15deg)}.wrap{position:relative;z-index:1;width:min(100% - 24px,520px);margin:auto;padding:18px 0 28px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#18310f}.brand img{width:44px;height:44px;object-fit:cover;border-radius:14px;background:#e9f9ce;border:1px solid #cfe9af}.brand b{display:block;font:900 16px Nunito,sans-serif;letter-spacing:.06em}.brand small{display:block;color:#6b8760;font:800 8px "Plus Jakarta Sans",sans-serif;letter-spacing:.2em}.version{padding:8px 11px;border-radius:999px;background:#fff;border:1px solid #d6e9c7;color:#4d7743;font:800 9px "Plus Jakarta Sans",sans-serif}.card{background:rgba(255,255,255,.95);border:1px solid #fff;border-radius:28px;box-shadow:0 24px 70px rgba(47,112,24,.15),inset 0 1px 0 #fff;padding:20px;backdrop-filter:blur(14px)}.gate{text-align:center}.art{width:min(100%,420px);aspect-ratio:16/9;height:auto;margin:0 auto 14px;border-radius:24px;overflow:hidden;background:#eefbdc;border:1px solid #d3ebbc;box-shadow:0 18px 36px rgba(67,143,29,.14)}.art img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}.eyebrow{color:#55a536;font:900 9px "Plus Jakarta Sans",sans-serif;letter-spacing:.18em}.gate h1{margin:8px 0 10px;font:900 clamp(29px,8vw,44px)/.98 Nunito,sans-serif;letter-spacing:-.03em}.gate h1 strong{color:#58b72f;text-shadow:0 3px 0 #e9ffd9}.gate p{max-width:390px;margin:0 auto 18px;color:#62765c;font:600 11px/1.65 "Plus Jakarta Sans",sans-serif}.field{display:block;text-align:left;margin-bottom:10px}.field span{display:block;margin:0 0 6px 3px;color:#6b8364;font:900 8px "Plus Jakarta Sans",sans-serif;letter-spacing:.14em}.field input{width:100%;height:54px;border:1px solid #cfe7bd;border-radius:16px;padding:0 15px;background:#fff;color:#18310f;outline:none;font:800 14px "Plus Jakarta Sans",sans-serif;letter-spacing:.08em}.field input:focus{border-color:#7bd63c;box-shadow:0 0 0 4px rgba(123,214,60,.14)}.btn{width:100%;min-height:52px;border-radius:16px;border:0;display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;font:900 10px "Plus Jakarta Sans",sans-serif;letter-spacing:.12em}.primary{color:#fff;background:linear-gradient(110deg,#8ee13a,#50bd2d);box-shadow:0 14px 24px rgba(76,185,43,.23)}.secondary{margin-top:9px;background:#f4faee;border:1px solid #d5e9c7;color:#4f7e44}.btn:disabled{opacity:.6;cursor:wait}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.info-grid>div{min-width:0;padding:11px 12px;border:1px solid #dfedd7;border-radius:15px;background:#fbfff8;text-align:left}.info-grid small{display:block;color:#82927c;font:900 8px "Plus Jakarta Sans",sans-serif;letter-spacing:.12em;margin-bottom:5px}.info-grid b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#304a2a;font:900 11px Nunito,sans-serif}.msg{display:none;margin-top:11px;padding:10px 12px;border-radius:12px;font:700 9px/1.5 "Plus Jakarta Sans",sans-serif}.msg.show{display:block}.msg.good{color:#2e7e2a;background:#f0faeb;border:1px solid #c4e5b9}.msg.err{color:#a54141;background:#fff5f5;border:1px solid #edc5c5}.maintenance{display:none;margin-top:10px;padding:10px;border-radius:12px;background:#fff8e2;border:1px solid #f1dfa8;color:#8a6824;font:800 9px "Plus Jakarta Sans",sans-serif}.maintenance.show{display:block}.dashboard{padding:18px}.hidden{display:none!important}.dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.dash-head h2{margin:4px 0 0;font:900 24px Nunito,sans-serif}.active{display:flex;align-items:center;gap:7px;color:#3e932f;font:900 8px "Plus Jakarta Sans",sans-serif;letter-spacing:.12em}.active i{width:8px;height:8px;border-radius:50%;background:#63da41;box-shadow:0 0 12px #70ed51}.remaining{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding:12px;border-radius:15px;background:linear-gradient(135deg,#efffde,#fbfff8);border:1px solid #d5eac6}.remaining span{color:#7b8e74;font:900 8px "Plus Jakarta Sans",sans-serif;letter-spacing:.12em}.remaining strong{color:#4c9c32;font:900 13px Nunito,sans-serif}.dashboard h3{margin:18px 0 9px;color:#607b57;font:900 9px "Plus Jakarta Sans",sans-serif;letter-spacing:.18em}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.feature{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;border:1px solid #dfecd8;border-radius:15px;background:#fbfff8;min-width:0}.feature.disabled{opacity:.45}.feature-meta{display:flex;align-items:center;gap:8px;min-width:0}.feature-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:10px;background:#ebf9dd;color:#4c9b30;font:900 8px "Plus Jakarta Sans",sans-serif}.feature-meta b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#385630;font:900 10px "Plus Jakarta Sans",sans-serif}.feature-meta small{display:block;color:#82927c;font:700 7px "Plus Jakarta Sans",sans-serif;margin-top:2px}.switch{position:relative;width:44px;height:25px;flex:0 0 auto}.switch input{position:absolute;opacity:0}.switch span{position:absolute;inset:0;border-radius:999px;background:#dce9d6;cursor:pointer}.switch span:before{content:"";position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.16);transition:.2s}.switch input:checked+span{background:#67c83a}.switch input:checked+span:before{transform:translateX(19px)}.response{margin-top:14px;border:1px solid #dfebd9;border-radius:16px;overflow:hidden;background:#fafff6}.response>div{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid #e5efe0}.response span{color:#809178;font:900 8px "Plus Jakarta Sans",sans-serif;letter-spacing:.11em}.response strong{color:#499831;font:900 8px "Plus Jakarta Sans",sans-serif}pre{margin:0;padding:11px;max-height:170px;overflow:auto;color:#36542e;background:#fafff6;font:8px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word}footer{text-align:center;margin-top:14px;color:#789070;font:800 8px "Plus Jakarta Sans",sans-serif;letter-spacing:.12em}@media(max-width:410px){.feature-grid{grid-template-columns:1fr}.card{padding:16px}.art{width:100%;border-radius:20px}}.dashboard-maintenance{display:flex;flex-direction:column;gap:4px;text-align:left}.dashboard-maintenance strong{font:900 10px Nunito,sans-serif}.dashboard-maintenance span{font:700 8px/1.5 "Plus Jakarta Sans",sans-serif}.dashboard-maintenance b{font:900 9px "Plus Jakarta Sans",sans-serif}.pause-info{display:flex;justify-content:space-between;gap:8px;margin-top:9px;padding:11px 12px;border-radius:15px;background:#edfbe3;border:1px solid #cbe8ba;color:#4a833c;font:900 8px "Plus Jakarta Sans",sans-serif}.pause-info b{font:900 11px Nunito,sans-serif}.extension-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.extension-info>div{padding:10px;border:1px solid #e1ecd9;border-radius:13px;background:#fbfff8}.extension-info span{display:block;color:#84927d;font:900 7px "Plus Jakarta Sans",sans-serif;letter-spacing:.08em;margin-bottom:4px}.extension-info b{display:block;color:#3f6836;font:900 10px Nunito,sans-serif}@media(max-width:410px){.extension-info{grid-template-columns:1fr}}

.extension-notice{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-top:9px;padding:11px 12px;border-radius:15px;background:#f4ffe9;border:1px solid #cbe8b7;color:#3e7432}.extension-notice>div{min-width:0}.extension-notice strong{display:block;font:900 9px Nunito,sans-serif}.extension-notice span{display:block;margin-top:3px;color:#61765a;font:700 8px/1.45 "Plus Jakarta Sans",sans-serif}.extension-notice b{display:block;margin-top:5px;color:#4d9b35;font:900 10px Nunito,sans-serif}.extension-notice button{width:28px;height:28px;padding:0;border-radius:9px;background:#e7f6d8;color:#4a7e3c;box-shadow:none;font:900 18px/1 Nunito,sans-serif;flex:0 0 auto}

.notice-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.dashboard-maintenance button{width:27px;height:27px;padding:0;border-radius:9px;background:#fff0c9;color:#8a6824;border:1px solid #eed89b;font:900 17px/1 Nunito}.pause-info button{width:26px;height:26px;padding:0;border-radius:8px;background:#fff;color:#4a833c;border:1px solid #cbe8ba;font:900 16px/1 Nunito;flex:0 0 auto}.pause-info span{flex:1}

/* Smooth feature feedback: UI changes immediately, server sync is shown as a light loading state. */
.feature.loading{border-color:#bfe7a5;background:linear-gradient(90deg,#fbfff8,#f1fce9,#fbfff8);background-size:220% 100%;animation:feature-shimmer 1.05s ease-in-out infinite}
.switch.busy span{cursor:wait}
.switch.busy span:after{content:"";position:absolute;right:5px;top:50%;width:9px;height:9px;margin-top:-5px;border:2px solid rgba(255,255,255,.6);border-top-color:#4ea431;border-radius:50%;animation:feature-spin .65s linear infinite}
.switch.busy input:checked+span:after{border-color:rgba(255,255,255,.65);border-top-color:#2f7c22}
@keyframes feature-spin{to{transform:rotate(360deg)}}
@keyframes feature-shimmer{0%{background-position:160% 0}100%{background-position:-60% 0}}

/* Admin-disabled feature state: clearly show maintenance in red. */
.feature.disabled{opacity:1!important;border-color:#f0bcbc!important;background:#fff5f5!important}.feature.disabled .feature-icon{background:#ffe1e1!important;color:#b33c3c!important}.feature.disabled .feature-meta b,.feature.disabled .feature-meta small{color:#b33c3c!important}.feature.disabled .switch span{background:#efcaca!important;cursor:not-allowed!important}.feature.disabled .switch span:before{background:#fff!important}
\n.feature-group{margin:14px 0 0;padding:12px;border:1px solid rgba(217,234,203,.8);border-radius:16px;background:rgba(251,255,248,.72)}\n.feature-group-title{margin:0 0 9px;color:#527447;font:900 9px var(--sans);letter-spacing:.12em;text-transform:uppercase}\n.feature-group .feature{margin:0}\n
/* Collapsible feature groups */
.feature-group{padding:0;overflow:hidden}
.feature-group-title{width:100%;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;color:#527447;cursor:pointer;text-align:left;font:900 9px "Plus Jakarta Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase}
.feature-group-title i,.feature-group-admin-title i{font-family:"Font Awesome 6 Free";font-weight:900;width:auto;height:auto;border:0;transform:rotate(0deg);transition:transform .2s ease;flex:0 0 auto;font-size:11px;line-height:1}
.feature-group:not(.collapsed) .feature-group-title i,.feature-group-admin:not(.collapsed) .feature-group-admin-title i{transform:rotate(180deg)}
.feature-group-content{padding:0 12px 12px}
.feature-group.collapsed .feature-group-content,.feature-group-admin.collapsed .feature-group-admin-content{display:none}

/* Remove mobile tap/selection highlight from controls. */
*,button,a,label,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a{-webkit-touch-callout:none}
button:focus,button:focus-visible,a:focus,a:focus-visible{outline:none}
.feature-meta b{white-space:nowrap}
.feature-status{display:inline-block;margin-left:5px;padding:2px 5px;border-radius:999px;font:900 6px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.08em;vertical-align:middle;font-style:normal}
.feature-status.status-safe{color:#2e8629;background:#e9f8e4}
.feature-status.status-unknown,.feature-status.status-rawan{color:#9a7223;background:#fff4cf}
.feature-status.status-ban{color:#b83b3b;background:#ffe2e2}

.feature-value-control{margin:6px 0 2px;padding:8px 10px;border:1px solid #e3efd9;border-radius:10px;background:#f9fff5}.feature-value-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;color:#81927a;font:900 7px "Plus Jakarta Sans",sans-serif;letter-spacing:.08em}.feature-value-head strong{color:#4a723d;font-size:8px}.feature-value-control input[type=range]{width:100%;height:4px;padding:0;margin:0;accent-color:#59c92f}.feature-value-select{height:34px;width:100%;padding:0 9px;border:1px solid #d7e7cd;border-radius:9px;background:#fff;color:#38552f;font:800 9px "Plus Jakarta Sans",sans-serif;outline:none}


/* Consistent mobile-first design width: larger screens keep the same UI scale. */
.wrap{width:min(calc(100vw - 24px),390px)}
.card{width:100%}

/* Feature controls: name/description first, range/select underneath. */
.feature{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"meta switch" "value value";align-items:center}
.feature-meta{grid-area:meta}
.feature>.switch{grid-area:switch}
.feature>.feature-value-control{grid-area:value;width:100%;margin:7px 0 0}
.feature:not(.has-value){grid-template-areas:"meta switch"}
.feature-value-control{box-sizing:border-box}
.feature-meta b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}

/* Keep the two-column grid on ordinary phones, but collapse only when the viewport is truly narrow. */
.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:360px){.wrap{width:calc(100vw - 18px)}.feature-grid{grid-template-columns:1fr}.card{padding:16px}}

/* Stable phone-style layout: keep the same visual canvas and one feature per row on every device. */
.wrap{width:min(390px,calc(100vw - 24px));margin-inline:auto}
.feature-grid{grid-template-columns:1fr!important}
@media(max-width:360px){.wrap{width:calc(100vw - 18px)}.feature-grid{grid-template-columns:1fr!important}}

/* ================= General visual polish ================= */
html{scroll-behavior:smooth}
::selection{background:#bdf07a;color:#18310f}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbe8ac;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#a9d885}
.card{animation:mrCardIn .38s cubic-bezier(.22,.9,.32,1.2)}
@keyframes mrCardIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.btn{transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.btn:not(:disabled):active{transform:scale(.97)}
.primary:not(:disabled):hover{filter:brightness(1.04);box-shadow:0 16px 30px rgba(76,185,43,.3);transform:translateY(-1px)}
.secondary:not(:disabled):hover{background:#eef8e2;border-color:#c3e2a9;transform:translateY(-1px)}
.field input{transition:border-color .16s ease,box-shadow .16s ease}
.switch span{transition:background .2s ease}
.switch span:before{transition:transform .22s cubic-bezier(.34,1.4,.64,1)}
.brand img{transition:transform .2s ease}
.brand:hover img{transform:rotate(-4deg) scale(1.04)}

/* ================= Dashboard navigation bar ================= */
.dash-nav{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0 12px;padding:5px;border-radius:16px;background:#eef7e2;border:1px solid #dcecc9}
.dash-nav-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;height:42px;border:0;border-radius:12px;background:transparent;color:#5e7a54;cursor:pointer;font:900 10px "Plus Jakarta Sans",sans-serif;letter-spacing:.09em;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.dash-nav-btn i{font-size:12px}
.dash-nav-btn.active{background:linear-gradient(110deg,#8ee13a,#50bd2d);color:#fff;box-shadow:0 10px 20px rgba(76,185,43,.28)}
.dash-nav-btn:not(.active):hover{background:#e2f2cd;color:#3f6836}
.dash-nav-dot{width:7px;height:7px;border-radius:50%;background:#ff8a3d;box-shadow:0 0 0 2px #fff,0 0 8px rgba(255,138,61,.7);animation:mrDotPulse 1.6s ease-in-out infinite}
.dash-nav-btn.active .dash-nav-dot{box-shadow:0 0 0 2px #4fb92c,0 0 8px rgba(255,138,61,.7)}
@keyframes mrDotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.7}}
.dash-nav-btn.info-nav-attention{animation:mrNavPulse 1.3s ease-in-out infinite}
@keyframes mrNavPulse{0%{box-shadow:0 0 0 0 rgba(89,201,47,.55)}70%{box-shadow:0 0 0 11px rgba(89,201,47,0)}100%{box-shadow:0 0 0 0 rgba(89,201,47,0)}}

.dash-section{animation:mrSectionIn .28s ease}
@keyframes mrSectionIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ================= Info spotlight callout (shown every time the dashboard loads, =================
   dismissed only by the × button — never auto-hides, never remembered via
   localStorage, so a refresh always brings it back. The pointer row below
   mirrors .dash-nav's own 2-column grid so the hand/arrow always land under
   the INFO tab exactly, at any viewport width. */
.info-spotlight{margin:-2px 0 12px;opacity:0;transform:translateY(-6px);transition:opacity .24s ease,transform .24s cubic-bezier(.22,.9,.32,1.2)}
.info-spotlight.hidden{display:none}
.info-spotlight.show{opacity:1;transform:translateY(0)}
.info-spotlight-pointer{display:grid;grid-template-columns:1fr 1fr;gap:6px;pointer-events:none}
.info-spotlight-pointer-cell{display:flex;justify-content:center}
.info-spotlight-hand{color:#e2a417;font-size:19px;filter:drop-shadow(0 3px 4px rgba(120,80,10,.28));animation:mrHandPoint 1s ease-in-out infinite}
.info-spotlight-hand i{display:block}
@keyframes mrHandPoint{0%,100%{transform:translateY(3px)}50%{transform:translateY(-6px)}}
.info-spotlight-body{position:relative;display:flex;align-items:center;gap:9px;margin-top:2px;padding:11px 34px 11px 12px;border-radius:15px;background:linear-gradient(120deg,#fff7ea,#fffaf1);border:1px solid #f3d99a;box-shadow:0 14px 28px rgba(220,160,20,.16);min-width:0}
.info-spotlight-body>i{flex:0 0 auto;color:#e2a417;font-size:14px}
.info-spotlight-body span{flex:1;min-width:0;color:#7a5b12;font:800 10px/1.5 "Plus Jakarta Sans",sans-serif}
.info-spotlight-body button{position:absolute;top:7px;right:7px;width:20px;height:20px;padding:0;border:0;border-radius:7px;background:rgba(226,164,23,.18);color:#a97a12;font:900 13px/1 Nunito,sans-serif;cursor:pointer;transition:background .15s ease}
.info-spotlight-body button:hover{background:rgba(226,164,23,.3)}

/* ================= Info tab: tutorials + downloads ================= */
.info-list{display:flex;flex-direction:column;gap:12px}
.info-block{padding:13px;border:1px solid #dfecd8;border-radius:18px;background:#fbfff8}
.info-block-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.info-block-head i{width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:#ebf9dd;color:#4c9b30;font-size:12px;flex:0 0 auto}
.info-block-head i.fa-youtube{background:#ffe9e9;color:#e0312f}
.info-block-head b{color:#2f4c28;font:900 11px "Plus Jakarta Sans",sans-serif;letter-spacing:.02em}
.video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#111;box-shadow:0 10px 24px rgba(30,50,15,.16)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-empty,.info-download-empty{display:flex;align-items:center;justify-content:center;gap:7px;padding:16px;border-radius:12px;background:#f2f6ec;color:#8a9882;font:800 9px "Plus Jakarta Sans",sans-serif;letter-spacing:.04em}
.video-empty{aspect-ratio:16/9}
.info-download-btn{width:auto;padding:0 20px;display:inline-flex;gap:8px}
.info-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:34px 16px;color:#8a9882}
.info-empty i{font-size:26px;color:#b7cf9f}
.info-empty .eyebrow{color:#9aab8f;letter-spacing:.22em}
.info-empty p{margin:0;max-width:260px;color:#7d8c76;font:700 10px/1.6 "Plus Jakarta Sans",sans-serif}

@media(max-width:360px){.info-spotlight-body{padding-right:30px}.info-spotlight-body span{font-size:9px}}