/* Cloud Knowledge Base — ported from "Cloud Knowledge Base.dc.html" (Claude Design). */
:root{
  --ckb-bg:#f5f4f0;--ckb-fg:#17181a;--ckb-fg2:#4b4d52;--ckb-muted:#6b6d72;--ckb-faint:#9a9ca2;
  --ckb-line:#e4e2dc;--ckb-line2:#d9d7d0;--ckb-line3:#cfcdc6;--ckb-hover:#ecebe6;--ckb-hover-dark:#2c2e32;
  --ckb-tab:#f0efea;--ckb-field:#fbfbf9;--ckb-accent:oklch(0.72 0.12 210);--ckb-accent-fg:#0f2a33;
  --ckb-link:#1f6f8b;--ckb-link-hover:#164f63;--ckb-danger:#b3261e;--ckb-danger-hover:#961f18;--ckb-danger-bg:#fdeceb;
  --ckb-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
html,body{margin:0;padding:0;background:var(--ckb-bg);color:var(--ckb-fg);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--ckb-link);text-decoration:none}a:hover{color:var(--ckb-link-hover);text-decoration:underline}
input,button{font-family:inherit}button{cursor:pointer}
.is-hidden{display:none!important}
@keyframes ckb-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ckb-toast{0%{opacity:0;transform:translate(-50%,12px)}12%{opacity:1;transform:translate(-50%,0)}88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,8px)}}

/* shell + header */
.ckb-shell{min-height:100vh;display:flex;flex-direction:column;background:var(--ckb-bg)}
.ckb-home{background:radial-gradient(900px 500px at 80% -10%,oklch(0.93 0.03 210) 0%,transparent 60%),var(--ckb-bg)}
.ckb-header{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,5vw,56px)}
.ckb-header-sticky{padding:16px clamp(16px,5vw,56px);border-bottom:1px solid var(--ckb-line);background:rgba(245,244,240,.9);position:sticky;top:0;backdrop-filter:blur(8px);z-index:5;flex-wrap:wrap;row-gap:10px}
.ckb-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ckb-fg)}
.ckb-brand-link{color:var(--ckb-fg)}.ckb-brand-link:hover{color:var(--ckb-fg);text-decoration:none}
.ckb-logo{width:28px;height:28px;border-radius:8px;background:var(--ckb-fg);display:grid;place-items:center}
.ckb-logo-dot{width:10px;height:10px;border-radius:3px;background:var(--ckb-accent)}
.ckb-brand-name{font-weight:700;font-size:15px;letter-spacing:-.01em}
.ckb-actions{display:flex;gap:8px}

