/* Workspace 2.3 — themes, utilities, Net Phantom */

/* —— Theme swatches —— */
.theme-grid{grid-template-columns:repeat(3,1fr)!important}
.theme-swatch,.wallpaper-options button span{display:block;height:42px;margin-bottom:6px;border-radius:4px;border:1px solid rgba(255,255,255,.08)}
.theme-emerald,.wallpaper-options button:nth-child(1) span{background:linear-gradient(135deg,#092521,#4ee3c1)}
.theme-cobalt{background:linear-gradient(135deg,#0b1e3c,#6eb6ff)}
.theme-mono{background:linear-gradient(135deg,#17191b,#c5d0d4)}
.theme-solar{background:linear-gradient(135deg,#302316,#ffb45a)}
.theme-cyber{background:linear-gradient(135deg,#020a06,#39ff14)}
.theme-rose{background:linear-gradient(135deg,#140810,#ff8ec8)}
.theme-arctic{background:linear-gradient(135deg,#061018,#a8e4ff)}
.theme-lava{background:linear-gradient(135deg,#0e0604,#ff5a28)}
.theme-liminal{background:linear-gradient(135deg,#1a180c,#c9b86a)}

body[data-wallpaper="cyber"] .ambient-veil{background:radial-gradient(ellipse at 50% 20%,rgba(57,255,20,.12),transparent 55%)}
body[data-wallpaper="rose"] .ambient-veil{background:radial-gradient(ellipse at 40% 30%,rgba(255,142,200,.14),transparent 60%)}
body[data-wallpaper="arctic"] .ambient-veil{background:radial-gradient(ellipse at 50% 0%,rgba(168,228,255,.14),transparent 55%)}
body[data-wallpaper="lava"] .ambient-veil{background:radial-gradient(ellipse at 50% 80%,rgba(255,90,40,.16),transparent 50%)}
body[data-wallpaper="liminal"] .ambient-veil{background:radial-gradient(ellipse at 50% 40%,rgba(201,184,106,.18),transparent 55%)}
body[data-wallpaper="cyber"] #ambient{filter:hue-rotate(40deg) saturate(1.35) brightness(1.05)}
body[data-wallpaper="rose"] #ambient{filter:hue-rotate(-40deg) saturate(1.15)}
body[data-wallpaper="arctic"] #ambient{filter:hue-rotate(160deg) saturate(1.1) brightness(1.05)}
body[data-wallpaper="lava"] #ambient{filter:hue-rotate(-15deg) saturate(1.35) brightness(.95)}
body[data-wallpaper="liminal"] #ambient{filter:sepia(.55) saturate(.85) hue-rotate(5deg) brightness(1.05)}

/* —— Utility apps —— */
.util-app header{margin-bottom:12px}
.util-app header h1{margin:.2rem 0 .4rem}
.util-app header p{opacity:.75;font-size:.9rem}
.util-row{display:flex;gap:12px;align-items:center;margin:10px 0}
.util-row label{display:flex;gap:10px;align-items:center;width:100%}
.util-row input[type="range"]{flex:1}
.util-checks{display:flex;flex-wrap:wrap;gap:10px 14px;margin:8px 0 14px;font-size:.88rem}
.util-display{
  display:block;width:100%;padding:14px 16px;margin:8px 0 12px;
  font-family:ui-monospace,Consolas,monospace;font-size:1.05rem;letter-spacing:.04em;
  background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:8px;word-break:break-all;
}
.util-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.util-actions button,.util-app button[type="submit"],.util-app .focus-actions button{
  display:inline-flex;align-items:center;gap:6px;padding:8px 12px;
  border:1px solid var(--line);background:rgba(8,22,26,.75);color:var(--text);
  border-radius:8px;cursor:pointer;font:inherit
}
.util-actions button:hover{border-color:var(--mint)}
.util-hint{opacity:.55;font-size:.78rem}
.strength-bar{height:6px;background:rgba(255,255,255,.08);border-radius:99px;margin-top:8px;overflow:hidden}
.strength-bar span{display:block;height:100%;width:40%;background:var(--mint);transition:width .2s}
.converter-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.converter-grid label{display:flex;flex-direction:column;gap:4px;font-size:.82rem;opacity:.9}
.converter-grid select,.converter-grid input,.util-app select,.util-app input[type="number"],.util-app input[type="url"],.util-app input[type="text"],.bookmark-form input,.snippet-form input,.snippet-form textarea,.json-lab textarea,.base64-lab textarea,.md-split textarea{
  padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:rgba(0,0,0,.28);color:var(--text);font:inherit
}
.converter-grid output{font-size:1.15rem;font-weight:700;color:var(--mint);padding:6px 0}
.color-lab input[type="color"]{width:100%;height:48px;border:none;background:transparent;cursor:pointer}
.color-swatch{height:72px;border-radius:10px;border:1px solid var(--line);margin:8px 0 12px}
.json-lab textarea,.base64-lab textarea{width:100%;min-height:140px;resize:vertical;font-family:ui-monospace,Consolas,monospace;font-size:.88rem}
.base64-lab textarea[readonly]{min-height:100px;opacity:.9}
.util-status{display:block;margin-top:8px;font-size:.85rem;opacity:.75}
.bookmark-form,.snippet-form{display:grid;gap:8px;margin-bottom:14px}
.bookmark-form{grid-template-columns:1fr 1.4fr auto}
.bookmark-item,.snippet-item{
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;
  padding:10px;margin-bottom:8px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.2)
}
.bookmark-item a{color:inherit;text-decoration:none}
.bookmark-item small,.snippet-item pre{display:block;opacity:.65;font-size:.78rem;white-space:pre-wrap;margin-top:4px}
.snippet-item pre{font-family:ui-monospace,Consolas,monospace;max-height:4.5em;overflow:hidden}
.snippet-item div{display:flex;gap:6px}
.lap-list{margin-top:12px;padding-left:1.2rem;font-family:ui-monospace,Consolas,monospace;font-size:.88rem;opacity:.85}
.md-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:280px}
.md-split textarea{min-height:280px;resize:vertical;font-family:ui-monospace,Consolas,monospace;font-size:.9rem}
.md-preview{padding:12px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.22);overflow:auto;line-height:1.5}
.md-preview h1,.md-preview h2,.md-preview h3{margin:.4em 0;color:var(--mint)}
.md-preview code{background:rgba(0,0,0,.35);padding:1px 5px;border-radius:4px}

/* —— Net Phantom —— */
.hacker-sim{font-family:ui-monospace,"Cascadia Code",Consolas,monospace}
.hack-head h1{display:flex;align-items:center;gap:10px}
.hack-badge{
  font-size:.65rem;letter-spacing:.12em;padding:3px 8px;border-radius:99px;
  background:rgba(57,255,20,.15);border:1px solid rgba(57,255,20,.4);color:#7dff7a
}
.hack-layout{display:grid;grid-template-columns:160px 1fr 120px;gap:10px;min-height:340px}
.hack-targets{display:flex;flex-direction:column;gap:6px;overflow:auto;max-height:360px}
.hack-node{
  text-align:left;padding:8px;border-radius:6px;border:1px solid var(--line);
  background:rgba(0,20,10,.4);color:var(--text);cursor:pointer;font:inherit
}
.hack-node b{display:block;font-size:.78rem;color:#7dff9a}
.hack-node small{opacity:.65;font-size:.68rem}
.hack-node.live{border-color:#39ff14;box-shadow:0 0 12px rgba(57,255,20,.25)}
.hack-node.pwned{border-color:#e3c14e;opacity:.85}
.hack-node.seen{border-color:rgba(110,182,255,.5)}
.hack-console{
  display:flex;flex-direction:column;border:1px solid rgba(57,255,20,.25);
  border-radius:8px;background:#020a06;min-height:320px;overflow:hidden
}
.hack-log{
  flex:1;margin:0;padding:12px;overflow:auto;font-size:.8rem;line-height:1.45;
  color:#7dff9a;white-space:pre-wrap;max-height:280px
}
.hack-form{display:flex;gap:8px;align-items:center;padding:8px 10px;border-top:1px solid rgba(57,255,20,.2);background:#03140c}
.hack-form label{color:#39ff14;font-size:.8rem}
.hack-form input{flex:1;background:transparent;border:none;color:#c8ffd4;font:inherit;outline:none}
.hack-status{display:flex;flex-direction:column;gap:10px;font-size:.75rem}
.hack-status div b{display:block;font-size:1.15rem;color:#39ff14}
.hack-status small{opacity:.6}
.hack-progress{height:6px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.hack-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#39ff14,#e3c14e,#ff3a10);transition:width .2s}

.games-hub .launch-list{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

@media(max-width:900px){
  .hack-layout{grid-template-columns:1fr}
  .md-split{grid-template-columns:1fr}
  .bookmark-form{grid-template-columns:1fr}
  .theme-grid{grid-template-columns:repeat(2,1fr)!important}
  .converter-grid{grid-template-columns:1fr}
}