@import url('/tea2/tea2-design-tokens-v100.css');

/* TEA2 OWNER GLASS SYSTEM v1.2
   Canonical interaction family:
   - one refractive glass surface language
   - one action primitive with semantic states
   - one hub-item primitive
   - one card primitive
   - one segmented-control primitive
   - one status-chip primitive
*/
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  overflow:hidden;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#12324b;
  background:#8fb8c9 url('/tea2/assets/visual/tea2-owner-background-preview-v1.webp') center/cover fixed no-repeat;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 12% 10%,rgba(64,214,231,.22),transparent 26%),
    radial-gradient(circle at 86% 11%,rgba(120,84,236,.20),transparent 30%),
    radial-gradient(circle at 84% 90%,rgba(255,162,79,.16),transparent 32%),
    linear-gradient(120deg,rgba(224,247,250,.12),rgba(184,206,230,.10) 52%,rgba(255,220,188,.08));
}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.shell{
  position:relative;z-index:2;height:100%;padding:16px;
  display:grid;grid-template-columns:248px minmax(0,1fr) 318px;
  grid-template-rows:72px minmax(0,1fr) 66px;gap:12px;
}

/* =========================================================
   ONE GLASS SURFACE LANGUAGE
   ========================================================= */
.glass,
.hero,.card,.stat,.module,.action,.rcard,
.command,.scope,.topbtn,.hub,.sys,.app,
.depth,.depth button,.rtabs button,.quick button,.composer textarea{
  position:relative;
  isolation:isolate;
}
.glass{
  border:1px solid rgba(255,255,255,.70);
  background:
    linear-gradient(145deg,rgba(255,255,255,.43),rgba(225,239,246,.24)),
    linear-gradient(90deg,rgba(46,193,214,.03),rgba(116,88,236,.04));
  box-shadow:
    0 24px 72px rgba(23,52,74,.17),
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -1px 0 rgba(41,92,124,.05);
  backdrop-filter:blur(34px) saturate(168%) brightness(1.04);
  -webkit-backdrop-filter:blur(34px) saturate(168%) brightness(1.04);
}
.glass:after{
  content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:-1;
  background:
    linear-gradient(115deg,rgba(255,255,255,.24),transparent 22% 72%,rgba(101,84,236,.05)),
    radial-gradient(circle at 12% 3%,rgba(64,218,231,.10),transparent 26%);
}

/* =========================================================
   ONE TEA2 ACTION PRIMITIVE
   Semantic state changes color, not geometry/language.
   ========================================================= */
:is(.topbtn,.primary,.secondary,.quick button,.sys,.app,.depth button,.rtabs button){
  --tea-action-a:rgba(255,255,255,.46);
  --tea-action-b:rgba(223,238,246,.30);
  --tea-action-ink:#173a53;
  border:1px solid rgba(255,255,255,.72);
  border-radius:13px;
  color:var(--tea-action-ink);
  background:
    linear-gradient(145deg,var(--tea-action-a),var(--tea-action-b));
  box-shadow:
    0 8px 20px rgba(31,65,90,.075),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(54,98,129,.05);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
  overflow:hidden;
}
:is(.topbtn,.primary,.secondary,.quick button,.sys,.app,.depth button,.rtabs button):before{
  content:"";position:absolute;inset:-1px;pointer-events:none;opacity:.34;
  background:linear-gradient(108deg,transparent 16%,rgba(255,255,255,.52) 42%,transparent 61%);
  transform:translateX(-72%);transition:transform .42s ease,opacity .2s ease;
}
:is(.topbtn,.primary,.secondary,.quick button,.sys,.app,.depth button,.rtabs button):hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.92);
  box-shadow:
    0 12px 28px rgba(30,67,94,.12),
    0 0 0 1px rgba(57,184,219,.05),
    inset 0 1px 0 rgba(255,255,255,.94);
}
:is(.topbtn,.primary,.secondary,.quick button,.sys,.app,.depth button,.rtabs button):hover:before{transform:translateX(72%);opacity:.62}
:is(.topbtn,.primary,.secondary,.quick button,.sys,.app,.depth button,.rtabs button):active{transform:translateY(0) scale(.985)}
:is(.topbtn,.primary,.secondary,.quick button,.sys,.app,.depth button,.rtabs button):focus-visible,
.hub:focus-visible{
  outline:2px solid rgba(46,126,241,.68);outline-offset:2px
}
.primary,.app.active,.depth button.active{
  --tea-action-a:rgba(46,132,244,.96);
  --tea-action-b:rgba(114,87,236,.94);
  --tea-action-ink:#fff;
  border-color:rgba(255,255,255,.64);
  box-shadow:
    0 11px 28px rgba(66,86,196,.24),
    inset 0 1px 0 rgba(255,255,255,.38);
}
.secondary{--tea-action-a:rgba(255,255,255,.54);--tea-action-b:rgba(225,239,246,.35)}
.sys{--tea-action-a:rgba(250,254,255,.44);--tea-action-b:rgba(219,236,244,.28)}
.app{--tea-action-a:rgba(255,255,255,.54);--tea-action-b:rgba(219,236,244,.32)}

