/* nArtifacts back office. Tokens and sizes come from play/design/canvas/Office-*.dc.html */
@font-face{font-family:Figtree;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Gloock;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/gloock-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/courier-prime-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/courier-prime-latin-700-normal.woff2) format("woff2")}

:root{
  --bg:#f0e8d6;--ink:#1d1712;--muted:#5f5448;--line:#cfc3aa;--field:#f8f2e4;--panel:#e8dec7;
  --accent:#d93a1c;--onaccent:#fff7ec;--danger:#b3261e;--ok:#2f6b3a;--overlay:rgba(29,23,18,.45);--shadow:#1d1712;
  --sans:Figtree,'Helvetica Neue',Arial,sans-serif;--serif:Gloock,'Iowan Old Style',Georgia,serif;--mono:'Courier Prime','Courier New',ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#17120e;--ink:#f1e8d6;--muted:#b3a690;--line:#3a3025;--field:#1d1712;--panel:#211a14;
    --accent:#ff5a38;--onaccent:#1d0f08;--danger:#ff8a80;--ok:#8fd19e;--overlay:rgba(0,0,0,.6);--shadow:#000;color-scheme:dark}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5}
a{color:inherit}
h1,h2,p{margin:0}
h1{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.01em;font-size:32px}
h2{font-family:var(--serif);font-weight:400;font-size:24px}
code{font-family:var(--mono);font-size:.94em;background:var(--panel);padding:1px 5px;border-radius:5px}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.small{font-size:14px;color:var(--muted)}
.logo{font-family:var(--serif);font-size:24px;color:var(--ink);text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font:600 16px var(--sans);white-space:nowrap;width:100%;background:transparent;color:var(--ink);border:1.5px solid var(--ink);text-decoration:none;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--onaccent);border-color:var(--accent);box-shadow:0 3px 0 var(--ink)}
.btn.danger{background:var(--danger);color:var(--bg);border-color:var(--danger)}
.btn[disabled],.btn.disabled{opacity:.4;box-shadow:none;pointer-events:none}
.ulink{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.ulink.accent{color:var(--accent);font-weight:600;text-decoration:none}
form{margin:0}
.inline{display:inline}

/* fields */
.field{display:flex;flex-direction:column;gap:6px}
.field>.lbl,.lbl{font-weight:600;font-size:15px}
.input{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--field);color:var(--ink);font:400 16px/24px var(--sans);appearance:none}
.input.mono{font:400 15px/24px var(--mono)}
textarea.input{resize:vertical;display:block}
.input::placeholder{color:var(--muted);opacity:.8}
.input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.input.bad{border-color:var(--danger)}
.hint{color:var(--muted);font-size:14px}
.hint.bad,.err{color:var(--danger);font-size:14px}
.selectwrap{position:relative}
.selectwrap::after{content:"▾";position:absolute;right:14px;top:12px;pointer-events:none;color:var(--ink)}
.selectwrap select{padding-right:36px}
.group{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.opt input{position:absolute;opacity:0;width:22px;height:22px;margin:0}
.opt .box{flex:none;width:22px;height:22px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;background:var(--field);margin-top:1px;border-radius:5px}
.opt.radio .box{border-radius:50%}
.opt .txt{display:flex;flex-direction:column;gap:2px}
.opt .txt span:first-child{font-size:16px}
.opt .txt .hint{font-size:14px}
.opt input:checked+.box{background:var(--ink)}
.opt.radio input:checked+.box::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--bg)}
.opt.check input:checked+.box::after{content:"✓";color:var(--bg);font-size:14px;font-weight:700;line-height:1}
.opt input:focus-visible+.box{outline:2px solid var(--accent);outline-offset:2px}
.choose{display:none;flex-direction:column;gap:10px;padding-left:34px}
.group:has(input[value=some]:checked) .choose{display:flex}

/* switch */
.switch{position:relative;display:inline-block;flex:none;width:51px;height:31px}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch .track{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .15s}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s}
.switch input:checked+.track{background:var(--ok)}
.switch input:checked+.track::after{left:22px}
.switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:2px}

/* shell */
.app{display:block}
.side{display:none}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1.5px solid var(--line)}
.top .logo{font-size:22px}
.top .right{display:flex;align-items:center;gap:12px}
.pill{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--ink);color:var(--bg);text-decoration:none}
.burger{width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;text-decoration:none}
.burger i{width:20px;border-top:2px solid var(--ink)}
main.page{padding:24px 20px;display:flex;flex-direction:column;gap:20px}
.head{display:flex;flex-direction:column;gap:16px}
.head h1{font-size:32px}
.nav-label{display:block;font-family:var(--mono);font-size:13px;color:var(--muted)}
.seg{display:flex;border:1.5px solid var(--ink);border-radius:999px;padding:3px;font-size:14px;font-weight:600}
.seg a,.seg span{flex:1;text-align:center;padding:5px 0;border-radius:999px;color:var(--muted);text-decoration:none}
.seg .on{background:var(--ink);color:var(--bg)}

