/* AI Hub — shared skin (theme) definitions.
   Loaded by every page before its own <style> block, so page CSS can
   keep using the same var(--...) tokens regardless of which skin is
   active. Skins are switched by setting data-skin on <html>. */

:root{
  /* Provider identity colors and fonts stay constant across every skin. */
  --prov-openai:#4f8dfd;
  --prov-anthropic:#f0975a;
  --prov-google_gemini:#b487f5;
  --font-body:'Fira Sans','Hiragino Sans','Noto Sans JP',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'Fira Code',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

:root,
[data-skin="dark"]{
  --bg:#020617;
  --surface:#0e1223;
  --surface-2:#171c2e;
  --surface-3:#1f253a;
  --border:#242c40;
  --border-soft:#1a2032;
  --text:#f4f6fb;
  --text-muted:#98a2b8;
  --text-faint:#5b647c;
  --accent:#27c46b;
  --accent-strong:#38dc80;
  --accent-ink:#04150b;
  --accent-soft:rgba(39,196,107,0.13);
  --danger:#ef5350;
  --danger-soft:rgba(239,83,80,0.13);
}

[data-skin="light"]{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface-2:#f1f3f8;
  --surface-3:#e7eaf2;
  --border:#dde1ea;
  --border-soft:#e9ecf3;
  --text:#161a25;
  --text-muted:#5b6478;
  --text-faint:#95a0b8;
  --accent:#1a9e56;
  --accent-strong:#168049;
  --accent-ink:#062615;
  --accent-soft:rgba(26,158,86,0.10);
  --danger:#d0453f;
  --danger-soft:rgba(208,69,63,0.08);
}

[data-skin="blue"]{
  --bg:#050b1a;
  --surface:#0b1526;
  --surface-2:#111e38;
  --surface-3:#182a4d;
  --border:#233a63;
  --border-soft:#182238;
  --text:#eef2fb;
  --text-muted:#93a2c4;
  --text-faint:#576389;
  --accent:#4f8dfd;
  --accent-strong:#6fa2ff;
  --accent-ink:#041022;
  --accent-soft:rgba(79,141,253,0.14);
  --danger:#ef5350;
  --danger-soft:rgba(239,83,80,0.13);
}

[data-skin="purple"]{
  --bg:#0c0818;
  --surface:#150f26;
  --surface-2:#1e1738;
  --surface-3:#28204a;
  --border:#392e5c;
  --border-soft:#241c3a;
  --text:#f3f0fb;
  --text-muted:#a99cc4;
  --text-faint:#6b5d8a;
  --accent:#b487f5;
  --accent-strong:#c6a3f8;
  --accent-ink:#180f2b;
  --accent-soft:rgba(180,135,245,0.15);
  --danger:#f0605c;
  --danger-soft:rgba(240,96,92,0.14);
}

[data-skin="orange"]{
  --bg:#160f08;
  --surface:#211508;
  --surface-2:#2c1d0e;
  --surface-3:#3a2712;
  --border:#4a341c;
  --border-soft:#2c1e10;
  --text:#fbf3ea;
  --text-muted:#c4a68b;
  --text-faint:#8a6d51;
  --accent:#f0975a;
  --accent-strong:#f5ac78;
  --accent-ink:#241206;
  --accent-soft:rgba(240,151,90,0.16);
  --danger:#ef5350;
  --danger-soft:rgba(239,83,80,0.13);
}

/* ===================================================================
   Console shell — shared by every /console/*/ page (header, sidebar,
   nav, main content scaffolding, and common component patterns like
   panels/tables/badges/forms). Page-specific layouts stay in each
   page's own <style> block; anything reused across pages lives here.
   =================================================================== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body.console-body{background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }
.console-body a{color:var(--accent-strong);text-decoration:none;}
.console-body button{font-family:inherit;cursor:pointer;}
.console-body input{font-family:inherit;color:var(--text);}
.console-body input::placeholder{color:var(--text-faint);}

.logo{display:flex;align-items:center;gap:10px;}
.logo-mark{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(150deg, var(--surface-3), var(--surface-2));
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.logo-word{font-size:15.5px;font-weight:700;letter-spacing:-0.01em;}

.app-header{
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;background:var(--surface);border-bottom:1px solid var(--border-soft);
}
.header-right{display:flex;align-items:center;gap:12px;}
.user-chip{display:flex;align-items:center;gap:10px;}
.avatar{
  width:28px;height:28px;border-radius:999px;
  background:var(--surface-3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;color:var(--text-muted);
}
.user-name{font-size:13px;font-weight:600;}
.logout-link{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--text-muted);
  padding:6px 10px;border-radius:7px;background:none;border:none;
}
.logout-link:hover{color:var(--text);background:var(--surface-2);}

.app-body{display:flex;min-height:calc(100vh - 60px);}
.sidebar{
  width:240px;flex:0 0 240px;background:var(--surface);
  border-right:1px solid var(--border-soft);padding:20px 12px;
  display:flex;flex-direction:column;gap:2px;
}
.nav-section-label{
  font-size:10.5px;font-weight:700;letter-spacing:0.08em;color:var(--text-faint);
  text-transform:uppercase;padding:0 10px;margin:6px 0 8px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  font-size:13px;font-weight:500;color:var(--text-muted);white-space:nowrap;
  transition:background 150ms ease,color 150ms ease;
}
.nav-item:hover{background:var(--surface-2);color:var(--text);}
.nav-item svg{flex:0 0 auto;color:var(--text-faint);transition:color 150ms ease;}
.nav-item.active{background:var(--accent-soft);color:var(--accent-strong);}
.nav-item.active svg{color:var(--accent-strong);}
.nav-item.active:hover{background:var(--accent-soft);}
.nav-item.disabled{color:var(--text-faint);cursor:default;justify-content:space-between;}
.nav-item.disabled:hover{background:none;color:var(--text-faint);}
.nav-item.disabled svg{color:var(--text-faint);opacity:.6;}
.nav-item.disabled .nav-left{display:flex;align-items:center;gap:10px;white-space:nowrap;}
.soon-tag{
  font-family:var(--font-mono);font-size:9px;font-weight:500;
  color:var(--text-faint);background:var(--surface-2);flex:0 0 auto;
  padding:2px 6px;border-radius:999px;letter-spacing:0.02em;
}

.main{flex:1 1 auto;padding:36px 40px;overflow:auto;}
.page-head{margin-bottom:28px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.page-title{font-size:21px;font-weight:700;letter-spacing:-0.01em;margin:0 0 6px;}
.page-sub{font-size:13.5px;color:var(--text-muted);line-height:1.65;max-width:640px;margin:0;}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px;}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;gap:12px;}
.panel-title{font-size:14.5px;font-weight:700;}
.count-pill{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  color:var(--text-muted);background:var(--surface-3);padding:2px 8px;border-radius:999px;
}
.panel-desc{font-size:12.5px;color:var(--text-faint);margin:6px 0 0;line-height:1.6;}

.console-body table{width:100%;border-collapse:collapse;margin-top:18px;}
.console-body th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--text-faint);
  padding:0 10px 10px;border-bottom:1px solid var(--border-soft);
}
.console-body td{padding:13px 10px;border-bottom:1px solid var(--border-soft);font-size:13.5px;vertical-align:middle;}
.console-body tr:last-child td{border-bottom:none;}
.row-date{color:var(--text-faint);font-size:12px;font-family:var(--font-mono);}
.empty-state{color:var(--text-faint);font-size:13px;padding:28px 0;text-align:center;}