/* buttons */
.ckb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:10px;border:1px solid transparent;font-weight:600;font-size:14px;line-height:1;text-decoration:none;transition:background .15s,color .15s}
.ckb-btn:hover{text-decoration:none}
.ckb-btn-primary{background:var(--ckb-fg);color:#fff;font-weight:700}.ckb-btn-primary:hover{background:var(--ckb-hover-dark);color:#fff}
.ckb-btn-ghost{background:transparent;color:var(--ckb-fg);border-color:var(--ckb-line2)}.ckb-btn-ghost:hover{background:var(--ckb-hover);color:var(--ckb-fg)}
.ckb-btn-outline{background:#fff;color:var(--ckb-fg);border-color:var(--ckb-line2)}.ckb-btn-outline:hover{background:var(--ckb-hover);color:var(--ckb-fg)}
.ckb-btn-danger{background:var(--ckb-danger);color:#fff;font-weight:700}.ckb-btn-danger:hover{background:var(--ckb-danger-hover);color:#fff}
.ckb-btn-lg{height:48px;padding:0 22px;border-radius:12px;font-size:15px}
.ckb-btn-sm{height:34px;padding:0 12px;border-radius:9px;font-size:13px}
.ckb-btn-block{width:100%;height:46px;border-radius:12px;font-size:15px;margin-top:22px}

/* home */
.ckb-hero{flex:1;display:flex;align-items:center;padding:clamp(40px,8vh,96px) clamp(20px,5vw,56px)}
.ckb-hero-inner{max-width:720px;animation:ckb-up .5s ease both}
.ckb-eyebrow{font-family:var(--ckb-mono);font-size:12px;color:var(--ckb-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px}
.ckb-h1{margin:0 0 20px;font-size:clamp(40px,7vw,80px);line-height:.98;letter-spacing:-.035em;font-weight:800;text-wrap:pretty}
.ckb-lede{margin:0 0 36px;font-size:clamp(16px,1.6vw,19px);line-height:1.5;color:var(--ckb-fg2);max-width:520px;text-wrap:pretty}
.ckb-cta-row{display:flex;gap:10px;flex-wrap:wrap}

/* auth */
.ckb-auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 20px 64px}
.ckb-card{background:#fff;border:1px solid var(--ckb-line);border-radius:20px}
.ckb-auth{width:100%;max-width:400px;margin:0;padding:28px;box-shadow:0 20px 50px -30px rgba(23,24,26,.25);animation:ckb-up .4s ease both}
.ckb-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--ckb-tab);border-radius:10px;padding:4px;margin-bottom:26px}
.ckb-tab{height:34px;border:none;border-radius:8px;font-weight:600;font-size:14px;background:transparent;color:var(--ckb-muted);box-shadow:none}
.ckb-tab.is-active{background:#fff;color:var(--ckb-fg);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ckb-auth-title{margin:0 0 6px;font-size:24px;letter-spacing:-.02em;font-weight:800}
.ckb-auth-sub{margin:0 0 22px;color:var(--ckb-muted);font-size:14px}
.ckb-label{display:block;font-size:13px;font-weight:600;color:var(--ckb-fg2);margin-bottom:6px}
.ckb-input{width:100%;height:44px;border:1px solid var(--ckb-line2);border-radius:10px;padding:0 14px;font-size:15px;outline:none;background:var(--ckb-field);margin-bottom:14px}
.ckb-input-last{margin-bottom:0}
.ckb-input:focus{border-color:var(--ckb-fg);box-shadow:0 0 0 3px rgba(23,24,26,.08)}
.ckb-error{margin-top:12px;font-size:13px;color:var(--ckb-danger);font-weight:500}
.ckb-auth-switch{margin:18px 0 0;text-align:center;font-size:13px;color:var(--ckb-muted)}.ckb-auth-switch a{font-weight:600}

/* dashboard */
.ckb-userbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.ckb-userbar form{margin:0}
@media (max-width:640px){.ckb-user-name{display:none}.ckb-userbar{gap:6px}.ckb-userbar .ckb-btn-sm{padding:0 9px;font-size:12px}}   /* phone: the bar wraps under the brand, initials stand in for the name */
.ckb-user{display:flex;align-items:center;gap:8px}
.ckb-avatar{width:28px;height:28px;border-radius:50%;background:var(--ckb-accent);color:var(--ckb-accent-fg);display:grid;place-items:center;font-weight:800;font-size:12px}
.ckb-user-name{font-size:14px;font-weight:600}
.ckb-userbar .ckb-btn-ghost{color:var(--ckb-fg2)}.ckb-userbar .ckb-btn-ghost:hover{color:var(--ckb-fg)}
.ckb-dash{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(16px,5vw,56px) 80px}
.ckb-dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.ckb-dash-head form{margin:0}
.ckb-dash-title{margin:0 0 6px;font-size:clamp(26px,3.5vw,36px);letter-spacing:-.03em;font-weight:800}
.ckb-meta{font-family:var(--ckb-mono);font-size:12px;color:var(--ckb-muted)}
.ckb-btn-upload{height:44px;padding:0 18px;border-radius:12px}
.ckb-plus{font-size:18px;line-height:1;margin-top:-2px}
.ckb-drop{border:1.5px dashed var(--ckb-line3);background:transparent;border-radius:16px;padding:22px;text-align:center;color:var(--ckb-muted);font-size:14px;margin-bottom:28px;cursor:pointer;transition:background .15s,border-color .15s}
.ckb-drop.is-drag{border-color:var(--ckb-fg);background:#e9eff2}
.ckb-drop-strong{font-weight:600;color:var(--ckb-fg)}
.ckb-empty{padding:64px 20px;text-align:center;color:var(--ckb-muted);font-size:15px}
.ckb-empty-icon{width:56px;height:56px;border-radius:16px;background:var(--ckb-hover);margin:0 auto 16px;display:grid;place-items:center}
.ckb-empty-icon::before{content:"";width:22px;height:28px;border:2px solid var(--ckb-faint);border-radius:4px}
.ckb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.ckb-file{position:relative;background:#fff;border:1px solid var(--ckb-line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;min-height:150px;transition:transform .15s,box-shadow .15s;animation:ckb-up .3s ease both}
.ckb-file:hover{box-shadow:0 14px 30px -18px rgba(23,24,26,.35);transform:translateY(-2px)}
.ckb-file-body{display:flex;flex-direction:column;gap:14px;flex:1;cursor:pointer;color:inherit}
.ckb-file-body:hover{color:inherit;text-decoration:none}
.ckb-file-top{display:flex;justify-content:space-between;align-items:flex-start}
.ckb-badge{height:26px;padding:0 8px;border-radius:7px;font-family:var(--ckb-mono);font-size:11px;font-weight:500;display:grid;place-items:center;letter-spacing:.04em;background:#e3f0f4;color:#1f6f8b}
.ckb-badge[data-kind=pdf]{background:#fdeceb;color:#b3261e}
.ckb-badge[data-kind=doc]{background:#e6eef9;color:#1f4e9a}
.ckb-badge[data-kind=sheet]{background:#e4f3e8;color:#1f6b3a}
.ckb-badge[data-kind=slide]{background:#fdeee2;color:#b4501a}
.ckb-badge[data-kind=image]{background:#efe8fa;color:#5b3aa6}
.ckb-badge[data-kind=plain]{background:#f0efea;color:#4b4d52}
.ckb-file-bottom{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}
.ckb-file-name{font-weight:700;font-size:14px;line-height:1.3;word-break:break-word;letter-spacing:-.01em}
.ckb-file-meta{font-family:var(--ckb-mono);font-size:11px;color:var(--ckb-muted)}
.ckb-file-x{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:8px;border:none;background:transparent;color:var(--ckb-faint);display:grid;place-items:center;font-size:16px;line-height:1}
.ckb-file-x:hover{background:var(--ckb-danger-bg);color:var(--ckb-danger)}
.ckb-confirm{position:absolute;inset:0;border-radius:16px;background:rgba(255,255,255,.96);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:16px;text-align:center;animation:ckb-up .15s ease both}
.ckb-confirm-title{font-weight:700;font-size:14px}
.ckb-confirm-actions{display:flex;gap:8px}.ckb-confirm-actions form{margin:0}
.ckb-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ckb-fg);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);animation:ckb-toast 2.4s ease both;z-index:10;white-space:nowrap}

/* search (text search over titles + extracted content) */
.ckb-search{display:flex;align-items:center;gap:8px;margin:0 0 20px;max-width:600px}
.ckb-search-field{position:relative;flex:1;display:flex;align-items:center}
.ckb-search-icon{position:absolute;left:14px;color:var(--ckb-faint);display:grid;place-items:center;pointer-events:none}
.ckb-search-input{width:100%;height:44px;border:1px solid var(--ckb-line2);border-radius:12px;padding:0 40px;font-size:15px;outline:none;background:#fff;-webkit-appearance:none;appearance:none}
.ckb-search-input::-webkit-search-cancel-button,.ckb-search-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.ckb-search-input::placeholder{color:var(--ckb-faint)}
.ckb-search-input:focus{border-color:var(--ckb-fg);box-shadow:0 0 0 3px rgba(23,24,26,.08)}
.ckb-search-clear{position:absolute;right:8px;width:28px;height:28px;border-radius:8px;border:none;background:transparent;color:var(--ckb-faint);display:grid;place-items:center;font-size:16px;line-height:1}
.ckb-search-clear:hover{background:var(--ckb-hover);color:var(--ckb-fg)}
.ckb-btn-search{height:44px;border-radius:12px;padding:0 16px}
.ckb-results{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 20px;font-size:14px;color:var(--ckb-muted)}
.ckb-results-q{color:var(--ckb-fg);font-weight:700}
.ckb-results-clear{font-weight:600}
.ckb-file-snippet{font-size:12px;line-height:1.45;color:var(--ckb-fg2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.ckb-file-snippet mark{background:#e3f0f4;color:var(--ckb-fg);font-weight:600;border-radius:3px;padding:0 2px}

/* secondary screens: file page, audit table, error page, notices */
.ckb-page{flex:1;width:100%;max-width:960px;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(16px,5vw,56px) 80px}
.ckb-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ckb-muted);margin-bottom:20px}
.ckb-back:hover{color:var(--ckb-fg);text-decoration:none}
.ckb-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ckb-page-title{margin:10px 0 6px;font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;font-weight:800;word-break:break-word}
.ckb-page-sub{margin:0 0 20px;color:var(--ckb-muted);font-size:14px}
.ckb-page-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ckb-page-actions form{margin:0}
.ckb-btn-danger-ghost{color:var(--ckb-danger)}.ckb-btn-danger-ghost:hover{background:var(--ckb-danger-bg);color:var(--ckb-danger)}
.ckb-confirm-inline{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;background:#fff;border:1px solid var(--ckb-line);border-radius:12px;padding:8px 8px 8px 14px;animation:ckb-up .15s ease both}
.ckb-confirm-inline form{margin:0}
.ckb-doc{padding:clamp(16px,3vw,28px);animation:ckb-up .3s ease both}
.ckb-doc-text{margin:0;white-space:pre-wrap;word-break:break-word;font-family:var(--ckb-mono);font-size:13px;line-height:1.6;color:var(--ckb-fg2)}
.ckb-doc-empty{color:var(--ckb-muted);font-size:14px}
.ckb-table-wrap{overflow-x:auto;animation:ckb-up .3s ease both}
.ckb-table{width:100%;border-collapse:collapse;font-size:14px}
.ckb-table th{text-align:left;font-family:var(--ckb-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ckb-muted);font-weight:500;padding:12px 16px;border-bottom:1px solid var(--ckb-line)}
.ckb-table td{padding:12px 16px;border-bottom:1px solid var(--ckb-line);vertical-align:top}
.ckb-table tr:last-child td{border-bottom:none}
.ckb-table-when{font-family:var(--ckb-mono);font-size:12px;color:var(--ckb-muted);white-space:nowrap}
.ckb-table-tool{font-family:var(--ckb-mono);font-size:12px}
.ckb-table-detail{color:var(--ckb-fg2);word-break:break-word}
.ckb-pill{display:inline-grid;place-items:center;height:24px;padding:0 8px;border-radius:7px;font-family:var(--ckb-mono);font-size:11px;background:#e3f0f4;color:#1f6f8b}
.ckb-h1-sm{font-size:clamp(32px,5vw,56px)}
.ckb-notice{margin-bottom:14px;padding:10px 12px;border-radius:10px;background:#e3f0f4;color:#164f63;font-size:13px;font-weight:500}
.ckb-mt-sm{margin-top:10px}
/* OAuth consent (auth service) */
.ckb-scope-list{display:flex;flex-direction:column;gap:8px;margin:0 0 6px}
.ckb-scope{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--ckb-line);border-radius:12px;background:var(--ckb-field);cursor:pointer}
.ckb-scope:hover{border-color:var(--ckb-line2)}
.ckb-scope input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--ckb-fg);flex:none}
.ckb-scope-name{display:block;font-weight:700;font-size:14px}
.ckb-scope-desc{display:block;font-size:12.5px;color:var(--ckb-muted);margin-top:2px}
.ckb-consent-client{display:inline-grid;place-items:center;height:28px;padding:0 10px;border-radius:8px;background:#e3f0f4;color:#1f6f8b;font-family:var(--ckb-mono);font-size:14px;vertical-align:middle}

/* telemetry (demo): KPI tiles, per-action table with a single-hue latency bar, live feed */
.ckb-page-wide{max-width:1200px}
.ckb-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--ckb-mono);font-size:11px;color:var(--ckb-muted);margin-left:6px;white-space:nowrap}
.ckb-live-dot{width:8px;height:8px;border-radius:50%;background:var(--ckb-accent);animation:ckb-pulse 1.6s ease-in-out infinite}
@keyframes ckb-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.ckb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 24px}
.ckb-tile{background:#fff;border:1px solid var(--ckb-line);border-radius:16px;padding:16px 18px;animation:ckb-up .3s ease both}
.ckb-tile-label{font-size:13px;font-weight:600;color:var(--ckb-muted)}
.ckb-tile-value{margin-top:6px;font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.ckb-tile-unit{font-size:13px;font-weight:600;color:var(--ckb-muted);margin-left:4px}
.ckb-section-title{margin:0 0 10px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.ckb-section-title + .ckb-card{margin-bottom:28px}
.ckb-table-num td.ckb-num,.ckb-table-num th.ckb-num{text-align:right;font-family:var(--ckb-mono);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ckb-num-inline{font-family:var(--ckb-mono);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ckb-bar-cell{min-width:200px;white-space:nowrap}
.ckb-bar{display:inline-block;vertical-align:middle;height:8px;width:120px;border-radius:4px;background:#e3f0f4;position:relative;margin-right:10px;overflow:hidden}
.ckb-bar > span{position:absolute;top:0;bottom:0;left:0;border-radius:4px;background:var(--ckb-accent);transition:width .3s}
.ckb-status-ok{font-family:var(--ckb-mono);font-size:12px;color:var(--ckb-muted)}
.ckb-status-fail{display:inline-grid;place-items:center;height:22px;padding:0 8px;border-radius:7px;background:var(--ckb-danger-bg);color:var(--ckb-danger);font-size:11px;font-weight:700;font-family:var(--ckb-mono)}
.ckb-empty-sm{padding:28px 20px;font-size:14px}