@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root { --ink:#111211; --paper:#efeee8; --acid:#d8ff3e; --blue:#3857ff; --line:rgba(17,18,17,.18); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--ink); }
body { min-height:100vh; margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans SC",system-ui,sans-serif; }
button,input { font:inherit; }
.control-shell { min-height:100vh; display:flex; flex-direction:column; }
.control-header { min-height:74px; padding:0 clamp(22px,4vw,64px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font:600 11px/1 "IBM Plex Mono",monospace; letter-spacing:.1em; }
.control-mark { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.control-mark span { width:11px; height:11px; border-radius:50%; background:var(--blue); box-shadow:9px 0 0 var(--acid); }
.control-header p { display:flex; align-items:center; gap:8px; margin:0; }
.control-header i { width:7px; height:7px; border-radius:50%; background:#ef4b3e; box-shadow:0 0 0 5px rgba(239,75,62,.1); }
.login-view { width:100%; flex:1; padding:clamp(54px,8vw,120px) clamp(22px,4vw,64px); display:grid; grid-template-columns:1.35fr minmax(300px,480px); align-items:center; gap:clamp(48px,9vw,150px); }
.index { margin:0 0 22px; color:var(--blue); font:600 11px/1.4 "IBM Plex Mono",monospace; letter-spacing:.13em; }
.login-copy h1,.dashboard-head h1 { margin:0; font:400 clamp(62px,10vw,148px)/.83 "Archivo Black","Noto Sans SC",sans-serif; letter-spacing:-.075em; }
.login-copy h1 span { color:transparent; -webkit-text-stroke:1.5px var(--ink); }
.login-copy > p:last-child { max-width:38ch; margin:38px 0 0; font-size:clamp(14px,1.4vw,18px); line-height:1.8; }
.login-card { padding:clamp(25px,4vw,44px); border:1px solid var(--ink); background:#fff; box-shadow:14px 14px 0 var(--acid); }
.login-card label { display:block; margin-bottom:12px; font:600 11px/1 "IBM Plex Mono",monospace; letter-spacing:.12em; }
.login-card input { width:100%; height:56px; padding:0 15px; border:1px solid var(--line); border-radius:0; outline:0; background:#f7f7f4; }
.login-card input:focus { border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.login-card button { width:100%; min-height:56px; margin-top:12px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--ink); color:white; background:var(--ink); font-weight:800; cursor:pointer; }
.login-card button:hover { color:var(--ink); background:var(--acid); }
.login-card button:disabled { opacity:.55; cursor:wait; }
.login-card .local-preview { justify-content:center; color:var(--ink); background:transparent; }
.login-status { min-height:22px; margin:14px 0 0; color:#b5352a; font-size:12px; line-height:1.6; }
.dashboard { flex:1; padding:clamp(48px,7vw,96px) clamp(22px,4vw,64px) 28px; }
.dashboard-head { display:flex; align-items:end; justify-content:space-between; gap:30px; }
.dashboard-head h1 { font-size:clamp(58px,9vw,126px); }
.logout { padding:11px 16px; border:1px solid var(--ink); background:transparent; cursor:pointer; font:600 11px/1 "IBM Plex Mono",monospace; }
.logout:hover { color:white; background:var(--ink); }
.space-list { margin-top:clamp(55px,8vw,100px); border-top:1px solid var(--ink); }
.space-row { min-height:116px; padding:20px 4px; display:grid; grid-template-columns:54px 1.4fr 1fr auto; align-items:center; gap:24px; border-bottom:1px solid var(--line); }
.space-row .number,.space-row p,.space-row a { font:500 11px/1.5 "IBM Plex Mono",monospace; }
.space-row h2 { margin:0; font-size:clamp(23px,3vw,42px); letter-spacing:-.04em; }
.space-row p { margin:0; opacity:.6; }
.space-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.space-actions a { padding:10px 13px; border:1px solid var(--ink); color:inherit; text-decoration:none; }
.space-actions a.primary { color:white; background:var(--ink); }
.space-actions a:hover { color:var(--ink); background:var(--acid); }
.dashboard-footer { padding-top:24px; display:flex; justify-content:space-between; gap:20px; font:500 10px/1.4 "IBM Plex Mono",monospace; letter-spacing:.08em; opacity:.58; }
.icp-record { position:fixed; z-index:5; right:max(18px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); color:inherit; font:500 10px/1.4 "IBM Plex Mono",monospace; letter-spacing:.04em; opacity:.5; text-decoration:none; }
.icp-record:hover,.icp-record:focus-visible { opacity:1; text-decoration:underline; }
[hidden] { display:none !important; }
@media (max-width:800px) {
  .login-view { grid-template-columns:1fr; align-content:center; }
  .login-copy h1 { font-size:clamp(62px,18vw,104px); }
  .space-row { grid-template-columns:38px 1fr; }
  .space-row p,.space-actions { grid-column:2; justify-content:flex-start; }
}
@media (max-width:480px) {
  .control-header { min-height:64px; }
  .control-header p { font-size:9px; }
  .login-card { box-shadow:8px 8px 0 var(--acid); }
  .dashboard-head { align-items:start; flex-direction:column; }
  .space-row { padding:23px 0; }
}