.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  letter-spacing:0.02em;padding:3px 9px;border-radius:999px;font-family:var(--font-mono);
  white-space:nowrap;
}
.badge-verified,.badge-active{background:var(--accent-soft);color:var(--accent-strong);}
.badge-unverified{background:var(--surface-3);color:var(--text-muted);}
.badge-archived{background:var(--danger-soft);color:var(--danger);}

.icon-btn{
  width:32px;height:32px;border-radius:7px;background:transparent;border:1px solid transparent;
  display:flex;align-items:center;justify-content:center;color:var(--text-faint);
  transition:background 150ms ease,color 150ms ease,border-color 150ms ease;
}
.icon-btn:hover{background:var(--danger-soft);border-color:rgba(239,83,80,0.35);color:var(--danger);}
.icon-btn.icon-btn-neutral:hover{background:var(--surface-2);border-color:var(--border);color:var(--text);}

.field-gap{display:flex;flex-direction:column;gap:16px;}
.field-label{display:block;font-size:12.5px;font-weight:600;color:var(--text-muted);margin-bottom:7px;letter-spacing:0.01em;}
.input-wrap{position:relative;}
.input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-faint);display:flex;}
.text-input,.textarea-input{
  width:100%;padding:0 14px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;font-size:14px;color:var(--text);
}
.text-input{height:42px;}
.textarea-input{padding:10px 14px;min-height:84px;resize:vertical;line-height:1.5;}
.text-input.has-icon{padding-left:40px;}
.text-input:focus,.textarea-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

