/* ═══════════════ 777 INNER PROTECTION — v7.0 ═══════════════ */
:root{
  --bg:#07070b; --bg2:#0b0b12; --s:#101018; --s2:#15151f;
  --b:#1e1e2c; --b2:#2a2a3c;
  --a:#e8a840; --a2:#c0842c; --a-dim:rgba(232,168,64,.12);
  --g:#4ade80; --r:#ef4444; --am:#f59e0b; --cy:#38bdf8;
  --t:#e6e6ee; --d:#8a8a9e; --dd:#55556a;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;
  --sw:250px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--t);overflow:hidden}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--a2)}
::selection{background:var(--a-dim);color:var(--a)}

/* ══════════ GATE ══════════ */
#gate{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .9s,visibility .9s}
#gate.hidden{opacity:0;visibility:hidden;pointer-events:none}
.gate-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(232,168,64,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(232,168,64,.03) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);animation:gridDrift 24s linear infinite}
@keyframes gridDrift{to{background-position:44px 44px,44px 44px}}
.gate-grid::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.14) 2px 4px)}
.gate-inner{position:relative;text-align:center;padding:24px;max-width:440px;width:100%}
.gate-mark{font-family:var(--mono);font-size:clamp(40px,7vw,72px);color:rgba(232,168,64,.07);letter-spacing:4px;margin-bottom:2px;user-select:none}
.gate-title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(40px,7vw,72px);font-weight:700;color:var(--a);letter-spacing:14px;text-shadow:0 0 32px rgba(232,168,64,.45),0 0 80px rgba(232,168,64,.15);margin-bottom:6px;animation:gatePulse 3.2s ease-in-out infinite}
@keyframes gatePulse{50%{text-shadow:0 0 44px rgba(232,168,64,.65),0 0 110px rgba(232,168,64,.25)}}
.gate-sub{font-family:var(--mono);font-size:clamp(10px,1.6vw,13px);color:var(--d);letter-spacing:7px;text-transform:uppercase;margin-bottom:14px}
.gate-classified{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--r);border:1px solid rgba(239,68,68,.4);padding:4px 14px;border-radius:2px;margin-bottom:34px;background:rgba(239,68,68,.06);animation:blink 2.4s step-end infinite}
@keyframes blink{50%{opacity:.55}}
.gate-form{display:flex;flex-direction:column;align-items:center}
#pw{background:var(--s);border:1px solid var(--b);color:var(--t);padding:14px 20px;font-size:15px;font-family:var(--mono);border-radius:6px;width:min(320px,100%);text-align:center;outline:none;letter-spacing:3px;transition:border-color .25s,box-shadow .25s}
#pw:focus{border-color:var(--a);box-shadow:0 0 0 3px var(--a-dim),0 0 24px rgba(232,168,64,.12)}
#pw.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.gate-err{color:var(--r);font-family:var(--mono);font-size:11px;margin-top:10px;min-height:18px;letter-spacing:1px}
.gate-btn{background:linear-gradient(180deg,var(--a),var(--a2));color:#0a0a0a;border:none;padding:13px 52px;font-size:13px;font-weight:700;border-radius:6px;cursor:pointer;margin-top:8px;letter-spacing:3px;text-transform:uppercase;font-family:var(--mono);transition:transform .15s,box-shadow .25s,filter .2s}
.gate-btn:hover{filter:brightness(1.1);box-shadow:0 4px 28px rgba(232,168,64,.3);transform:translateY(-1px)}
.gate-btn:active{transform:translateY(0)}
.gate-btn:disabled{opacity:.5;cursor:not-allowed}
.gate-foot{font-family:var(--mono);font-size:10px;color:var(--dd);margin-top:36px;letter-spacing:2px}
.gate-last{font-family:var(--mono);font-size:10px;color:var(--d);margin-top:10px;letter-spacing:1px}
.gate-notice{font-family:var(--mono);font-size:9px;color:var(--dd);margin-top:16px;letter-spacing:1px;opacity:.7}

#granted{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s}
#granted.show{opacity:1}
.granted-text{font-family:var(--mono);font-size:clamp(20px,4vw,34px);color:var(--g);letter-spacing:10px;text-shadow:0 0 30px rgba(74,222,128,.5);animation:grantedIn .5s ease-out}
@keyframes grantedIn{from{transform:scale(.85);opacity:0;letter-spacing:20px}}

/* ══════════ APP LAYOUT ══════════ */
#app{display:flex;height:100vh;opacity:1;transition:opacity .6s}
#app.hidden-app{opacity:0;pointer-events:none}

/* Sidebar */
#sb{width:var(--sw);min-width:var(--sw);background:var(--bg2);border-right:1px solid var(--b);display:flex;flex-direction:column;z-index:40;transition:transform .3s}
.sb-logo{padding:22px 20px 16px;border-bottom:1px solid var(--b)}
.sb-logo-mark{font-family:Georgia,serif;font-size:30px;font-weight:700;color:var(--a);letter-spacing:6px;text-shadow:0 0 18px rgba(232,168,64,.35)}
.sb-logo-sub{font-family:var(--mono);font-size:10px;color:var(--d);letter-spacing:2px;margin-top:4px}
.sb-search{display:flex;align-items:center;gap:8px;margin:14px 14px 8px;padding:9px 12px;background:var(--s);border:1px solid var(--b);border-radius:6px;color:var(--d);transition:border-color .2s}
.sb-search:focus-within{border-color:var(--a);color:var(--a)}
.sb-search input{flex:1;background:none;border:none;outline:none;color:var(--t);font-size:13px;font-family:var(--mono)}
.sb-search input::placeholder{color:var(--dd)}
.sb-cats{flex:1;overflow-y:auto;padding:6px 8px}
.ci{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--d);transition:background .15s,color .15s;border-left:2px solid transparent}
.ci:hover{background:var(--s);color:var(--t)}
.ci.active{background:var(--a-dim);color:var(--a);border-left-color:var(--a);font-weight:600}
.ci .cc{font-family:var(--mono);font-size:10px;background:var(--s2);padding:2px 7px;border-radius:10px;color:var(--dd)}
.ci.active .cc{background:rgba(232,168,64,.18);color:var(--a)}
.sb-foot{display:flex;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--b);font-family:var(--mono);font-size:10px;color:var(--dd);letter-spacing:1px}
#sbOverlay{display:none}