/* phone menu */
.menu .top .x{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:26px;text-decoration:none}
.menu main{padding:20px;display:flex;flex-direction:column;gap:22px}
.menu .seg{font-size:15px}
.menu .seg a,.menu .seg span{padding:7px 0}
.menu .sec{display:flex;flex-direction:column}
.menu .sec .nav-label{padding-bottom:2px}
.menu .row{display:flex;justify-content:space-between;align-items:center;height:44px;border-bottom:1px solid var(--line);font-size:17px;text-decoration:none}
.menu .row b{font-weight:400;color:var(--muted)}
.menu .foot{display:flex;justify-content:space-between;font-size:15px}

/* lists */
.table{display:none}
.cards{display:flex;flex-direction:column;gap:12px}
.card{border:1.5px solid var(--line);border-radius:12px;background:var(--field);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.card .ct{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card .ct strong{font-size:17px;overflow-wrap:anywhere}
.card .ct .acts{font-size:14px;display:flex;gap:12px}
.card .kv{display:flex;flex-direction:column;font-size:14px}
.card .kv>span:first-child{color:var(--muted)}
.card .kv .mono.sm{font-size:13px;overflow-wrap:anywhere}
.empty{border:1.5px dashed var(--line);border-radius:14px;padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.empty strong{font-family:var(--serif);font-weight:400;font-size:26px}
.empty .btn{width:auto}
.alert{border:1.5px solid var(--danger);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:12px}
.alert strong{font-size:18px}
.alert .btn{width:auto}
.skel{display:flex;flex-direction:column;gap:12px}
.skel div{display:flex;gap:24px;padding:18px 0;border-top:1px solid var(--line)}
.skel span{display:block;height:14px;border-radius:7px;background:var(--panel);width:18%}
.skel span:nth-child(2){width:14%}.skel span:nth-child(3){width:26%}.skel span:nth-child(4){width:12%}

/* forms inside main (env page) */
.envname{font-family:var(--mono);font-size:30px;line-height:1.1;overflow-wrap:anywhere}
.cols{display:flex;flex-direction:column;gap:28px}
.col{display:flex;flex-direction:column;gap:20px}
.sec{display:flex;flex-direction:column;gap:18px}
.two{display:grid;grid-template-columns:1fr 120px;gap:12px}
.games{display:flex;flex-direction:column}
.game{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.game strong{flex:1;font-size:16px}
.game .sw{display:flex;align-items:center;gap:8px;font-size:14px}
.game .sw.mut{color:var(--muted)}
.danger-zone{display:flex;flex-direction:column;gap:10px;border-top:1.5px solid var(--line);padding-top:18px}
.danger-zone .btn{width:100%}

/* our keys */
.pre{margin:0;padding:14px;border:1.5px solid var(--line);border-radius:10px;background:var(--field);font:400 12px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.pre.strong{border-color:var(--ink)}
.kvgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}
.kvgrid div{display:flex;flex-direction:column;font-size:15px;min-width:0}
.kvgrid div>span:first-child{color:var(--muted);font-size:13px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap}
.btnrow .btn{width:auto}
.ips{display:flex;flex-direction:column}
.ips span{font:400 16px var(--mono);padding:8px 0;border-top:1px solid var(--line)}
.ex{display:flex;flex-direction:column;gap:24px;border-top:1.5px solid var(--line);padding-top:16px}
.ex>.sec{gap:12px}
.three{display:grid;grid-template-columns:1fr;gap:24px}

/* auth pages */
.auth{padding:24px 20px;display:flex;flex-direction:column;gap:40px}
.auth .col{gap:24px}
.auth h1{font-size:34px}
.auth .stack{display:flex;flex-direction:column;gap:12px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.ms{display:grid;grid-template-columns:7px 7px;gap:2px}
.ms i{height:7px}
.digits{display:flex;gap:8px}
.digits input{flex:1;min-width:0;height:60px;border:1.5px solid var(--line);border-radius:10px;background:var(--field);color:var(--ink);text-align:center;font:700 26px var(--mono)}
.digits.bad input{border-color:var(--danger)}
.digits input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.split{display:flex;justify-content:space-between;font-size:15px}

/* dialogs. Desktop: over the page. Phone: forms are the page; confirms are a small box. */
.overlay{position:fixed;inset:0;background:var(--overlay)}
.dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;background:var(--bg);border:1.5px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--shadow);padding:32px;display:flex;flex-direction:column;gap:22px}
.dialog h1{font-size:30px}
.dialog .actions{display:flex;justify-content:flex-end;gap:12px;margin-top:4px}
.dialog .actions .btn{width:auto}
.dialog .pre{font-size:13px}
.dialog .phonehead{display:none}
.hidden{display:none!important}
@media (max-width:859px){
  .dialog.form,.dialog.created{position:static;transform:none;width:auto;max-height:none;border:0;border-radius:0;box-shadow:none;padding:24px 20px;gap:22px;overflow:visible}
  .dialog.form h1,.dialog.created h1{font-size:28px}
  .dialog.form .phonehead{display:flex;align-items:center;margin:-24px -20px 0;padding:14px 20px;border-bottom:1.5px solid var(--line);font-weight:600}
  .dialog.form .phonehead a{color:var(--accent);text-decoration:none}
  .dialog.form .actions,.dialog.created .actions{flex-direction:column;margin-top:4px}
  .dialog.form .actions .btn,.dialog.created .actions .btn{width:100%}
  .dialog.form .actions .cancel{display:none}
  .dialog.created .btnrow .btn{width:100%}
  .dialog.created .pre{font-size:12px}
  body.pagedialog .behind,body.pagedialog .overlay.pg{display:none}
  .dialog.confirm{width:310px;padding:24px 20px 20px;gap:14px;box-shadow:none}
  .dialog.confirm h1{font-size:24px}
  .dialog.confirm .actions{flex-direction:column-reverse;gap:10px;margin-top:6px}
  .dialog.confirm .actions .btn{width:100%}
}

/* desktop */
@media (min-width:860px){
  h1{font-size:40px}
  .app{display:flex;min-height:100vh}
  .side{display:flex;width:248px;flex:none;border-right:1.5px solid var(--line);padding:24px 16px;flex-direction:column;gap:24px;position:sticky;top:0;height:100vh;overflow:auto}
  .side .brand{padding:0 12px}
  .side .brand .sub{color:var(--muted);font-size:14px;margin-top:2px}
  .side nav{display:flex;flex-direction:column;gap:2px}
  .side nav .nav-label{padding:12px 12px 4px}
  .side nav .nav-label:first-child{padding-top:0}
  .side nav a{display:block;padding:9px 12px;border-radius:8px;font-weight:400;text-decoration:none}
  .side nav a.on{background:var(--panel);font-weight:600}
  .side .me{margin-top:auto;padding:0 12px;display:flex;flex-direction:column;gap:4px;font-size:14px}
  .top{display:none}
  main.page{flex:1;min-width:0;padding:40px 48px;gap:24px}
  .head{flex-direction:row;justify-content:space-between;align-items:center}
  .head h1{font-size:40px}
  .head .btn,.head .btnrow .btn{width:auto}
  .table{display:table;width:100%;border-collapse:collapse;font-size:15px}
  .table th{text-align:left;padding:0 16px 10px 0;font:400 14px var(--mono);color:var(--muted)}
  .table td{padding:14px 16px 14px 0;border-top:1px solid var(--line);vertical-align:top}
  .table td .mono{font-size:15px}
  .cards{display:none}
  .empty{padding:56px 40px}
  .envname{font-size:38px}
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .col.wide{gap:28px}
  .btn.row,.danger-zone .btn{width:auto}
  .three{grid-template-columns:1fr 1fr 1fr}
  .grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start}
  .pre{font-size:13px}
  .auth{padding:0;gap:0}
  .auth .bar{padding:28px 40px}
  .auth .center{display:flex;justify-content:center;padding-top:72px}
  .auth .col{width:400px}
  .auth h1{font-size:40px}
  .dialog .phonehead{display:none!important}
}
@media (max-width:859px){
  .auth .bar{display:block}
  .grid2{display:flex;flex-direction:column;gap:28px}
  .head .btn{width:100%}
}

/* extra */
.ms{display:inline-grid;grid-template-columns:8px 8px;gap:2px}
.ms i{display:block;width:8px;height:8px}
.ms i:nth-child(1){background:#f25022}.ms i:nth-child(2){background:#7fba00}.ms i:nth-child(3){background:#00a4ef}.ms i:nth-child(4){background:#ffb900}
.gl{font:700 18px var(--sans);color:#4285f4}
.dialog form{display:flex;flex-direction:column;gap:22px}
.wide-field{max-width:100%}
.pw{display:flex;flex-direction:column;gap:6px}
.sub{color:var(--muted)}
.ok{color:var(--ok)}
.sp{height:0}
.keyid{font-family:var(--mono);font-size:15px}
.nolink{color:var(--muted)}
.errbox{border:1.5px solid var(--danger);border-radius:10px;padding:12px 14px;color:var(--danger);font-size:14px}
.seg .nolink{cursor:default}
.logout{display:inline}
.topwrap{flex:1;min-width:0}
.input.tall{min-height:96px;font-family:var(--sans)}
.side .me{color:var(--muted)}.side .me .ulink{color:var(--ink)}.table td{padding-top:16px;padding-bottom:16px}