/* The OS shell. Colors and sizes from the approved design. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Hanken Grotesk",system-ui,sans-serif;color:#0E1726;background:#F6F7F9}
h1,h2,h3,p{margin:0}
a{color:#2448C8}a:hover{color:#1A3596}
button,input{font:inherit;color:inherit}
.loading{padding:40px;color:#5B6474}
.muted{color:#5B6474}
.mono{font-family:"IBM Plex Mono",monospace}

/* Sign in */
.signin{min-height:100vh;display:grid;place-items:center;background:#0E1726;padding:24px}
.signin-inner{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:28px}
.signin-card{width:100%;background:#FFFFFF;border-radius:18px;padding:40px 36px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.signin-card h1{font-size:24px;font-weight:700;letter-spacing:-.01em}
.signin-sub{font-size:14.5px;color:#5B6474;margin-top:6px}
.google{width:100%;height:48px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #DCE0E6;border-radius:10px;background:#FFFFFF;font-weight:600;font-size:15px;cursor:pointer}
.google:hover{background:#F6F7F9}
.signin-note{font-size:13px;color:#5B6474}
.signin-error{font-size:13.5px;color:#B3261E}
.built{font-size:12px;color:#6E7B92}

.logo{width:34px;height:34px;border-radius:9px;background:#2448C8;display:grid;place-items:center;font-weight:700;color:#FFFFFF;flex:none}
.logo.big{width:52px;height:52px;border-radius:13px;font-size:22px}

/* Layout: sidebar + page */
.os{min-height:100vh;display:flex;background:#F6F7F9}
.side{flex:0 0 240px;background:#0E1726;color:#E6EAF2;padding:24px 16px;display:flex;flex-direction:column;gap:28px}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px;position:relative}
.me-btn,.me-menu{display:none}
.brand-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand-name{font-weight:700;font-size:15px}
.brand-sub{font-size:12px;color:#9AA5B8}
.links{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:500}
.links a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:8px;color:#C9D1DE;text-decoration:none;white-space:nowrap}
.links a:hover{color:#FFFFFF}
.links a[aria-current=page]{background:#1C2840;color:#FFFFFF}
.links .rule{height:1px;background:#22304A;margin:10px 4px}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.me{display:flex;align-items:center;gap:10px;padding:12px 8px;border-top:1px solid #22304A}
.avatar{width:30px;height:30px;border-radius:50%;background:#34446A;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none;color:#FFFFFF}
.me-text{display:flex;flex-direction:column;font-size:13px;min-width:0}
.me-email{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signout{border:0;background:none;padding:0;color:#9AA5B8;text-align:left;cursor:pointer;font-size:13px}
.signout:hover{color:#FFFFFF}
.side .built{padding:0 8px;font-size:11.5px}

.page{flex:1 1 auto;min-width:0;padding:32px 40px;display:flex;flex-direction:column;gap:24px}
.head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}
.head-text{display:flex;flex-direction:column;gap:6px}
.head h1{font-size:32px;font-weight:700;letter-spacing:-.02em}
.head p{font-size:15px;color:#5B6474}
.head-actions{display:flex;gap:10px;flex-wrap:wrap}
.search{height:44px;width:220px;max-width:100%;border:1px solid #DCE0E6;border-radius:10px;padding:0 14px;font-size:14px;background:#FFFFFF}
.primary{height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 18px;border-radius:10px;border:0;background:#2448C8;color:#FFFFFF;font-weight:600;font-size:14px;cursor:pointer}
.primary:disabled{background:#8C9FDF;cursor:default}
.soon{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.22);text-transform:uppercase;letter-spacing:.04em}
.note{background:#FFFFFF;border:1px solid #E3E6EB;border-radius:12px;padding:12px 16px;font-size:14px;color:#3C4555}
.small{font-size:12.5px;color:#5B6474}
.sr{position:absolute;left:-9999px}

/* Waiting for your OK */
.waiting{background:#FFF7EA;border:1px solid #F1D7A8;border-radius:14px;padding:16px 20px;display:flex;flex-direction:column;gap:12px}

/* Pills */
.pills{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:600}
.pill{padding:7px 12px;border-radius:999px;background:#FFFFFF;border:1px solid #DCE0E6;color:#3C4555;cursor:pointer}
.pill[aria-pressed=true]{background:#0E1726;border-color:#0E1726;color:#FFFFFF}

/* App cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:14px;background:#FFFFFF;border:1px solid #E3E6EB;border-radius:14px;padding:18px;color:#0E1726;text-decoration:none}
a.card:hover{color:#0E1726;border-color:#C3C9D3;box-shadow:0 4px 14px rgba(14,23,38,.06)}
.card-top{display:flex;align-items:center;justify-content:space-between}
.tile{width:42px;height:42px;border-radius:11px;display:grid;place-items:center}
.card-text{display:flex;flex-direction:column;gap:4px}
.card-title{font-weight:700;font-size:17px}
.card-desc{font-size:14px;color:#5B6474}
.chips{display:flex;gap:6px;flex-wrap:wrap;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:#3C4555}
.chip{padding:3px 8px;border-radius:6px;background:#EEF0F4}
.chip.write{background:#FDF0DC;color:#8A4B00}
.status{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:#E3F4EA;color:#126B42}
.status.draft{background:#EEF0F4;color:#3C4555}
.empty{background:#FFFFFF;border:1px dashed #C3C9D3;border-radius:14px;padding:32px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:#5B6474}
.empty-icon{width:44px;height:44px;border-radius:11px;background:#EEF0F4;color:#3C4555;display:grid;place-items:center}
.empty b{color:#0E1726;font-size:16px}

/* Tones for app icons */
.tone-blue{background:#E8EDFC;color:#2448C8}
.tone-green{background:#E3F4EA;color:#126B42}
.tone-slate{background:#E9ECF2;color:#3C4A66}
.tone-violet{background:#F0EAFB;color:#6B3FC4}
.tone-teal{background:#DFF2F5;color:#16697A}
.tone-orange{background:#FCEBDD;color:#B4561B}
.tone-amber{background:#FDF0DC;color:#8A4B00}

/* Panels, tables, lists */
.panel{background:#FFFFFF;border:1px solid #E3E6EB;border-radius:14px;overflow:hidden}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-size:12px;color:#5B6474;text-transform:uppercase;letter-spacing:.04em;padding:12px 16px;font-weight:600}
.table td{padding:14px 16px;border-top:1px solid #EEF0F4;vertical-align:middle}
.person{display:flex;align-items:center;gap:12px;min-width:0}
.person .avatar{width:34px;height:34px;font-size:12.5px;font-weight:700;background:#2448C8}
.person-text{display:flex;flex-direction:column;min-width:0}
.person-text span{overflow-wrap:anywhere}
.ok{color:#126B42}
.wait{color:#8A4B00}
.boxes{display:flex;flex-wrap:wrap;gap:16px}
.box{flex:1 1 260px;background:#FFFFFF;border:1px solid #E3E6EB;border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.box b{font-size:15px}
.box span{font-size:13.5px;color:#5B6474}
.counts .box{flex:1 1 150px}
.box .count{font-size:28px;font-weight:700;color:#0E1726;font-variant-numeric:tabular-nums}
.tier{display:flex;flex-direction:column;gap:12px}
.tier h2{font-size:19px;font-weight:700}
.log{list-style:none;margin:0;padding:0}
.log li{display:grid;grid-template-columns:150px minmax(0,1fr) 200px 150px;gap:4px 16px;padding:14px 16px;border-top:1px solid #EEF0F4;font-size:14px;align-items:baseline}
.log li:first-child{border-top:0}
.log .log-head{font-size:12px;color:#5B6474;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.log .what{font-weight:600;overflow-wrap:anywhere}
.log .who{overflow-wrap:anywhere}

/* Using an app */
.appview{height:100vh;height:100dvh;display:flex;flex-direction:column;background:#F6F7F9}
.apphead{background:#0E1726;color:#E6EAF2;padding:12px 24px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.back{display:flex;align-items:center;gap:10px;color:#E6EAF2;text-decoration:none;font-weight:600;font-size:14px}
.back:hover{color:#FFFFFF}
.bar{width:1px;height:20px;background:#2C3A55}
.app-name{font-weight:700;font-size:16px}
.live{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:#173A2A;color:#8FE0B5}
.can{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:#9AA5B8;min-width:0;max-width:100%;white-space:nowrap}
.can svg{flex:none}
.can span{overflow:hidden;text-overflow:ellipsis}
.app-actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.ghost,.change{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:9px;font-weight:600;font-size:13.5px}
.ghost{border:1px solid #3A4A68;background:none;color:#E6EAF2}
.change{border:0;background:#2448C8;color:#FFFFFF}
.ghost:disabled,.change:disabled{opacity:.6;cursor:default}
.stage{flex:1;display:flex;min-height:0}
.stage iframe{flex:1;border:0;width:100%;background:#F6F7F9}
.closed{margin:24px;padding:16px 20px;border-radius:12px;background:#FCE8E6;color:#B3261E;font-weight:600}

/* Phones and narrow windows */
@media (max-width:760px){
  .os{flex-direction:column}
  .side{flex:none;padding:10px 12px 8px;gap:8px}
  .brand{padding:0 4px}
  .logo{width:30px;height:30px;border-radius:8px}
  .links{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:2px;scrollbar-width:none;margin:0 -12px;padding:0 8px}
  .links::-webkit-scrollbar{display:none}
  .links a{padding:7px 10px;flex:none}
  .links .rule{display:none}
  .side-foot{display:none}
  .me-btn{display:block;margin-left:auto;border:0;background:none;padding:0;cursor:pointer}
  .me-menu:not([hidden]){display:flex;flex-direction:column;gap:8px;position:absolute;right:0;top:40px;z-index:5;background:#16213A;border:1px solid #22304A;border-radius:10px;padding:12px 14px;font-size:13px;max-width:80vw}
  .me-menu .me-email{white-space:normal;overflow-wrap:anywhere}
  .page{padding:20px 16px}
  .head h1{font-size:26px}
  .search{width:100%}
  .head-actions{width:100%}
  .log li{grid-template-columns:minmax(0,1fr);padding:12px 14px}
  .log .log-head{display:none}
  .apphead{padding:12px 16px}
  .app-actions{display:none}
  .table th,.table td{padding:12px}
}