/* MyOffice TEA2 v4.0 migration shell — 2026-10-02 */
:root{
 --mo-glass:rgba(219,241,255,.14);--mo-glass-strong:rgba(209,237,255,.22);--mo-glass-soft:rgba(236,248,255,.09);
 --mo-border:rgba(181,229,255,.42);--mo-border-soft:rgba(152,214,255,.22);--mo-text:#f8fcff;--mo-muted:#b9d5e9;
 --mo-blue:#42b8ff;--mo-blue2:#167ee8;--mo-cyan:#63e8ff;--mo-shadow:0 18px 55px rgba(0,25,62,.24);
 --mo-radius-xl:24px;--mo-radius-lg:18px;--mo-radius-md:14px;--mo-blur:blur(28px) saturate(155%);
}
html,body{background-color:#0b4774!important}
body{
 background:
 radial-gradient(900px 520px at 18% 0%,rgba(113,220,255,.22),transparent 64%),
 radial-gradient(850px 520px at 84% 8%,rgba(139,126,255,.18),transparent 68%),
 linear-gradient(180deg,rgba(7,66,108,.18),rgba(4,37,69,.38)),
 url('/tea2/assets/frame-permanent.png') center/cover no-repeat fixed!important;
 color:var(--mo-text)!important;
}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.06),transparent 28%,rgba(76,199,255,.06) 56%,transparent 80%)}
.tea2-shell{padding:8px 22px 8px!important;grid-template-rows:96px minmax(0,1fr) 82px!important}
.tea2-header{
 margin:0 8px 6px!important;padding:8px 18px 28px!important;border:1px solid var(--mo-border-soft)!important;border-radius:0 0 22px 22px!important;
 background:linear-gradient(135deg,rgba(238,249,255,.16),rgba(25,107,165,.14))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 38px rgba(0,29,65,.14)!important;backdrop-filter:var(--mo-blur)!important;
}
.date-clock,.focus-timer{
 border:1px solid var(--mo-border)!important;background:linear-gradient(145deg,rgba(241,250,255,.18),rgba(46,126,183,.16))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 26px rgba(0,29,67,.14)!important;backdrop-filter:var(--mo-blur)!important;
}
.date-clock small,.timer-copy small,.view-head small{color:var(--mo-muted)!important;font-size:11px!important}
.myoffice-brand{filter:drop-shadow(0 8px 18px rgba(0,55,110,.18))}
.myoffice-brand>div{border-left-color:rgba(192,233,255,.48)!important}
.myoffice-name{font-size:34px!important;letter-spacing:-.7px!important;color:#fff!important;text-shadow:0 2px 16px rgba(0,67,125,.2)}
.myoffice-name span{color:#88e6ff!important}
.myoffice-sub{font-size:9px!important;letter-spacing:2.6px!important;color:#dff5ff!important}
.main-screen{
 margin-left:46px!important;margin-right:46px!important;border:1px solid rgba(192,233,255,.42)!important;border-radius:24px!important;
 background:linear-gradient(135deg,rgba(223,242,255,.13),rgba(18,80,132,.22))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(87,189,255,.1),var(--mo-shadow)!important;
 backdrop-filter:blur(22px) saturate(145%)!important;
}
.workspace-stage{inset:9px 10px!important}
.workspace-view:not(.idle-view){
 border:1px solid rgba(183,229,255,.24)!important;border-radius:20px!important;
 background:linear-gradient(135deg,rgba(230,246,255,.11),rgba(8,56,101,.28))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 32px rgba(0,25,58,.11)!important;
 backdrop-filter:blur(18px) saturate(145%)!important;
}
.view-head{min-height:50px!important;height:auto!important;padding:8px 12px!important;margin:0 0 10px!important;border-bottom:1px solid rgba(176,226,255,.18)}
.view-head strong{font-size:20px!important;letter-spacing:-.2px}
.mini-btn,.tea2-work-btn,.preset-btn{
 min-height:34px!important;border:1px solid rgba(163,222,255,.34)!important;border-radius:11px!important;
 background:linear-gradient(180deg,rgba(218,242,255,.16),rgba(21,92,148,.20))!important;color:#f7fcff!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 7px 18px rgba(0,28,64,.11)!important;backdrop-filter:blur(14px)!important;
}
.mini-btn:hover,.tea2-work-btn:hover,.preset-btn:hover{border-color:rgba(126,224,255,.68)!important;background:linear-gradient(180deg,rgba(227,248,255,.24),rgba(30,126,190,.28))!important}
.mini-btn.primary,.tea2-work-btn.primary{background:linear-gradient(180deg,#31adff,#0f6fd2)!important;border-color:rgba(170,234,255,.72)!important}
.side-rail{top:102px!important;bottom:92px!important;width:38px!important}
.side-left{left:30px!important}.side-right{right:30px!important}
.side-rail.expanded{width:292px!important}
#leftRail.expanded~.main-screen{margin-left:302px!important}
#rightRail.expanded~.main-screen{margin-right:302px!important}
.rail-toggle{
 width:34px!important;height:34px!important;border-radius:12px!important;border:1px solid rgba(174,228,255,.5)!important;
 background:linear-gradient(145deg,rgba(230,247,255,.22),rgba(34,109,167,.22))!important;color:#fff!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 8px 22px rgba(0,32,72,.16)!important;backdrop-filter:var(--mo-blur)!important;
}
.rail-body{inset:42px 0 0!important}
.tea2-side-ui{
 width:282px!important;max-height:100%!important;padding:8px!important;overflow:auto!important;gap:8px!important;border:1px solid rgba(184,229,255,.34)!important;
 border-radius:18px!important;background:linear-gradient(145deg,rgba(224,243,255,.18),rgba(13,73,122,.27))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 44px rgba(0,28,64,.2)!important;backdrop-filter:blur(30px) saturate(160%)!important;
 scrollbar-width:thin;scrollbar-color:rgba(111,210,255,.48) transparent;
}
.tea2-side-head{height:auto!important;min-height:48px!important;padding:4px 8px 10px!important;border-bottom-color:rgba(178,226,255,.2)!important}
.tea2-side-head small{font-size:9px!important;letter-spacing:1.5px!important;color:#9ceaff!important}
.tea2-side-head strong{font-size:15px!important}
.tea2-side-count{height:24px!important;font-size:10px!important;background:rgba(224,245,255,.11)!important}
.tea2-menu-group{border:1px solid rgba(171,221,255,.14);border-radius:14px;background:rgba(238,249,255,.045);overflow:hidden}
.tea2-menu-group+.tea2-menu-group{margin-top:7px}
.tea2-menu-group-toggle{
 width:100%;min-height:38px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border:0;
 color:#eefaff;background:linear-gradient(90deg,rgba(223,244,255,.09),rgba(50,137,197,.08));font:inherit;text-align:left;cursor:pointer;
}
.tea2-menu-group-toggle strong{font-size:11.5px;letter-spacing:.2px}.tea2-menu-group-toggle span{font-size:14px;color:#83ddff;transition:transform .18s ease}
.tea2-menu-group.collapsed .tea2-menu-group-toggle span{transform:rotate(-90deg)}
.tea2-menu-group.collapsed .tea2-menu-items{display:none}
.tea2-menu-items{display:flex;flex-direction:column;gap:4px;padding:5px}
.tea2-side-list{padding:0!important;gap:0!important}
.tea2-side-item{
 min-height:40px!important;height:auto!important;grid-template-columns:32px minmax(0,1fr) 12px!important;padding:5px 8px 5px 5px!important;
 border-color:transparent!important;border-radius:11px!important;background:transparent!important;
}
.tea2-side-item:hover,.tea2-side-item:focus-visible{
 border-color:rgba(155,224,255,.4)!important;background:linear-gradient(90deg,rgba(230,248,255,.16),rgba(38,128,193,.16))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px rgba(0,31,70,.11)!important;
}
.tea2-side-label{font-size:12px!important;font-weight:700!important;color:#f5fbff!important}
.tea2-side-icon{
 width:30px!important;height:30px!important;border-radius:10px!important;border-color:rgba(174,232,255,.6)!important;
 background:linear-gradient(145deg,rgba(89,202,255,.96),rgba(14,94,191,.92))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 5px 14px rgba(0,85,170,.22)!important;
}
.tea2-side-context{display:grid;gap:8px;padding:4px 2px}
.tea2-context-card{padding:12px;border:1px solid rgba(177,227,255,.22);border-radius:14px;background:rgba(232,247,255,.08)}
.tea2-context-card strong,.tea2-context-card span{display:block}.tea2-context-card strong{font-size:13px}.tea2-context-card span{margin-top:5px;font-size:11px;line-height:1.45;color:#c6ddec}
.tea2-context-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}
.tea2-context-actions .tea2-side-item{grid-template-columns:28px minmax(0,1fr)!important}
.tea2-context-actions .tea2-side-chev{display:none}
.workspace-tabs{height:31px!important;gap:5px!important}
.workspace-tab{height:31px!important;font-size:11px!important;border-color:rgba(171,226,255,.34)!important;background:rgba(220,243,255,.12)!important;backdrop-filter:blur(16px)!important}
.workspace-tab.active{background:linear-gradient(180deg,rgba(73,181,255,.78),rgba(17,103,181,.72))!important}
.tea2-footer{padding:7px 8px 0!important}
.tea2-taskbar,.status-pill,.james-pill,.process-btn{
 border-color:rgba(176,227,255,.32)!important;background:linear-gradient(145deg,rgba(230,247,255,.14),rgba(18,79,132,.18))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 22px rgba(0,28,65,.13)!important;backdrop-filter:blur(20px) saturate(150%)!important;
}
body.myoffice-v4 input,body.myoffice-v4 select,body.myoffice-v4 textarea{
 border-color:rgba(156,217,255,.34)!important;background:rgba(2,43,80,.54)!important;color:#f7fbff!important;border-radius:10px!important;
}
body.myoffice-v4 input:focus,body.myoffice-v4 select:focus,body.myoffice-v4 textarea:focus{outline:2px solid rgba(97,211,255,.36)!important;outline-offset:1px}
body.myoffice-v4 .workspace-view,body.myoffice-v4 .workspace-view button,body.myoffice-v4 .workspace-view input,body.myoffice-v4 .workspace-view select,body.myoffice-v4 .workspace-view textarea{font-size:max(11px,1em)}
.myoffice-v4-search{
 position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:25;width:min(470px,38vw);height:34px;display:flex;align-items:center;gap:8px;padding:0 12px;
 border:1px solid rgba(184,231,255,.4);border-radius:13px;background:linear-gradient(145deg,rgba(234,249,255,.18),rgba(24,93,149,.18));color:#eaf8ff;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.23),0 8px 22px rgba(0,30,66,.13);backdrop-filter:blur(22px);cursor:pointer;
}
.myoffice-v4-search svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}.myoffice-v4-search span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
.myoffice-v4-search kbd{margin-left:auto;border:1px solid rgba(194,232,255,.22);border-radius:7px;padding:2px 6px;background:rgba(4,43,79,.34);color:#c9e8fa;font-size:9px}
@media(max-width:1180px){
 .myoffice-v4-search{display:none}.tea2-shell{padding-left:14px!important;padding-right:14px!important}.side-left{left:18px!important}.side-right{right:18px!important}
}
@media(max-width:760px){
 .tea2-shell{padding:6px!important;grid-template-rows:auto 70vh auto!important}.tea2-header{margin:0!important;border-radius:0 0 18px 18px!important;padding:8px 8px 5px!important}
 .side-rail{top:136px!important;bottom:118px!important}.side-left{left:2px!important}.side-right{right:2px!important}.side-rail.expanded{width:min(292px,88vw)!important}
 .main-screen{margin-left:36px!important;margin-right:36px!important;border-radius:18px!important}
 #leftRail.expanded~.main-screen{margin-left:36px!important}#rightRail.expanded~.main-screen{margin-right:36px!important}
 .tea2-side-ui{width:min(282px,86vw)!important}.myoffice-name{font-size:29px!important}.myoffice-sub{font-size:8px!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}