.callout{
  display:flex;gap:10px;align-items:flex-start;background:var(--surface-2);
  border:1px solid var(--border-soft);border-radius:9px;padding:11px 12px;margin-top:18px;
  font-size:12px;color:var(--text-muted);line-height:1.6;
}
.callout svg{flex:0 0 auto;color:var(--accent-strong);margin-top:1px;}

.btn-primary{
  width:100%;height:42px;border:none;border-radius:8px;margin-top:18px;
  background:var(--accent);color:var(--accent-ink);font-size:14px;font-weight:700;letter-spacing:0.01em;
  transition:background 160ms ease;
}
.btn-primary:hover{background:var(--accent-strong);}
.btn-primary:disabled{opacity:.6;cursor:default;}
.btn-secondary{
  height:42px;padding:0 16px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface-2);color:var(--text);font-size:13.5px;font-weight:600;
  transition:background 150ms ease,border-color 150ms ease;
}
.btn-secondary:hover{background:var(--surface-3);border-color:var(--text-faint);}

.form-msg{font-size:12.5px;margin-top:10px;display:none;line-height:1.5;}
.form-msg.error{color:var(--danger);}
.form-msg.success{color:var(--accent-strong);}

/* Workspace switcher (header) — same interaction pattern as the skin
   switcher below, sized for a name label instead of a color swatch. */
.ws-switcher{position:relative;}
.ws-switcher-trigger{
  height:32px;padding:0 10px 0 12px;border-radius:8px;background:transparent;
  border:1px solid var(--border);display:flex;align-items:center;gap:8px;
  color:var(--text);font-size:12.5px;font-weight:600;max-width:180px;
  transition:background 150ms ease,border-color 150ms ease;
}
.ws-switcher-trigger svg{flex:0 0 auto;color:var(--text-faint);}
.ws-switcher-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-switcher-trigger:hover{background:var(--surface-2);}
.ws-switcher.open .ws-switcher-trigger{background:var(--surface-2);border-color:var(--text-faint);}
.ws-switcher-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:220px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:6px;display:none;flex-direction:column;gap:1px;
  box-shadow:0 16px 32px rgba(0,0,0,0.32);z-index:80;
}
.ws-switcher.open .ws-switcher-menu{display:flex;}
.ws-option{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:7px;
  background:none;border:none;font-size:12.5px;font-weight:500;color:var(--text-muted);
  text-align:left;width:100%;font-family:inherit;cursor:pointer;
  transition:background 120ms ease,color 120ms ease;
}
.ws-option:hover{background:var(--surface-2);color:var(--text);}
.ws-option[aria-pressed="true"]{color:var(--text);background:var(--surface-2);font-weight:600;}
.ws-option-role{font-size:10.5px;color:var(--text-faint);font-family:var(--font-mono);flex:0 0 auto;}
.ws-option-create{color:var(--accent-strong);font-weight:600;border-top:1px solid var(--border-soft);margin-top:3px;padding-top:9px;border-radius:0 0 7px 7px;}

/* Skin switcher widget — themes itself via the same tokens. */
.skin-switcher{position:relative;}
.skin-switcher-trigger{
  width:32px;height:32px;border-radius:8px;background:transparent;
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);transition:background 150ms ease,color 150ms ease,border-color 150ms ease;
}
.skin-switcher-trigger:hover{background:var(--surface-2);color:var(--text);}
.skin-switcher.open .skin-switcher-trigger{background:var(--surface-2);color:var(--text);border-color:var(--text-faint);}
.skin-switcher-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:156px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:6px;display:none;flex-direction:column;gap:1px;
  box-shadow:0 16px 32px rgba(0,0,0,0.32);z-index:80;
}
.skin-switcher.open .skin-switcher-menu{display:flex;}
.skin-option{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;
  background:none;border:none;font-size:12.5px;font-weight:500;color:var(--text-muted);
  text-align:left;width:100%;font-family:inherit;cursor:pointer;
  transition:background 120ms ease,color 120ms ease;
}
.skin-option:hover{background:var(--surface-2);color:var(--text);}
.skin-option[aria-pressed="true"]{color:var(--text);background:var(--surface-2);font-weight:600;}
.skin-swatch{width:15px;height:15px;border-radius:999px;flex:0 0 auto;}