/* Main */
#main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid var(--b);background:var(--bg2)}
#menuBtn{display:none;background:none;border:1px solid var(--b);border-radius:6px;color:var(--t);padding:7px;cursor:pointer}
.topbar-titles{flex:1;min-width:0}
.topbar-titles h1{font-size:19px;font-weight:700;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-titles p{font-family:var(--mono);font-size:11px;color:var(--d);margin-top:2px}
.topbar-actions{display:flex;gap:8px;align-items:center}
.chip{background:var(--s);border:1px solid var(--b);color:var(--d);padding:7px 13px;border-radius:6px;font-family:var(--mono);font-size:11px;cursor:pointer;transition:all .15s;letter-spacing:1px}
.chip:hover{border-color:var(--a);color:var(--a)}
.chip.active{background:var(--a-dim);border-color:var(--a);color:var(--a)}
.clock-chip{cursor:default;color:var(--cy);border-color:rgba(56,189,248,.3)}
.clock-chip:hover{color:var(--cy);border-color:rgba(56,189,248,.5)}
.session-chip{cursor:default}
.session-chip.warn{color:var(--am);border-color:rgba(245,158,11,.4)}

/* Dashboard */
.dash{padding:20px 24px 4px;overflow-y:auto;max-height:46vh}
.dash-row{margin-bottom:20px}
.dash-label{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--dd);text-transform:uppercase;margin-bottom:10px}
.dash-cards{display:flex;gap:10px;flex-wrap:wrap}
.dash-empty{font-family:var(--mono);font-size:11px;color:var(--dd);padding:8px 0}
.mini-card{background:var(--s);border:1px solid var(--b);border-radius:8px;padding:11px 14px;cursor:pointer;transition:all .15s;min-width:170px;max-width:260px}
.mini-card:hover{border-color:var(--a);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.35)}
.mini-card .mc-name{font-size:12px;font-weight:600;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-card .mc-sub{font-family:var(--mono);font-size:10px;color:var(--dd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cat-card{background:var(--s);border:1px solid var(--b);border-radius:8px;padding:14px;cursor:pointer;transition:all .15s}
.cat-card:hover{border-color:var(--a);transform:translateY(-1px)}
.cat-card .cat-icon{font-size:20px;margin-bottom:6px}
.cat-card .cat-name{font-size:13px;font-weight:600}
.cat-card .cat-n{font-family:var(--mono);font-size:10px;color:var(--dd);margin-top:2px}

/* Tools grid */
.tools-wrap{flex:1;overflow-y:auto;padding:16px 24px 32px}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:12px}
.tool{background:var(--s);border:1px solid var(--b);border-radius:10px;padding:16px;cursor:pointer;transition:all .18s;position:relative;overflow:hidden}
.tool::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--a);opacity:0;transition:opacity .18s}
.tool:hover{border-color:var(--b2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.tool:hover::before{opacity:1}
.ti{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.tic{font-size:16px}
.tn{font-size:14px;font-weight:600;letter-spacing:.2px}
.tstar{margin-left:auto;color:var(--dd);font-size:14px;cursor:pointer;transition:color .15s,transform .15s}
.tstar:hover{color:var(--a);transform:scale(1.2)}
.tstar.faved{color:var(--a)}
.td{font-size:12px;color:var(--d);line-height:1.45;margin-bottom:9px}
.ta{font-family:var(--mono);font-size:10px;color:var(--dd);letter-spacing:.5px}
.tool:hover .ta{color:var(--a)}

/* ══════════ MODAL ══════════ */
#result{position:fixed;inset:0;z-index:60;background:rgba(4,4,8,.75);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;padding:20px}
#result.show{opacity:1;visibility:visible}
.rm{background:var(--bg2);border:1px solid var(--b2);border-radius:14px;width:min(880px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(232,168,64,.06);transform:translateY(14px) scale(.98);transition:transform .25s}
#result.show .rm{transform:none}
.rh{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 22px 14px;border-bottom:1px solid var(--b)}
.rh-title h2{font-size:17px;font-weight:700}
.rh-meta{font-family:var(--mono);font-size:10px;color:var(--dd);margin-top:4px;letter-spacing:1px}
.rh-actions{display:flex;gap:6px}
.icon-btn{background:var(--s);border:1px solid var(--b);color:var(--d);width:32px;height:32px;border-radius:6px;cursor:pointer;font-size:16px;transition:all .15s;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{border-color:var(--a);color:var(--a)}
.icon-btn.faved{color:var(--a);border-color:var(--a)}
.rf{display:flex;gap:10px;padding:14px 22px;border-bottom:1px solid var(--b)}
#rinput{flex:1;background:var(--s);border:1px solid var(--b);color:var(--t);padding:11px 15px;font-size:14px;font-family:var(--mono);border-radius:7px;outline:none;transition:border-color .2s,box-shadow .2s}
#rinput:focus{border-color:var(--a);box-shadow:0 0 0 3px var(--a-dim)}
.run-btn{background:linear-gradient(180deg,var(--a),var(--a2));color:#0a0a0a;border:none;padding:11px 30px;font-size:13px;font-weight:700;border-radius:7px;cursor:pointer;font-family:var(--mono);letter-spacing:2px;text-transform:uppercase;transition:filter .2s,transform .15s}
.run-btn:hover{filter:brightness(1.1)}
.run-btn:active{transform:scale(.97)}
.run-btn:disabled{opacity:.5;cursor:wait}
.rstatus{font-family:var(--mono);font-size:10px;color:var(--dd);padding:8px 22px 0;letter-spacing:1px;min-height:22px}
.rstatus .ok{color:var(--g)} .rstatus .bad{color:var(--r)}
.rc{flex:1;overflow:auto;padding:14px 22px;min-height:180px}
.rc pre{font-family:var(--mono);font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.loading{color:var(--d);font-family:var(--mono);font-size:12px;padding:20px 0;text-align:center}
.loading::after{content:'';animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.error{color:var(--r);font-family:var(--mono);font-size:12px;padding:14px;background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.25);border-radius:7px}
.rfoot{display:flex;gap:8px;padding:12px 22px;border-top:1px solid var(--b)}
.mini-btn{background:var(--s);border:1px solid var(--b);color:var(--d);padding:7px 14px;border-radius:6px;font-family:var(--mono);font-size:10px;cursor:pointer;letter-spacing:1px;transition:all .15s}
.mini-btn:hover:not(:disabled){border-color:var(--a);color:var(--a)}
.mini-btn:disabled{opacity:.35;cursor:not-allowed}
/* JSON syntax colors */
.j-key{color:var(--cy)} .j-str{color:var(--g)} .j-num{color:var(--a)} .j-bool{color:#c084fc} .j-null{color:var(--dd)}
.rc a{color:var(--cy);text-decoration:none;border-bottom:1px dotted rgba(56,189,248,.4)}
.rc a:hover{border-bottom-style:solid}

/* ══════════ COMMAND PALETTE ══════════ */
#palette{position:fixed;inset:0;z-index:80;background:rgba(4,4,8,.7);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
#palette.show{opacity:1;visibility:visible}
.pal-box{background:var(--bg2);border:1px solid var(--b2);border-radius:12px;width:min(560px,92vw);box-shadow:0 24px 80px rgba(0,0,0,.6);overflow:hidden;transform:translateY(-8px);transition:transform .2s}
#palette.show .pal-box{transform:none}
.pal-input-row{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--b);color:var(--d)}
#palInput{flex:1;background:none;border:none;outline:none;color:var(--t);font-size:15px;font-family:var(--mono)}
.pal-list{max-height:340px;overflow-y:auto}
.pal-item{display:flex;align-items:center;gap:10px;padding:11px 18px;cursor:pointer;font-size:13px;border-left:2px solid transparent}
.pal-item .pi-cat{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--dd)}
.pal-item.sel{background:var(--a-dim);border-left-color:var(--a)}
.pal-item.sel .pi-cat{color:var(--a)}

/* Toast */
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--s2);border:1px solid var(--b2);color:var(--t);padding:11px 22px;border-radius:8px;font-family:var(--mono);font-size:12px;letter-spacing:1px;z-index:90;transition:transform .3s;box-shadow:0 8px 32px rgba(0,0,0,.5);pointer-events:none}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.err{border-color:rgba(239,68,68,.5);color:var(--r)}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:860px){
  #sb{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%)}
  #sb.open{transform:none;box-shadow:24px 0 60px rgba(0,0,0,.5)}
  #sbOverlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:35;opacity:0;visibility:hidden;transition:opacity .25s}
  #sbOverlay.show{opacity:1;visibility:visible}
  #menuBtn{display:flex}
  .topbar{padding:12px 14px;flex-wrap:wrap}
  .topbar-actions{margin-left:auto}
  .dash{padding:14px 14px 2px}
  .tools-wrap{padding:12px 14px 28px}
  .tools{grid-template-columns:1fr}
  .rm{max-height:94vh}
  .kbd-chip{display:none}
  .clock-chip{display:none}
}