.topbar{grid-column:1/-1;border-radius:25px;padding:0 14px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:245px}
.brandmark{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#fff;font-size:19px;font-weight:950;
  background:
    radial-gradient(circle at 30% 18%,rgba(255,255,255,.44),transparent 25%),
    linear-gradient(145deg,rgba(37,197,216,.34),rgba(47,127,242,.30) 57%,rgba(118,88,238,.30));
  border:1px solid rgba(255,255,255,.76);
  box-shadow:0 11px 26px rgba(45,99,181,.18),inset 0 1px 0 rgba(255,255,255,.48);
  overflow:hidden;
}
.brandmark img{width:37px;height:37px;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(28,62,91,.16))}
.tea-icon{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hubicon .tea-icon{width:18px;height:18px}.app .tea-icon{width:18px;height:18px}.topbtn .tea-icon{width:15px;height:15px}
.brandcopy strong{font-size:21px;letter-spacing:-.035em}
.brandcopy span{background:linear-gradient(95deg,#267cef,#7357ec);-webkit-background-clip:text;background-clip:text;color:transparent}
.brandcopy small{display:block;margin-top:2px;font-size:10px;letter-spacing:.16em;color:#607b8e;font-weight:850}
.scope{
  height:42px;min-width:160px;padding:0 12px;color:#244b67;font-weight:780;
  border:1px solid rgba(255,255,255,.70);border-radius:13px;
  background:linear-gradient(145deg,rgba(255,255,255,.44),rgba(220,237,245,.27));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.77)
}
.command{
  flex:1;height:42px;border-radius:13px;border:1px solid rgba(255,255,255,.72);
  background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(219,237,245,.26));
  display:flex;align-items:center;gap:8px;padding:0 12px;color:#648196;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76)
}
.command input{border:0;outline:0;background:transparent;flex:1;color:#173750;font-weight:700}
.command kbd{font-size:10px;padding:4px 7px;border-radius:8px;background:rgba(255,255,255,.46);border:1px solid rgba(50,94,125,.10);color:#49697f}
.top-actions{display:flex;gap:7px}
.topbtn{height:42px;padding:0 11px;font-weight:850;display:flex;align-items:center;gap:6px}
.count{min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(145deg,#ef6380,#dd4568);color:#fff;font-size:10px;box-shadow:0 5px 12px rgba(224,69,104,.19)}
.env{
  padding:7px 10px;border-radius:999px;border:1px solid rgba(37,184,123,.24);
  background:linear-gradient(145deg,rgba(46,201,139,.16),rgba(255,255,255,.24));
  color:#166f4f;font-size:10px;font-weight:950;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.54)
}

/* =========================================================
   ONE HUB ITEM
   ========================================================= */
.left{grid-column:1;grid-row:2;border-radius:25px;padding:13px 10px;display:flex;flex-direction:column;min-height:0}
.railhead{padding:5px 8px 12px;border-bottom:1px solid rgba(44,84,112,.10);margin-bottom:8px}
.railhead small{display:block;font-size:10px;letter-spacing:.14em;color:#617d91;font-weight:900}
.railhead strong{display:block;font-size:18px;margin-top:2px}
.hubs{overflow:auto;padding-right:2px}
.hub{
  width:100%;min-height:54px;border-radius:14px;border:1px solid transparent;background:transparent;
  display:grid;grid-template-columns:36px minmax(0,1fr) 14px;gap:9px;align-items:center;padding:7px 8px;text-align:left;color:#173750;margin:2px 0;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.hub:hover{
  transform:translateX(2px);
  background:linear-gradient(145deg,rgba(255,255,255,.38),rgba(213,234,243,.20));
  border-color:rgba(255,255,255,.62);
}
.hub.active{
  background:
    linear-gradient(145deg,rgba(255,255,255,.58),rgba(217,236,245,.31));
  border-color:rgba(255,255,255,.82);
  box-shadow:0 10px 25px rgba(31,67,94,.10),inset 0 1px 0 rgba(255,255,255,.80);
}
.hub.active:before{
  content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:3px;border-radius:99px;
  background:linear-gradient(180deg,#28c3d8,#2e7cf1 58%,#7358ed);
  box-shadow:0 0 13px rgba(46,139,230,.32)
}
.hubicon{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-weight:950;color:#fff;
  background:
    linear-gradient(145deg,rgba(44,197,218,.90),rgba(48,124,240,.92) 58%,rgba(116,87,236,.90));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 7px 17px rgba(55,98,176,.18),inset 0 1px 0 rgba(255,255,255,.42)
}
.hubcopy strong{display:block;font-size:12px}
.hubcopy small{display:block;font-size:10px;line-height:1.3;color:#637f91;margin-top:2px}
.chev{color:#4d94bc;font-size:17px}
.railfoot{margin-top:auto;padding:9px 8px 2px;font-size:10px;line-height:1.45;color:#688294}

/* =========================================================
   WORKSPACE + ONE CARD FAMILY
   ========================================================= */
.workspace{
  grid-column:2;grid-row:2;border-radius:28px;padding:10px;display:grid;grid-template-rows:56px minmax(0,1fr);gap:8px;min-height:0
}
.wshead{display:flex;align-items:center;gap:10px;padding:0 7px}
.wstitle{flex:1}
.wstitle strong{display:block;font-size:23px;letter-spacing:-.03em}
.wstitle small{display:block;font-size:10px;color:#627f91;margin-top:2px}
.depth{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.46)}
.depth button{border:0;box-shadow:none;background:transparent;color:#607c8f;font-size:10px;font-weight:900;padding:8px 10px}
.wsbody{overflow:auto;border-radius:20px;padding:2px 2px 12px}

.hero,.card,.stat,.module,.action,.rcard{
  border:1px solid rgba(255,255,255,.70);
  background:
    linear-gradient(145deg,rgba(255,255,255,.42),rgba(221,237,245,.24));
  box-shadow:
    0 10px 28px rgba(29,62,87,.075),
    inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(22px) saturate(150%);
}
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:13px;border-radius:22px;padding:18px}
.eyebrow{font-size:10px;letter-spacing:.13em;color:#2a7fae;font-weight:950}
.hero h1{margin:5px 0 6px;font-size:27px;line-height:1.08;letter-spacing:-.045em}
.hero p{margin:0;max-width:760px;font-size:10.8px;line-height:1.52;color:#365a73}
.heroactions{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.primary,.secondary{height:38px;padding:0 13px;font-weight:850}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{border-radius:15px;padding:11px;border-top:2px solid rgba(47,125,241,.72)}
.stat:nth-child(2){border-top-color:rgba(117,88,237,.72)}
.stat:nth-child(3){border-top-color:rgba(37,184,123,.72)}
.stat:nth-child(4){border-top-color:rgba(238,152,60,.72)}
.stat small{display:block;font-size:10px;letter-spacing:.09em;color:#657f91;font-weight:900}
.stat strong{display:block;font-size:18px;margin-top:4px}
.stat span{display:block;font-size:10px;color:#668092;margin-top:3px}
.contentgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:10px;margin-top:10px}
.card{border-radius:19px;padding:13px}
.cardhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.cardhead h3{margin:0;font-size:14px}
.cardhead small{font-size:10px;color:#668092}
.modulegrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.module{min-height:74px;border-radius:14px;padding:10px}
.module b{display:block;font-size:10.6px}
.module span{display:block;font-size:10px;line-height:1.35;color:#638092;margin-top:4px}
.module i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#26b77b;margin-right:5px;box-shadow:0 0 0 3px rgba(38,183,123,.08)}
.module.attn i{background:#ed993d;box-shadow:0 0 0 3px rgba(237,153,61,.08)}
.module.ai i{background:#7559ec;box-shadow:0 0 0 3px rgba(117,89,236,.08)}
.actionlist{display:grid;gap:7px}
.action{display:grid;grid-template-columns:29px 1fr auto;gap:8px;align-items:center;padding:9px;border-radius:13px}
.num{
  width:29px;height:29px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:10px;
  background:linear-gradient(145deg,#31a0df,#6b61e9);border:1px solid rgba(255,255,255,.66)
}
.action b{display:block;font-size:10.6px}
.action small{display:block;font-size:10px;color:#638092;margin-top:2px}
.action em{font-style:normal;font-size:10px;font-weight:900;color:#2f759f}

/* =========================================================
   JAMES / CONTEXT — same glass language
   ========================================================= */
.right{grid-column:3;grid-row:2;border-radius:25px;display:grid;grid-template-rows:70px 42px minmax(0,1fr) 124px;min-height:0;overflow:hidden}
.jhead{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid rgba(50,90,120,.10)}
.avatar{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:18px;font-weight:950;
  background:linear-gradient(145deg,#29c0d8,#347df0 56%,#7557ec);
  border:1px solid rgba(255,255,255,.72);box-shadow:0 7px 18px rgba(53,93,179,.18)
}
.jhead small{display:block;font-size:10px;color:#647f92;letter-spacing:.08em;font-weight:900}
.jhead strong{display:block;font-size:14px;margin-top:2px}
.rtabs{display:flex;gap:4px;padding:6px 9px}
.rtabs button{flex:1;border:0;box-shadow:none;background:rgba(255,255,255,.22);color:#607d90;font-size:10px;font-weight:900}
.rtabs button.active{background:rgba(255,255,255,.51);color:#173750}
.rbody{overflow:auto;padding:10px;display:grid;gap:8px;align-content:start}
.rcard{border-radius:15px;padding:11px}
.rcard small{display:block;font-size:10px;letter-spacing:.09em;color:#668193;font-weight:950}
.rcard strong{display:block;font-size:10.9px;margin-top:4px}
.rcard p{font-size:10px;line-height:1.45;color:#3e627a;margin:5px 0 0}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.quick button{min-height:40px;color:#365b73;font-size:10px;font-weight:780}
.composer{display:grid;grid-template-columns:1fr 42px;gap:7px;padding:10px;border-top:1px solid rgba(50,90,120,.10)}
.composer textarea{
  resize:none;padding:9px;color:#173750;outline:none;
  border:1px solid rgba(255,255,255,.72);border-radius:13px;
  background:linear-gradient(145deg,rgba(255,255,255,.45),rgba(221,238,245,.25));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75)
}
.send{
  border:1px solid rgba(255,255,255,.68);border-radius:13px;
  background:linear-gradient(180deg,#2ac0d8,#377bed 64%,#7456eb);
  color:#fff;font-size:18px;
  box-shadow:0 10px 24px rgba(61,85,194,.22),inset 0 1px 0 rgba(255,255,255,.34)
}

/* =========================================================
   SYSTEM DOCK — same component language
   ========================================================= */
.dock{grid-column:1/-1;grid-row:3;border-radius:22px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:7px 10px}
.dockleft,.dockright{display:flex;gap:6px;align-items:center}.dockright{justify-content:flex-end}
.sys{height:41px;padding:0 10px;font-size:10px;font-weight:850;display:flex;align-items:center;gap:6px}
.sys i{width:7px;height:7px;border-radius:50%;background:#25b87b;box-shadow:0 0 0 3px rgba(37,184,123,.10)}
.sys.warn i{background:#ee983c}
.apps{display:flex;gap:7px;padding:4px;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.30);backdrop-filter:blur(18px)}
.app{width:41px;height:41px;display:grid;place-items:center;font-weight:900}
.previewtag{position:fixed;right:22px;bottom:6px;z-index:3;font-size:10px;letter-spacing:.10em;color:rgba(21,54,79,.52);font-weight:900}

/* Scrollbars share one language */
.hubs,.wsbody,.rbody{scrollbar-width:thin;scrollbar-color:rgba(57,128,173,.42) rgba(255,255,255,.10)}
.hubs::-webkit-scrollbar,.wsbody::-webkit-scrollbar,.rbody::-webkit-scrollbar{width:8px}
.hubs::-webkit-scrollbar-thumb,.wsbody::-webkit-scrollbar-thumb,.rbody::-webkit-scrollbar-thumb{
  border-radius:999px;border:2px solid rgba(255,255,255,.44);
  background:linear-gradient(#35b6d4,#6171e2)
}

/* Responsive */
@media(max-width:1280px){
  .shell{grid-template-columns:220px minmax(0,1fr) 290px}
  .brand{min-width:210px}.brandcopy small{display:none}.scope{min-width:145px}.topbtn .label{display:none}
}
@media(max-width:1020px){
  .shell{grid-template-columns:72px minmax(0,1fr);grid-template-rows:68px minmax(0,1fr) 64px}
  .right{display:none}.workspace{grid-column:2}.dock{grid-column:1/-1}
  .brandcopy,.hubcopy,.chev,.railhead,.railfoot{display:none}
  .left{padding:10px}.hub{grid-template-columns:1fr;padding:6px}.hubicon{margin:auto}
  .brand{min-width:auto}.scope{display:none}
}