*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#23344c;background:linear-gradient(135deg,#bfe8ff 0,#edf8ff 46%,#e8e7ff 100%);overflow:hidden}.ambient{position:fixed;border-radius:50%;filter:blur(85px);opacity:.34;pointer-events:none}.a1{width:560px;height:560px;background:#62c8ff;left:-210px;top:-180px}.a2{width:620px;height:620px;background:#b99cff;right:-240px;bottom:-270px}.shell{position:relative;display:grid;grid-template-columns:292px minmax(0,1fr);height:100vh;padding:14px;gap:18px}aside,.workspace{border:1px solid rgba(255,255,255,.76);box-shadow:0 22px 65px rgba(65,104,139,.12);backdrop-filter:blur(28px)}aside{height:calc(100vh - 28px);border-radius:28px;background:rgba(235,247,255,.72);display:flex;flex-direction:column;overflow:hidden;padding:24px 18px 16px}.brand{display:flex;align-items:center;gap:12px;padding:4px 12px 24px;border-bottom:1px solid rgba(109,154,191,.14);flex:0 0 auto}.logo{font-size:34px}.brand b{display:block;font-size:20px;letter-spacing:-.45px}.brand small,.profile small,.version small{display:block;color:#8aa1b7;font-size:10px}.nav-caption{font-size:10px;letter-spacing:.15em;color:#9aafc1;padding:22px 13px 8px;flex:0 0 auto}nav{overflow-y:auto;overflow-x:hidden;min-height:0;padding-right:3px;scrollbar-width:thin;scrollbar-color:#c7dbe9 transparent}nav::-webkit-scrollbar{width:4px}nav::-webkit-scrollbar-thumb{background:#c7dbe9;border-radius:9px}.nav-group{margin:4px 0}.nav-main,.nav-sub{width:100%;border:0;background:transparent;text-align:left;cursor:pointer;color:#5c748c;transition:.18s}.nav-main{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:13px;font-weight:700;font-size:13px}.nav-main .chev{margin-left:auto;font-size:10px}.nav-main:hover{background:rgba(255,255,255,.52);color:#286bc4}.nav-main.active{background:linear-gradient(100deg,rgba(95,196,255,.30),rgba(216,129,255,.25));color:#185ca8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.72)}.subs{margin:4px 0 7px 20px;padding-left:12px;border-left:1px solid #c9dfef}.nav-sub{padding:7px 9px;font-size:11px;border-radius:8px}.nav-sub:hover,.nav-sub.active{color:#246bc3;background:rgba(255,255,255,.52)}.version{flex:0 0 auto;margin-top:12px;display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:15px;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.82)}.version b{font-size:11px}.online-dot{width:9px;height:9px;border-radius:50%;background:#2bc47c;box-shadow:0 0 0 5px rgba(43,196,124,.11)}.workspace{height:calc(100vh - 28px);min-width:0;border-radius:28px;overflow:hidden;background:rgba(244,250,255,.55);display:flex;flex-direction:column}header{height:82px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid rgba(125,164,195,.13);background:rgba(255,255,255,.48)}.search{width:min(650px,55vw);padding:13px 18px;border:1px solid rgba(159,196,223,.42);border-radius:15px;background:rgba(255,255,255,.72);color:#6d8297;box-shadow:inset 0 1px 0 #fff}.search span{margin-left:7px;color:#8da2b6}.top{display:flex;align-items:center;gap:11px}.icon-btn{position:relative;border:0;background:transparent;font-size:18px;cursor:pointer}.icon-btn i{position:absolute;right:-4px;top:-7px;background:#ff5151;color:#fff;font-style:normal;font-size:8px;border-radius:8px;padding:2px 4px}.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,#d7ebff,#f0f5ff);color:#3679ca;font-weight:800}.profile b{font-size:12px}.profile small{margin-top:2px}main{padding:30px 34px 36px;overflow:auto;min-height:0}.welcome{display:flex;justify-content:space-between;align-items:flex-end}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;color:#7f96ac;text-transform:uppercase}.title{font-size:31px;margin:6px 0 4px;letter-spacing:-.8px}.muted{color:#8499ad;font-size:13px}.datebox{padding:11px 15px;border-radius:14px;background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.9);font-size:11px;color:#6d8398}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:22px 0}.card,.panel{background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.92);border-radius:20px;box-shadow:0 14px 36px rgba(68,113,151,.075),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(24px)}.card{padding:19px 20px;min-height:120px}.card-head{display:flex;justify-content:space-between;align-items:center;color:#73899d;font-size:10px;text-transform:uppercase;letter-spacing:.03em}.mini-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:rgba(214,237,255,.78);font-size:15px}.card strong{display:block;font-size:27px;margin:9px 0 3px}.trend{font-size:10px;color:#94a6b7}.grid2{display:grid;grid-template-columns:1.55fr .75fr;gap:18px}.panel{padding:21px;min-height:270px}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.panel-title b{font-size:13px}.panel-title span{font-size:10px;color:#8498aa}.activity{border-top:1px solid rgba(142,176,202,.15)}.activity-row{display:grid;grid-template-columns:42px 1fr auto;gap:11px;align-items:center;padding:14px 3px;border-bottom:1px solid rgba(142,176,202,.13)}.activity-icon{width:36px;height:36px;border-radius:12px;background:#e9f5ff;display:grid;place-items:center}.activity-row b{display:block;font-size:11px}.activity-row small{color:#91a4b5;font-size:10px}.badge{padding:5px 9px;border-radius:9px;background:#eaf8f1;color:#34a16c;font-size:9px}.status{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid rgba(142,176,202,.15);font-size:11px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#55bf8a;margin-right:7px}.status b{font-size:10px}.quick{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.btn{border:0;border-radius:11px;padding:10px 12px;cursor:pointer;font-weight:650}.btn.primary{background:linear-gradient(135deg,#3e91f0,#697df2);color:#fff;box-shadow:0 8px 18px rgba(65,130,224,.22)}.btn.secondary{background:rgba(236,245,252,.9);color:#526a81}.module-card{margin-top:22px}.placeholder{display:grid;place-items:center;height:180px;color:#9badbd;border:1px dashed #d4e5f2;border-radius:15px;margin-top:14px;background:rgba(255,255,255,.26)}.toast{position:fixed;right:34px;top:104px;min-width:310px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.94);border:1px solid #dfeaf4;box-shadow:0 16px 40px rgba(41,74,108,.18);z-index:30;backdrop-filter:blur(20px)}.modal-backdrop{position:fixed;inset:0;background:rgba(31,50,70,.22);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:40}.modal{width:min(440px,90vw);padding:22px;background:rgba(255,255,255,.97);border-radius:19px;box-shadow:0 24px 70px rgba(29,53,78,.22)}.actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}@media(max-width:1050px){.shell{grid-template-columns:82px 1fr;padding:10px;gap:10px}.workspace,aside{height:calc(100vh - 20px)}.brand div,.nav-main .label,.nav-main .chev,.subs,.nav-caption,.version div{display:none}aside{padding:18px 9px}.brand{justify-content:center;padding:0 0 18px}.nav-main{justify-content:center}.version{justify-content:center}.cards{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}@media(max-width:650px){body{overflow:auto}.shell{display:block;padding:0;height:auto}.workspace{height:auto;min-height:100vh;border-radius:0}aside{display:none}header{padding:0 15px;height:66px}.search{width:60%;font-size:12px}.profile{display:none}main{padding:18px 14px}.cards{grid-template-columns:1fr 1fr;gap:10px}.card{min-height:102px;padding:14px}.datebox{display:none}}

/* v1.1.1 Interaction & Visual Polish */
body{font-family:"Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,system-ui,sans-serif;font-weight:450;letter-spacing:-.008em}
.brand b{font-family:"Segoe UI Variable Display","Segoe UI",sans-serif;font-weight:720;letter-spacing:-.6px}.title{font-family:"Segoe UI Variable Display","Segoe UI",sans-serif;font-weight:720;letter-spacing:-1.15px}.nav-main{font-weight:650;position:relative;overflow:hidden;transform:translateZ(0)}
.nav-main,.nav-sub,.btn,.icon-btn,.card,.mini-icon,.datebox,.search{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease}
.nav-main:hover{transform:translateX(3px);box-shadow:0 7px 20px rgba(61,126,183,.08)}.nav-main:active,.nav-sub:active{transform:scale(.975)}
.nav-icon{width:18px;height:18px;display:grid;place-items:center;flex:0 0 18px}.nav-icon svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chev{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;transition:transform .24s cubic-bezier(.2,.8,.2,1),background .18s ease!important}.nav-main:hover .chev{background:rgba(255,255,255,.58)}.nav-group.open .chev{transform:rotate(180deg)}
.subs{display:grid!important;grid-template-rows:0fr;opacity:0;margin-top:0;margin-bottom:0;transition:grid-template-rows .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease,margin .25s ease}.subs-inner{overflow:hidden}.nav-group.open .subs{grid-template-rows:1fr;opacity:1;margin-top:4px;margin-bottom:7px}.nav-sub{transform-origin:left center}.nav-sub:hover{transform:translateX(4px);background:rgba(255,255,255,.66)}
.btn{position:relative;overflow:hidden;font-family:inherit;font-weight:650;letter-spacing:-.01em}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.965)}.btn.primary:hover{box-shadow:0 12px 28px rgba(65,130,224,.32);filter:saturate(1.08)}.btn.secondary:hover{background:#fff;box-shadow:0 9px 22px rgba(71,109,145,.11)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.28) 48%,transparent 76%);transform:translateX(-130%);transition:transform .5s ease}.btn:hover::after{transform:translateX(130%)}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(68,113,151,.12),inset 0 1px 0 rgba(255,255,255,.95)}.card:hover .mini-icon{transform:scale(1.08) rotate(-3deg)}
.search:focus-within,.search:hover{background:rgba(255,255,255,.9);border-color:rgba(101,168,221,.5);box-shadow:0 8px 24px rgba(74,125,169,.08),inset 0 1px 0 #fff}.icon-btn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center}.icon-btn:hover{background:rgba(255,255,255,.75);transform:translateY(-1px)}.icon-btn:active{transform:scale(.92)}
.bell-shape{font-size:18px;transform:rotate(45deg);display:block;color:#e6a42c}.icon-btn:hover .bell-shape{animation:ring .45s ease}@keyframes ring{0%,100%{transform:rotate(45deg)}25%{transform:rotate(31deg)}70%{transform:rotate(58deg)}}
.toast{animation:toastIn .28s cubic-bezier(.2,.9,.2,1)}@keyframes toastIn{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}.modal-backdrop{animation:fadeIn .18s ease}.modal{animation:modalIn .25s cubic-bezier(.2,.9,.2,1)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* v1.1.2 Header + sidebar polish */
.brand{padding-bottom:17px}.sidebar-clock{display:flex;align-items:center;gap:10px;padding:12px 13px 14px;border-bottom:1px solid rgba(109,154,191,.14);color:#2d4560}.clock-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.58);color:#448fea;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}.clock-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sidebar-clock strong{display:block;font-size:12px;letter-spacing:.01em}.sidebar-clock small{display:block;color:#849bb0;font-size:9px;line-height:1.45}.nav-caption{padding-top:16px}.nav-main{padding-right:13px}.chev{display:none!important}.search{width:min(480px,43vw);height:46px;padding:0 14px;display:flex;align-items:center;gap:9px;border-radius:14px}.search-icon{width:17px;height:17px;display:grid;place-items:center;color:#6788a5}.search-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.search span:nth-child(2){margin-left:0}.search kbd{margin-left:auto;border:0;border-radius:8px;padding:5px 8px;background:rgba(226,240,251,.82);color:#8298ac;font:600 9px/1 inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}.bell-shape{display:grid;place-items:center;color:#526ef4;transform:none}.bell-shape svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-btn:hover .bell-shape{animation:ringBell .45s ease}@keyframes ringBell{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}70%{transform:rotate(10deg)}}.icon-btn i{right:-2px;top:-5px;min-width:16px;height:16px;display:grid;place-items:center;padding:0;border-radius:999px;font-size:8px;box-shadow:0 0 0 2px rgba(246,251,255,.95)}
@media(max-width:1050px){.sidebar-clock{justify-content:center;padding:12px 0}.sidebar-clock>div{display:none}.search{width:min(430px,52vw)}}
@media(max-width:650px){.search{width:58%;height:42px}.search kbd{display:none}}

/* v1.1.3 Visual Match */
.nav-icon{color:#2f76d0}.nav-main:hover .nav-icon,.nav-main.active .nav-icon{color:#1976e9}.nav-icon svg{stroke-width:1.9}
.cards{gap:20px}.stat-card{min-height:142px;padding:20px 22px}.stat-top{display:flex;align-items:center;gap:13px}.stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.025em;color:#6f859a}.stat-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}.stat-icon svg,.activity-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.stat-icon.blue{background:#e4f3ff;color:#1787ee}.stat-icon.green{background:#dff8ef;color:#16ad72}.stat-icon.pink{background:#ffe4ee;color:#f13b75}.stat-icon.purple{background:#eee8ff;color:#6f50ee}.stat-body{display:flex;align-items:flex-end;justify-content:space-between;margin-top:10px}.stat-body>div:first-child{display:flex;flex-direction:column}.stat-card strong{font-size:30px;line-height:1;margin:0 0 9px;color:#1f334c}.stat-visual{width:88px;display:flex;flex-direction:column;align-items:flex-end}.spark{width:84px;height:34px;overflow:visible}.spark path{fill:none;stroke-width:3;stroke-linecap:round}.spark.blue path{stroke:#91c8ff}.spark.green path{stroke:#82dfc1}.spark.pink path{stroke:#ff9cbc}.spark.purple path{stroke:#b5a0ff}.change{font-size:9px;font-weight:800;margin-top:2px}.change.blue{color:#258be5}.change.green{color:#19ad73}.change.pink{color:#ec4b7d}.change.purple{color:#765be8}.stat-visual small{font-size:8px;color:#8fa2b4;margin-top:1px}.production-pill{display:flex;align-items:center;gap:7px}.production-pill i,.live-label i{width:7px;height:7px;border-radius:50%;background:#1fc47a;box-shadow:0 0 0 4px rgba(31,196,122,.08)}
.panel{padding:22px 24px}.panel-title b{font-size:14px}.linkish{color:#247ee8!important;font-weight:650;cursor:pointer}.activity-row{grid-template-columns:48px 1fr auto;padding:14px 4px}.activity-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center}.activity-icon.blue{background:#e5f3ff;color:#1686ee}.activity-icon.purple{background:#eee8ff;color:#704fee}.activity-icon.cyan{background:#e2f5ff;color:#188ed4}.activity-row b{font-size:11.5px}.activity-row small{display:block;margin-top:4px}.badge{font-weight:700;padding:6px 11px;border-radius:999px}.badge.blue{background:#e4f3ff;color:#1686ee}.badge.green{background:#e1f8ed;color:#14a968}.badge.purple{background:#eee8ff;color:#704fee}.live-label{display:flex;align-items:center;gap:7px}.status-panel{min-width:0}.status{padding:14px 0}.status-pill{padding:5px 9px;border-radius:999px;font-size:9px!important}.status-pill.online{background:#dff8ed;color:#10a868}.status-pill.ready{background:#e4f2ff;color:#197be0}.status-pill.offline{background:#ffe6ee;color:#ee3f70}.quick{gap:12px;margin-top:18px}.btn{min-height:44px;border-radius:13px;font-size:11px}.btn.primary{background:linear-gradient(120deg,#4a51f5,#19aef2);box-shadow:0 10px 24px rgba(57,102,236,.25)}.btn.secondary{background:linear-gradient(135deg,#eef6fd,#e7f1fb);color:#304b68;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}.btn span{margin-right:6px}.version small{font-size:9px}

/* v1.1.4 viewport cleanup */
@media (min-width:651px){
  main.dashboard-page{overflow:hidden;padding-top:24px;padding-bottom:22px;}
  main.dashboard-page .cards{margin:18px 0 16px;}
  main.dashboard-page .stat-card{min-height:132px;padding-top:17px;padding-bottom:17px;}
  main.dashboard-page .panel{min-height:0;padding-top:18px;padding-bottom:18px;}
  main.dashboard-page .activity-row{padding-top:11px;padding-bottom:11px;}
  main.dashboard-page .status{padding-top:11px;padding-bottom:11px;}
  main.dashboard-page .quick{margin-top:13px;}
}

/* RainbowOS v1.2.0 Punch Card */
.punch-wrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.85fr);gap:18px;align-items:start}.punch-card{padding:20px}.punch-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.staff-chip{display:flex;align-items:center;gap:12px}.staff-avatar{width:46px;height:46px;border-radius:16px;background:linear-gradient(145deg,#5f8cff,#8d72ff);display:grid;place-items:center;color:#fff;font-weight:800;box-shadow:0 10px 22px rgba(91,116,240,.24)}.staff-meta b{display:block;font-size:15px}.staff-meta small{color:#7e8ba8}.shift-pill{padding:8px 11px;border-radius:999px;background:#edf4ff;color:#5872bd;font-size:12px;font-weight:800}.punch-clock{text-align:center;padding:12px 0 16px}.punch-clock .big-time{font-size:36px;line-height:1;font-weight:800;letter-spacing:-1px;color:#233354}.punch-clock .shift-line{margin-top:8px;color:#8390aa;font-size:12px}.work-state{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 14px;width:max-content;padding:7px 12px;border-radius:999px;background:#eff5ff;color:#647493;font-size:12px;font-weight:800}.work-state.working{background:#e9fbf2;color:#2a9b67}.work-state.breaking{background:#fff4e7;color:#c47a25}.main-punch{width:100%;min-height:58px;border:0;border-radius:18px;color:#fff;font-size:16px;font-weight:850;cursor:pointer;background:linear-gradient(135deg,#5d8df7,#8a72ef);box-shadow:0 14px 30px rgba(96,116,232,.25);transition:.18s transform,.18s box-shadow}.main-punch:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(96,116,232,.32)}.main-punch.end{background:linear-gradient(135deg,#ff6c86,#ef5e72)}.main-punch:disabled,.break-btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}.break-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.break-btn{border:1px solid rgba(117,143,198,.15);background:rgba(255,255,255,.76);border-radius:17px;padding:14px 10px;cursor:pointer;text-align:left;transition:.18s;box-shadow:0 8px 20px rgba(72,99,153,.06)}.break-btn:hover:not(:disabled){transform:translateY(-2px);border-color:#b9c8f3}.break-btn.active{background:linear-gradient(145deg,#fff7ed,#fff);border-color:#f4c27c}.break-name{font-weight:850;color:#2d3b5d;display:flex;align-items:center;gap:7px}.break-rule{display:block;color:#8b96ad;font-size:11px;margin-top:6px}.break-count{display:block;color:#637292;font-size:11px;margin-top:3px}.punch-rulebar{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.rule-chip{background:#f5f8ff;border:1px solid #e8eefb;border-radius:11px;padding:7px 9px;font-size:11px;color:#71809e}.timeline{padding:18px}.timeline-list{margin-top:10px}.timeline-item{display:grid;grid-template-columns:72px 16px 1fr;gap:8px;min-height:48px}.timeline-time{font-size:11px;color:#7f8ba3;padding-top:3px}.timeline-line{position:relative}.timeline-line:before{content:"";position:absolute;left:7px;top:15px;bottom:-5px;width:1px;background:#e3eaf7}.timeline-item:last-child .timeline-line:before{display:none}.timeline-dot{width:9px;height:9px;border-radius:50%;background:#6d8df4;position:absolute;left:3px;top:4px;box-shadow:0 0 0 4px #eef3ff}.timeline-text b{font-size:12px;color:#33415f}.timeline-text small{display:block;color:#94a0b6;margin-top:2px}.empty-timeline{padding:28px 10px;text-align:center;color:#9aa6bb;font-size:12px}.pc-tabs{display:flex;gap:8px;margin-bottom:14px}.pc-tab{border:1px solid #e3eafa;background:#fff;border-radius:12px;padding:9px 12px;font-weight:800;font-size:12px;color:#72809b;cursor:pointer}.pc-tab.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,#678ff2,#8977ee)}.live-table{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:12px}.live-table th{text-align:left;color:#8793aa;padding:4px 9px}.live-table td{background:rgba(255,255,255,.75);padding:10px 9px}.live-table td:first-child{border-radius:10px 0 0 10px}.live-table td:last-child{border-radius:0 10px 10px 0}.pc-settings{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.setting-box{padding:14px;border-radius:14px;background:#f8faff;border:1px solid #e9eef9}.setting-box b{display:block;font-size:12px}.setting-box span{font-size:11px;color:#8491a8}.lock-note{margin-top:12px;text-align:center;color:#c57a2a;font-size:11px;font-weight:700}.dashboard-page .punch-wrap{min-height:0}@media(max-width:1050px){.punch-wrap{grid-template-columns:1fr}.break-grid,.pc-settings{grid-template-columns:1fr 1fr 1fr}}@media(max-width:720px){.break-grid,.pc-settings{grid-template-columns:1fr}.punch-clock .big-time{font-size:30px}}

/* RainbowOS v1.2.1 Punch Card UI Match */
@media(min-width:1100px){main.punch-page{overflow:hidden;padding:18px 26px 20px}.punch-page .title{font-size:26px}.punch-page .pc-page-head{margin-bottom:8px}}
.pc-page-head{display:flex;align-items:flex-end;justify-content:space-between}.pc-tabs{margin:10px 0 12px}.pc-top-grid{display:grid;grid-template-columns:1.15fr .9fr 1.3fr;gap:12px}.pc-top-grid .panel{min-height:0;padding:14px 16px;border-radius:17px}.pc-profile .staff-chip{position:relative}.pc-profile .staff-avatar{width:54px;height:54px;border-radius:50%}.pc-profile .staff-meta b{font-size:17px}.pc-profile .staff-meta strong{display:block;font-size:12px;margin-top:3px}.pc-profile .badge{margin-left:auto}.pc-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:12px}.pc-info-grid span{font-size:9px;color:#7f90a8}.pc-info-grid b{display:block;color:#293a59;font-size:10px;margin-top:2px}.pc-time-card>span,.pc-status-card span{font-size:10px;color:#61738f}.pc-time-card .big-time{font-size:27px;font-weight:800;color:#17294a;margin:3px 0}.pc-time-card>small{font-size:9px;color:#7f91aa}.duration-box{margin-top:9px;padding:8px 10px;border-radius:13px;background:linear-gradient(135deg,#e7fbf2,#f3fff9);display:flex;align-items:center;gap:9px}.duration-box i{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#21bd70;color:#fff}.duration-box svg,.pc-event-icon svg,.pc-break-icon svg,.pc-summary svg,.pc-usage svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.duration-box span{font-size:9px}.duration-box b{display:block;color:#13a95f;font-size:18px}.duration-box small{display:block;font-size:8px;color:#77918a}.pc-status-card>div:first-child{display:flex;justify-content:space-between}.pc-status-card em{font-style:normal;font-size:9px;font-weight:700;color:#2c7bc8;background:#e3f2ff;padding:5px 9px;border-radius:999px}.pc-status-card h2{font-size:25px;margin:8px 0 1px;color:#6d7d94}.pc-status-card h2.green{color:#10ad61}.pc-status-card h2.orange{color:#e48827}.pc-status-card>small{font-size:9px;color:#7487a2}.pc-progress{height:8px;border-radius:99px;background:#e4edf6;margin-top:14px;overflow:hidden}.pc-progress i{display:block;height:100%;background:linear-gradient(90deg,#19bb69,#75dc9e);border-radius:inherit}.pc-progress-meta{display:flex;justify-content:space-between;margin-top:6px;font-size:9px;color:#61748f}.pc-main-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,.75fr);gap:12px;margin-top:10px}.pc-main-grid>section:first-child{min-width:0}.main-punch{min-height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:13px}.main-punch span{display:flex;flex-direction:column}.main-punch small{font-size:9px;margin-top:2px}.stop-square{width:23px;height:23px!important;background:rgba(255,255,255,.94);border-radius:5px;display:block!important;box-shadow:0 0 0 9px rgba(196,35,66,.15)}.pc-break-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:9px}.pc-break-card{min-height:122px;border:1px solid rgba(115,143,196,.12);border-radius:15px;padding:10px;text-align:center;background:rgba(255,255,255,.72);cursor:pointer;transition:.18s}.pc-break-card:hover:not(:disabled){transform:translateY(-2px)}.pc-break-card:disabled{opacity:.42;cursor:not-allowed}.pc-break-card.smoke{background:linear-gradient(145deg,#eff8ff,#e7f3ff)}.pc-break-card.toilet{background:linear-gradient(145deg,#f7f0ff,#efe5ff)}.pc-break-card.eat{background:linear-gradient(145deg,#fff8ec,#fff0dc)}.pc-break-icon{width:27px;height:27px;display:grid;place-items:center;margin:0 auto 4px}.smoke .pc-break-icon,.pc-event-icon.smoke,.pc-usage i.smoke{color:#167eea}.toilet .pc-break-icon,.pc-event-icon.toilet,.pc-usage i.toilet{color:#762be8}.eat .pc-break-icon,.pc-event-icon.eat,.pc-usage i.eat{color:#ef8613}.pc-break-card b{display:block;font-size:11px}.pc-break-card small{display:block;font-size:8.5px;line-height:1.35;color:#70829e;margin-top:4px}.pc-break-card strong{display:block;font-size:10px;margin-top:5px;color:#315277}.pc-rules{margin-top:8px;padding:9px 12px;border-radius:13px;background:#eaf6ff;color:#43617f}.pc-rules>b{font-size:10px;color:#146fc9}.pc-rules>div{display:grid;grid-template-columns:1fr 1fr;gap:3px 20px;margin-top:4px}.pc-rules span{font-size:8px}.pc-timeline{padding:14px 16px;min-height:0}.pc-timeline .panel-title{margin-bottom:7px}.pc-timeline-row{display:grid;grid-template-columns:62px 28px 1fr;align-items:center;min-height:38px;border-top:1px solid rgba(141,171,200,.13)}.pc-timeline-row time{font-size:9px;color:#6d82a1}.pc-event-icon{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#edf5ff;color:#28aa69}.pc-event-icon svg{width:14px;height:14px}.pc-timeline-row b{display:block;font-size:9.5px}.pc-timeline-row small{font-size:8px;color:#8797ad}.pc-bottom-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin-top:10px}.pc-bottom-grid .panel{min-height:0;padding:11px 14px}.pc-bottom-grid .panel-title{margin-bottom:6px}.pc-summary,.pc-usage{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.pc-summary>div,.pc-usage>div{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:11px;background:rgba(246,250,255,.85);border:1px solid #edf2fa}.pc-summary i,.pc-usage i{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;font-style:normal}.pc-summary i.green{background:#e2f9ec;color:#16ad67}.pc-summary i.blue{background:#e4f2ff;color:#197fe5}.pc-summary i.purple{background:#eee8ff;color:#714fe9}.pc-summary span,.pc-usage span{font-size:8px;color:#6f819c}.pc-summary b,.pc-usage b{display:block;color:#243755;font-size:10px;margin-top:2px}.pc-usage{grid-template-columns:repeat(3,1fr)}.pc-usage i{background:#edf5ff}.pc-usage em{display:block;width:100%;height:5px;background:#e1eaf4;border-radius:99px;margin-top:4px;overflow:hidden}.pc-usage u{display:block;height:100%;background:#5b7df2;border-radius:inherit;text-decoration:none}.punch-page .pc-tab{padding:7px 12px}.punch-page .datebox{padding:8px 12px}
@media(max-width:1200px){main.punch-page{overflow:auto}.pc-top-grid{grid-template-columns:1fr 1fr}.pc-status-card{grid-column:1/-1}.pc-main-grid{grid-template-columns:1fr}.pc-bottom-grid{grid-template-columns:1fr}}

/* RainbowOS v1.2.2 Punch Card Fit Fix
   Keep the full punch workspace visible on common desktop heights.
   Do not clip the bottom summary; use scrolling only as a last-resort on short screens. */
@media (min-width:1201px){
  main.punch-page{padding:12px 22px 14px;overflow:hidden}
  .punch-page .pc-page-head{margin-bottom:3px;align-items:center}
  .punch-page .title{font-size:23px;margin:3px 0 1px;line-height:1.05}
  .punch-page .muted{font-size:10px}
  .punch-page .pc-tabs{margin:5px 0 7px}
  .punch-page .pc-tab{padding:5px 10px;font-size:10px;border-radius:10px}
  .punch-page .datebox{padding:6px 10px;font-size:9px}
  .pc-top-grid{gap:8px}
  .pc-top-grid .panel{padding:9px 12px;border-radius:14px}
  .pc-profile .staff-avatar{width:42px;height:42px}
  .pc-profile .staff-meta b{font-size:14px}
  .pc-profile .staff-meta strong{font-size:10px}
  .pc-info-grid{margin-top:7px;gap:4px 12px}
  .pc-time-card .big-time{font-size:22px;margin:1px 0}
  .duration-box{margin-top:5px;padding:5px 8px}
  .duration-box i{width:25px;height:25px}
  .duration-box b{font-size:15px}
  .pc-status-card h2{font-size:20px;margin:4px 0 0}
  .pc-progress{margin-top:8px;height:6px}
  .pc-progress-meta{margin-top:3px}
  .pc-main-grid{gap:8px;margin-top:7px}
  .main-punch{min-height:48px;border-radius:14px;font-size:14px}
  .stop-square{width:18px;height:18px!important;box-shadow:0 0 0 7px rgba(196,35,66,.13)}
  .pc-break-grid{gap:8px;margin-top:6px}
  .pc-break-card{min-height:92px;padding:7px 8px;border-radius:13px}
  .pc-break-icon{width:22px;height:22px;margin-bottom:2px}
  .pc-break-icon svg{width:17px;height:17px}
  .pc-break-card b{font-size:10px}
  .pc-break-card small{font-size:7.5px;margin-top:2px;line-height:1.25}
  .pc-break-card strong{font-size:9px;margin-top:2px}
  .pc-rules{margin-top:5px;padding:6px 9px;border-radius:11px}
  .pc-rules>div{gap:1px 14px;margin-top:2px}
  .pc-rules span{font-size:7px;line-height:1.2}
  .pc-timeline{padding:9px 12px}
  .pc-timeline .panel-title{margin-bottom:3px}
  .pc-timeline-row{min-height:29px;grid-template-columns:54px 24px 1fr}
  .pc-event-icon{width:20px;height:20px}
  .pc-event-icon svg{width:12px;height:12px}
  .pc-timeline-row b{font-size:8.5px}
  .pc-timeline-row small,.pc-timeline-row time{font-size:7.5px}
  .pc-bottom-grid{gap:8px;margin-top:6px}
  .pc-bottom-grid .panel{padding:7px 10px;border-radius:14px}
  .pc-bottom-grid .panel-title{margin-bottom:3px}
  .pc-summary,.pc-usage{gap:5px}
  .pc-summary>div,.pc-usage>div{padding:4px 6px;gap:5px;border-radius:9px}
  .pc-summary i,.pc-usage i{width:22px;height:22px;border-radius:7px}
  .pc-summary svg,.pc-usage svg{width:15px;height:15px}
  .pc-summary span,.pc-usage span{font-size:7px}
  .pc-summary b,.pc-usage b{font-size:9px;margin-top:1px}
  .pc-usage em{height:3px;margin-top:2px}
}
@media (min-width:1201px) and (max-height:760px){
  main.punch-page{overflow-y:auto;overflow-x:hidden}
}

/* v1.2.3 Active Break Timer Fix */
.pc-break-card b{font-size:14px;font-weight:850;line-height:1.15}
.pc-break-card.active b{font-size:15px}
.pc-break-card.active strong{font-size:12px;font-weight:850}
.pc-active-break-time{font-size:25px;font-weight:900;letter-spacing:-.5px;color:#e48827;margin:2px 0 1px}
.pc-break-limit{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:7px;border-top:1px solid rgba(130,156,188,.16);font-size:9px;color:#70829e}
.pc-break-limit b{color:#315277}
@media(max-height:850px) and (min-width:900px){.pc-break-card b{font-size:12px}.pc-break-card.active b{font-size:13px}.pc-break-card.active strong{font-size:11px}.pc-active-break-time{font-size:21px}.pc-break-limit{margin-top:5px;padding-top:4px}}
/* v1.2.4 Punch Card pixel-match refinements */
.pc-rules{display:none!important}
.pc-break-card b{font-size:16px!important;line-height:1.15!important;font-weight:750!important;letter-spacing:-.25px!important}
.pc-break-card strong{font-size:14px!important;line-height:1.2!important;font-weight:750!important}
.pc-break-card small{font-size:11px!important;line-height:1.3!important}
.duration-box.paused{background:linear-gradient(135deg,#fff0f2,#ffe7eb)!important;border-color:#ffd4dc!important;position:relative}
.duration-box.paused i{background:#ff4664!important;color:#fff!important}
.duration-box.paused span>b{color:#e92f51!important}
.duration-box.paused em{margin-left:auto;padding:7px 10px;border-radius:10px;background:#ffdce3;color:#e92f51;font-size:10px;font-style:normal;font-weight:800;letter-spacing:.4px}
.pc-main-grid>section:first-child{display:flex;flex-direction:column;gap:10px}
.pc-break-grid{margin-bottom:0!important}
.pc-bottom-grid{margin-top:10px!important}


/* RainbowOS v1.2.5 — Punch Card No Scroll / Exact Layout Fix */
@media (min-width:1201px){
  main.punch-page{
    height:calc(100vh - 110px);
    min-height:0;
    overflow:hidden!important;
    padding:10px 20px 10px!important;
  }
  .punch-page .pc-page-head{height:52px;margin:0!important;align-items:center}
  .punch-page .title{font-size:22px!important;margin:2px 0 0!important}
  .punch-page .muted{font-size:9px!important}
  .punch-page .pc-tabs{height:29px;margin:3px 0 6px!important}
  .punch-page .pc-tab{padding:5px 10px!important}
  .pc-top-grid{height:142px;gap:8px!important}
  .pc-top-grid .panel{height:142px;padding:9px 12px!important;overflow:hidden}
  .pc-main-grid{height:188px;grid-template-columns:minmax(0,1.8fr) minmax(300px,.75fr);gap:8px!important;margin-top:7px!important;align-items:stretch}
  .pc-main-grid>section:first-child{height:188px;gap:7px!important}
  .main-punch{height:48px;min-height:48px!important;flex:0 0 48px}
  .pc-break-grid{height:133px;min-height:0;gap:8px!important;margin:0!important}
  .pc-break-card{height:133px;min-height:0!important;padding:8px!important;overflow:hidden}
  .pc-break-icon{height:24px;margin-bottom:2px!important}
  .pc-break-card b{font-size:15px!important}
  .pc-break-card small{font-size:10px!important;line-height:1.2!important;margin-top:3px!important}
  .pc-break-card strong{font-size:13px!important;margin-top:4px!important}
  .pc-timeline{height:188px!important;min-height:188px!important;max-height:188px!important;padding:8px 12px!important;overflow:hidden!important}
  .pc-timeline .panel-title{height:20px;margin:0 0 2px!important}
  .pc-timeline-row{min-height:30px!important;height:30px!important;grid-template-columns:54px 24px 1fr!important}
  .pc-timeline-row time,.pc-timeline-row small{font-size:7px!important}
  .pc-timeline-row b{font-size:8px!important}
  .pc-bottom-grid{height:76px;gap:8px!important;margin-top:7px!important}
  .pc-bottom-grid .panel{height:76px;min-height:0!important;padding:7px 10px!important;overflow:hidden}
  .pc-bottom-grid .panel-title{height:17px;margin:0 0 3px!important}
  .pc-summary>div,.pc-usage>div{height:39px;padding:4px 6px!important}
  .pc-summary i,.pc-usage i{width:22px!important;height:22px!important}
  .pc-summary span,.pc-usage span{font-size:7px!important}
  .pc-summary b,.pc-usage b{font-size:9px!important}
}
@media (min-width:1201px) and (max-height:760px){
  main.punch-page{overflow:hidden!important;padding-top:7px!important;padding-bottom:7px!important}
  .punch-page .pc-page-head{height:46px}
  .pc-top-grid,.pc-top-grid .panel{height:132px}
  .pc-main-grid,.pc-main-grid>section:first-child,.pc-timeline{height:176px!important;min-height:176px!important;max-height:176px!important}
  .pc-break-grid,.pc-break-card{height:121px!important}
  .pc-bottom-grid,.pc-bottom-grid .panel{height:70px!important}
  .pc-summary>div,.pc-usage>div{height:34px}
}

/* RainbowOS v1.2.6 — Spacious Punch Card + sidebar motto */
.sidebar-motto{
  position:relative;margin:14px 16px 10px;height:142px;min-height:142px;border-radius:16px;overflow:hidden;
  padding:22px 18px;background:
    radial-gradient(circle at 18% 12%,rgba(119,198,255,.72),transparent 46%),
    radial-gradient(circle at 74% 78%,rgba(255,123,183,.68),transparent 52%),
    linear-gradient(145deg,#78baff 0%,#b28fff 42%,#ff9cc9 72%,#ffd18a 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 10px 24px rgba(82,117,177,.10);color:#fff;
}
.sidebar-motto span{position:relative;z-index:2;display:block;font:italic 700 18px/1.08 "Segoe Script","Brush Script MT",cursive;text-shadow:0 1px 2px rgba(79,82,151,.16);transform:rotate(-5deg)}
.sidebar-motto span:nth-child(2){margin-left:13px}.sidebar-motto span:nth-child(3){margin-left:3px}.sidebar-motto span:nth-child(4){margin-left:19px}
.motto-rainbow{position:absolute;border-radius:50%;border-style:solid;border-left-color:transparent!important;border-bottom-color:transparent!important;transform:rotate(-45deg);right:-52px;bottom:-55px}
.motto-rainbow.r1{width:145px;height:145px;border-width:13px;border-color:#ff526d}.motto-rainbow.r2{width:119px;height:119px;right:-39px;bottom:-42px;border-width:12px;border-color:#ff9b38}.motto-rainbow.r3{width:94px;height:94px;right:-27px;bottom:-30px;border-width:11px;border-color:#ffd948}.motto-rainbow.r4{width:70px;height:70px;right:-15px;bottom:-18px;border-width:10px;border-color:#58c97b}
aside{display:flex;flex-direction:column}.nav-caption{flex:0 0 auto}#nav{flex:1 1 auto;min-height:0}.sidebar-motto{flex:0 0 auto}.version{flex:0 0 auto}

@media (min-width:1201px){
  main.punch-page{height:calc(100vh - 110px);overflow:hidden!important;padding:10px 20px 10px!important}
  .punch-page .pc-page-head{height:58px!important}
  .punch-page .title{font-size:26px!important;line-height:1.05!important}
  .punch-page .muted{font-size:10px!important}
  .punch-page .pc-tabs{height:34px!important;margin:4px 0 8px!important}
  .punch-page .pc-tab{padding:7px 12px!important;font-size:11px!important}
  .pc-top-grid{height:164px!important;gap:10px!important}
  .pc-top-grid .panel{height:164px!important;padding:12px 15px!important}
  .pc-profile .staff-avatar{width:52px!important;height:52px!important}.pc-profile .staff-meta b{font-size:16px!important}
  .pc-info-grid{margin-top:10px!important;gap:7px 18px!important}.pc-info-grid span{font-size:9px!important}.pc-info-grid b{font-size:10px!important}
  .pc-time-card .big-time{font-size:28px!important}.duration-box{margin-top:8px!important;padding:9px 10px!important}.duration-box b{font-size:18px!important}
  .pc-status-card h2{font-size:25px!important;margin:8px 0 2px!important}.pc-progress{margin-top:12px!important}
  .pc-main-grid{height:238px!important;gap:10px!important;margin-top:9px!important;grid-template-columns:minmax(0,1.8fr) minmax(330px,.76fr)!important}
  .pc-main-grid>section:first-child{height:238px!important;display:flex!important;flex-direction:column!important;gap:10px!important}
  .main-punch{height:58px!important;min-height:58px!important;flex:0 0 58px!important;font-size:16px!important}
  .pc-break-grid{height:170px!important;gap:10px!important;margin:0!important;flex:1 1 auto!important}
  .pc-break-card{height:170px!important;min-height:170px!important;padding:13px 10px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}
  .pc-break-icon{height:30px!important;margin-bottom:5px!important}.pc-break-icon svg{width:25px!important;height:25px!important}
  .pc-break-card b{font-size:17px!important}.pc-break-card small{font-size:11px!important;line-height:1.35!important;margin-top:5px!important}.pc-break-card strong{font-size:14px!important;margin-top:7px!important}
  .pc-timeline{height:238px!important;min-height:238px!important;max-height:238px!important;padding:12px 15px!important}
  .pc-timeline .panel-title{height:25px!important;margin:0 0 5px!important}.pc-timeline .panel-title b{font-size:15px!important}
  .pc-timeline-row{min-height:38px!important;height:38px!important;grid-template-columns:60px 28px 1fr!important;align-items:center!important}
  .pc-timeline-row time{font-size:8px!important}.pc-timeline-row b{font-size:10px!important}.pc-timeline-row small{font-size:8px!important;margin-top:1px!important}.pc-event-icon{width:25px!important;height:25px!important}
  .pc-bottom-grid{height:96px!important;gap:10px!important;margin-top:9px!important}
  .pc-bottom-grid .panel{height:96px!important;padding:10px 13px!important}.pc-bottom-grid .panel-title{height:21px!important;margin:0 0 6px!important}.pc-bottom-grid .panel-title b{font-size:14px!important}
  .pc-summary>div,.pc-usage>div{height:52px!important;padding:7px 8px!important}.pc-summary i,.pc-usage i{width:29px!important;height:29px!important}.pc-summary span,.pc-usage span{font-size:8px!important}.pc-summary b,.pc-usage b{font-size:10px!important}
}
@media (min-width:1201px) and (max-height:820px){
  .sidebar-motto{height:118px;min-height:118px;padding:15px 16px}.sidebar-motto span{font-size:15px}
  .pc-top-grid,.pc-top-grid .panel{height:154px!important}
  .pc-main-grid,.pc-main-grid>section:first-child,.pc-timeline{height:218px!important;min-height:218px!important;max-height:218px!important}
  .pc-break-grid,.pc-break-card{height:150px!important;min-height:150px!important}
  .pc-bottom-grid,.pc-bottom-grid .panel{height:90px!important}
}

/* RainbowOS v1.2.7 — Adaptive UI Framework
   Fluid desktop sizing: uses available viewport instead of fixed screenshot heights. */
:root{--ros-gap:clamp(8px,.72vw,14px);--ros-card-pad:clamp(10px,.85vw,17px)}
@media (min-width:651px){
  .shell{grid-template-columns:clamp(230px,18vw,292px) minmax(0,1fr);gap:clamp(10px,1.1vw,18px);padding:clamp(10px,.9vw,14px)}
  aside,.workspace{height:calc(100vh - clamp(20px,1.8vw,28px))}
  header{height:clamp(68px,7.4vh,82px);padding-inline:clamp(18px,2vw,32px)}
  .search{width:clamp(360px,42vw,650px)}
}
@media (min-width:1201px){
  main.punch-page{height:auto!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;padding:clamp(8px,1.05vh,13px) clamp(16px,1.55vw,25px)!important;display:flex!important;flex-direction:column!important}
  .punch-page .pc-page-head{height:auto!important;min-height:clamp(48px,6.2vh,66px)!important;flex:0 0 auto!important}
  .punch-page .title{font-size:clamp(22px,1.7vw,29px)!important}
  .punch-page .muted{font-size:clamp(9px,.72vw,12px)!important}
  .punch-page .pc-tabs{height:auto!important;min-height:clamp(29px,3.6vh,38px)!important;margin:clamp(3px,.45vh,6px) 0 clamp(5px,.7vh,9px)!important;flex:0 0 auto!important}
  .punch-page .pc-tab{padding:clamp(5px,.7vh,8px) clamp(10px,.85vw,14px)!important;font-size:clamp(10px,.72vw,12px)!important}
  .pc-top-grid{height:auto!important;min-height:0!important;flex:0 0 clamp(150px,20.5vh,205px)!important;gap:var(--ros-gap)!important}
  .pc-top-grid .panel{height:100%!important;min-height:0!important;padding:var(--ros-card-pad)!important;overflow:hidden!important}
  .pc-profile .staff-avatar{width:clamp(46px,3.4vw,58px)!important;height:clamp(46px,3.4vw,58px)!important}
  .pc-profile .staff-meta b{font-size:clamp(14px,1vw,17px)!important}
  .pc-info-grid{margin-top:clamp(7px,1vh,12px)!important;gap:clamp(5px,.75vh,9px) clamp(12px,1.2vw,20px)!important}
  .pc-info-grid span{font-size:clamp(8px,.62vw,10px)!important}.pc-info-grid b{font-size:clamp(9px,.72vw,12px)!important}
  .pc-time-card .big-time{font-size:clamp(25px,2vw,34px)!important}
  .duration-box{margin-top:clamp(6px,.8vh,10px)!important;padding:clamp(7px,.8vh,10px) clamp(9px,.7vw,12px)!important;min-height:clamp(52px,7.2vh,68px)!important;overflow:visible!important}
  .duration-box b{font-size:clamp(16px,1.35vw,22px)!important}.duration-box small{font-size:clamp(7px,.55vw,9px)!important;line-height:1.15!important}
  .pc-status-card h2{font-size:clamp(22px,1.8vw,30px)!important}.pc-progress{margin-top:clamp(8px,1.1vh,14px)!important}
  .pc-main-grid{height:auto!important;min-height:0!important;flex:1 1 auto!important;gap:var(--ros-gap)!important;margin-top:var(--ros-gap)!important;grid-template-columns:minmax(0,2.05fr) minmax(310px,.88fr)!important;align-items:stretch!important}
  .pc-main-grid>section:first-child{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;gap:var(--ros-gap)!important}
  .main-punch{height:auto!important;min-height:clamp(50px,7vh,66px)!important;flex:0 0 clamp(50px,7vh,66px)!important;font-size:clamp(14px,1.05vw,18px)!important}
  .pc-break-grid{height:auto!important;min-height:0!important;flex:1 1 auto!important;gap:var(--ros-gap)!important;margin:0!important}
  .pc-break-card{height:auto!important;min-height:0!important;padding:clamp(8px,1vh,14px)!important;overflow:hidden!important}
  .pc-break-icon{height:clamp(23px,3.2vh,32px)!important;margin-bottom:clamp(2px,.45vh,6px)!important}
  .pc-break-icon svg{width:clamp(21px,1.55vw,27px)!important;height:clamp(21px,1.55vw,27px)!important}
  .pc-break-card b{font-size:clamp(14px,1.15vw,18px)!important}.pc-break-card small{font-size:clamp(9px,.72vw,12px)!important}.pc-break-card strong{font-size:clamp(12px,.9vw,15px)!important}
  .pc-timeline{height:auto!important;min-height:0!important;max-height:none!important;padding:clamp(9px,1vh,14px)!important;overflow:hidden!important}
  .pc-timeline .panel-title{height:auto!important;min-height:clamp(20px,2.7vh,27px)!important;margin:0 0 clamp(2px,.45vh,6px)!important}.pc-timeline .panel-title b{font-size:clamp(13px,1vw,16px)!important}
  .pc-timeline-row{height:auto!important;min-height:clamp(30px,4.5vh,42px)!important;grid-template-columns:clamp(48px,4vw,64px) clamp(23px,2vw,30px) 1fr!important}
  .pc-timeline-row time{font-size:clamp(7px,.55vw,9px)!important}.pc-timeline-row b{font-size:clamp(8px,.68vw,11px)!important}.pc-timeline-row small{font-size:clamp(7px,.55vw,9px)!important}
  .pc-event-icon{width:clamp(23px,1.8vw,28px)!important;height:clamp(23px,1.8vw,28px)!important}
  .pc-bottom-grid{height:auto!important;min-height:clamp(82px,11.5vh,112px)!important;flex:0 0 clamp(82px,11.5vh,112px)!important;gap:var(--ros-gap)!important;margin-top:var(--ros-gap)!important}
  .pc-bottom-grid .panel{height:100%!important;min-height:0!important;padding:clamp(8px,.85vh,12px) clamp(10px,.8vw,14px)!important;overflow:hidden!important}
  .pc-bottom-grid .panel-title{height:auto!important;min-height:clamp(18px,2.5vh,24px)!important;margin:0 0 clamp(3px,.5vh,7px)!important}.pc-bottom-grid .panel-title b{font-size:clamp(12px,.95vw,15px)!important}
  .pc-summary>div,.pc-usage>div{height:auto!important;min-height:clamp(38px,5.8vh,55px)!important;padding:clamp(4px,.65vh,8px)!important}
  .pc-summary i,.pc-usage i{width:clamp(23px,2vw,31px)!important;height:clamp(23px,2vw,31px)!important}.pc-summary span,.pc-usage span{font-size:clamp(7px,.55vw,9px)!important}.pc-summary b,.pc-usage b{font-size:clamp(9px,.68vw,11px)!important}
  .sidebar-motto{height:clamp(100px,15vh,150px)!important;min-height:clamp(100px,15vh,150px)!important;margin:clamp(8px,1vh,14px) clamp(10px,1vw,16px)!important;padding:clamp(13px,2vh,22px) clamp(13px,1.2vw,18px)!important}
  .sidebar-motto span{font-size:clamp(14px,1.15vw,19px)!important}
}
@media (min-width:1600px){
  .pc-main-grid{grid-template-columns:minmax(0,2.15fr) minmax(360px,.82fr)!important}
  .pc-top-grid{grid-template-columns:1.08fr .88fr 1.25fr!important}
}
@media (min-width:651px) and (max-width:1200px){
  main.punch-page{overflow:auto!important;padding:16px!important}
  .pc-top-grid{grid-template-columns:1fr 1fr!important;height:auto!important}.pc-top-grid .panel{height:auto!important;min-height:155px!important}.pc-status-card{grid-column:1/-1}
  .pc-main-grid{grid-template-columns:1fr!important;height:auto!important}.pc-main-grid>section:first-child,.pc-timeline{height:auto!important}.pc-break-card{min-height:145px!important}.pc-timeline{max-height:300px!important;overflow:auto!important}
  .pc-bottom-grid{grid-template-columns:1fr!important;height:auto!important}.pc-bottom-grid .panel{height:auto!important}
}

/* v1.2.8 - Current Time card final clipping fix */
@media (min-width:1201px){
  .pc-time-card{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;overflow:visible!important}
  .pc-time-card .duration-box{box-sizing:border-box!important;flex:0 0 auto!important;min-height:64px!important;margin-top:10px!important;padding:8px 12px!important;overflow:visible!important}
  .pc-time-card .duration-box span{min-width:0!important;line-height:1.12!important}
  .pc-time-card .duration-box b{line-height:1.08!important;margin-top:2px!important}
  .pc-time-card .duration-box small{line-height:1.1!important;margin-top:2px!important;white-space:nowrap!important}
  .pc-top-grid .pc-time-card{min-height:174px!important;height:174px!important}
  .pc-top-grid{flex-basis:174px!important;min-height:174px!important;height:174px!important}
}
@media (min-width:1201px) and (max-height:820px){
  .pc-top-grid,.pc-top-grid .pc-time-card{height:166px!important;min-height:166px!important}
  .pc-top-grid{flex-basis:166px!important}
  .pc-time-card .duration-box{min-height:58px!important;margin-top:7px!important;padding:6px 10px!important}
}

/* RainbowOS v1.3.0 — Compact Window Reflow
   Do not squeeze the desktop composition into a short/narrow browser window. */
@media (min-width:651px) and (max-width:1200px), (min-width:651px) and (max-height:720px){
  main.punch-page{overflow-y:auto!important;overflow-x:hidden!important;padding:12px 14px 18px!important;display:block!important;height:auto!important}
  .punch-page .pc-page-head{min-height:44px!important}
  .punch-page .pc-tabs{margin:4px 0 8px!important}
  .pc-top-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;height:auto!important;min-height:0!important;gap:10px!important}
  .pc-top-grid .panel{height:auto!important;min-height:158px!important;overflow:visible!important}
  .pc-top-grid .pc-status-card{grid-column:1/-1!important;min-height:132px!important}
  .pc-top-grid .pc-time-card{height:auto!important;min-height:166px!important}
  .pc-time-card .duration-box{min-height:58px!important}
  .pc-main-grid{display:grid!important;grid-template-columns:1fr!important;height:auto!important;min-height:0!important;gap:10px!important;margin-top:10px!important}
  .pc-main-grid>section:first-child{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;gap:10px!important}
  .main-punch{min-height:54px!important;height:54px!important;flex:0 0 54px!important}
  .pc-break-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;height:auto!important;min-height:0!important;gap:10px!important;margin:0!important}
  .pc-break-card{height:auto!important;min-height:132px!important;overflow:visible!important;padding:10px 8px!important}
  .pc-break-card b{font-size:15px!important}.pc-break-card small{font-size:10px!important}.pc-break-card strong{font-size:13px!important}
  .pc-timeline{height:auto!important;min-height:190px!important;max-height:none!important;overflow:visible!important;padding:11px 14px!important}
  .pc-timeline-row{height:auto!important;min-height:34px!important;grid-template-columns:56px 26px 1fr!important}
  .pc-timeline-row time{font-size:8px!important}.pc-timeline-row b{font-size:9px!important}.pc-timeline-row small{font-size:8px!important}
  .pc-bottom-grid{display:grid!important;grid-template-columns:1fr!important;height:auto!important;min-height:0!important;gap:10px!important;margin-top:10px!important}
  .pc-bottom-grid .panel{height:auto!important;min-height:82px!important;overflow:visible!important}
  .pc-summary>div,.pc-usage>div{min-height:46px!important;height:auto!important}
}
@media (min-width:651px) and (max-width:820px){
  .pc-top-grid{grid-template-columns:1fr!important}.pc-top-grid .pc-status-card{grid-column:auto!important}
  .pc-break-grid{grid-template-columns:1fr!important}
  .pc-break-card{min-height:112px!important}
  .pc-summary{grid-template-columns:repeat(2,1fr)!important}.pc-usage{grid-template-columns:1fr!important}
}

/* RainbowOS v1.3.1 — Fluid Medium Window Fix
   Keep the desktop composition for ordinary resized browser windows.
   Only genuinely narrow windows stack sections. */
@media (min-width:901px) and (max-width:1200px){
  main.punch-page{overflow-y:auto!important;overflow-x:hidden!important;padding:10px 14px 14px!important;display:block!important;height:auto!important}
  .pc-top-grid{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) minmax(0,1.15fr)!important;gap:10px!important;height:auto!important;min-height:0!important}
  .pc-top-grid .panel,.pc-top-grid .pc-time-card,.pc-top-grid .pc-status-card{grid-column:auto!important;height:auto!important;min-height:160px!important;overflow:visible!important}
  .pc-time-card .duration-box{min-height:58px!important;margin-top:7px!important;padding:7px 10px!important}
  .pc-main-grid{display:grid!important;grid-template-columns:minmax(0,2.05fr) minmax(300px,.9fr)!important;height:auto!important;min-height:0!important;gap:10px!important;margin-top:10px!important;align-items:stretch!important}
  .pc-main-grid>section:first-child{height:auto!important;display:flex!important;flex-direction:column!important;gap:10px!important}
  .main-punch{height:54px!important;min-height:54px!important;flex:0 0 54px!important}
  .pc-break-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;height:auto!important;margin:0!important}
  .pc-break-card{height:132px!important;min-height:132px!important;padding:10px 8px!important;overflow:hidden!important}
  .pc-timeline{height:196px!important;min-height:196px!important;max-height:196px!important;overflow:hidden!important;padding:11px 14px!important}
  .pc-timeline-row{min-height:32px!important;height:32px!important;grid-template-columns:52px 25px 1fr!important}
  .pc-bottom-grid{display:grid!important;grid-template-columns:1.2fr 1fr!important;height:auto!important;min-height:84px!important;gap:10px!important;margin-top:10px!important}
  .pc-bottom-grid .panel{height:84px!important;min-height:84px!important;overflow:hidden!important}
}
@media (min-width:901px) and (max-width:1200px) and (max-height:760px){
  .pc-top-grid .panel,.pc-top-grid .pc-time-card,.pc-top-grid .pc-status-card{min-height:148px!important}
  .pc-break-card{height:118px!important;min-height:118px!important}
  .pc-timeline{height:182px!important;min-height:182px!important;max-height:182px!important}
  .pc-bottom-grid,.pc-bottom-grid .panel{min-height:78px!important;height:78px!important}
}
/* Stack only when the content area is truly narrow. */
@media (min-width:651px) and (max-width:900px){
  main.punch-page{overflow-y:auto!important;overflow-x:hidden!important;padding:12px 14px 18px!important;display:block!important;height:auto!important}
  .pc-top-grid{grid-template-columns:1fr 1fr!important}.pc-top-grid .pc-status-card{grid-column:1/-1!important}
  .pc-main-grid{grid-template-columns:1fr!important}.pc-timeline{height:auto!important;min-height:190px!important;max-height:none!important}
  .pc-bottom-grid{grid-template-columns:1fr!important}.pc-bottom-grid .panel{height:auto!important}
}

/* RainbowOS v1.3.2 — Viewport Safe Responsive Framework
   One scroll owner only. Never overlap or clip sections in a short desktop window. */
@media (min-width:901px) and (max-height:820px){
  .workspace{overflow:hidden!important}
  main.punch-page{
    flex:1 1 auto!important;height:auto!important;min-height:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    display:block!important;padding:10px 14px 18px!important;
    scrollbar-gutter:stable;
  }
  .punch-page .pc-page-head{height:auto!important;min-height:46px!important;position:relative!important;top:auto!important}
  .punch-page .pc-tabs{height:auto!important;min-height:32px!important;margin:4px 0 8px!important}
  .pc-top-grid{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) minmax(0,1.15fr)!important;gap:10px!important;height:auto!important;min-height:0!important;flex-basis:auto!important}
  .pc-top-grid .panel,.pc-top-grid .pc-time-card,.pc-top-grid .pc-status-card{height:auto!important;min-height:154px!important;overflow:visible!important}
  .pc-time-card .duration-box{min-height:60px!important;margin-top:7px!important;padding:7px 10px!important}
  .pc-main-grid{display:grid!important;grid-template-columns:minmax(0,2.05fr) minmax(300px,.9fr)!important;gap:10px!important;height:auto!important;min-height:0!important;margin-top:10px!important;align-items:stretch!important}
  .pc-main-grid>section:first-child{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;gap:10px!important}
  .main-punch{height:54px!important;min-height:54px!important;flex:0 0 54px!important}
  .pc-break-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;height:auto!important;min-height:0!important;margin:0!important}
  .pc-break-card{height:auto!important;min-height:124px!important;overflow:visible!important;padding:10px 8px!important}
  .pc-timeline{height:auto!important;min-height:188px!important;max-height:none!important;overflow:visible!important;padding:11px 14px!important}
  .pc-timeline-row{height:auto!important;min-height:32px!important;grid-template-columns:52px 25px 1fr!important}
  .pc-bottom-grid{display:grid!important;grid-template-columns:1.2fr 1fr!important;gap:10px!important;height:auto!important;min-height:0!important;margin-top:10px!important}
  .pc-bottom-grid .panel{height:auto!important;min-height:84px!important;overflow:visible!important}
  .pc-summary>div,.pc-usage>div{height:auto!important;min-height:46px!important}
}
@media (min-width:901px) and (max-height:680px){
  .pc-top-grid .panel,.pc-top-grid .pc-time-card,.pc-top-grid .pc-status-card{min-height:146px!important}
  .pc-break-card{min-height:116px!important}
  .pc-timeline{min-height:176px!important}
}

/* RainbowOS v1.3.3 — Timeline Containment Fix
   Timeline owns its event overflow. Bottom summary cards always remain outside it. */
@media (min-width:901px){
  .pc-main-grid{align-items:stretch!important}
  .pc-timeline{
    display:flex!important;flex-direction:column!important;
    min-height:0!important;overflow:hidden!important;
  }
  .pc-timeline .panel-title{flex:0 0 auto!important}
  .pc-timeline-list{
    flex:1 1 auto!important;min-height:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    padding-right:3px!important;
    scrollbar-width:thin;
  }
  .pc-bottom-grid{position:relative!important;z-index:2!important;clear:both!important}
}
@media (min-width:901px) and (max-height:820px){
  .pc-main-grid{height:clamp(205px,31vh,245px)!important;min-height:205px!important}
  .pc-main-grid>section:first-child{height:100%!important;min-height:0!important}
  .pc-timeline{height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
  .pc-timeline-list{overflow-y:auto!important;min-height:0!important}
  .pc-bottom-grid{margin-top:10px!important}
}


/* RainbowOS v1.3.4 — responsive shell + stable punch top row */
@media (min-width:1001px) and (max-width:1500px){
  .shell{grid-template-columns:clamp(210px,18vw,250px) minmax(0,1fr)!important;gap:12px!important;padding:10px!important}
  aside{height:calc(100vh - 20px)!important;padding:18px 12px 12px!important;border-radius:24px!important}
  .workspace{height:calc(100vh - 20px)!important;border-radius:24px!important}
  .brand{padding:3px 8px 18px!important}.brand b{font-size:18px!important}.logo{font-size:30px!important}
  .nav-main{padding:10px 9px!important;font-size:12px!important;gap:9px!important}.nav-sub{padding:6px 7px!important;font-size:10px!important}
  .subs{margin-left:15px!important;padding-left:9px!important}
  .sidebar-motto{height:clamp(96px,15vh,126px)!important;min-height:96px!important;margin:8px!important;padding:12px!important}
  .sidebar-motto span{font-size:clamp(13px,1.25vw,17px)!important}
  header{height:72px!important;padding:0 22px!important}.search{width:min(520px,47vw)!important}
  main.punch-page{padding:10px 14px 16px!important;overflow-y:auto!important;overflow-x:hidden!important}
  .pc-top-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.92fr) minmax(0,1.12fr)!important;gap:10px!important}
  .pc-top-grid .panel,.pc-top-grid .pc-time-card,.pc-top-grid .pc-status-card{grid-column:auto!important;min-width:0!important}
  .pc-status-card{width:auto!important}
}
@media (min-width:651px) and (max-width:1000px){
  .shell{grid-template-columns:82px minmax(0,1fr)!important;gap:8px!important;padding:8px!important}
  aside{height:calc(100vh - 16px)!important;padding:14px 8px!important;border-radius:20px!important;align-items:center!important}
  .brand{padding:4px 0 14px!important;justify-content:center!important;width:100%!important}.brand>div{display:none!important}.logo{font-size:30px!important}
  .sidebar-clock{padding:10px 0!important}.sidebar-clock>div,.nav-caption,.nav-main .label,.subs,.sidebar-motto,.version div{display:none!important}
  #nav{width:100%!important;overflow:visible!important}.nav-group{margin:5px 0!important}.nav-main{justify-content:center!important;padding:12px 0!important}.nav-icon{margin:0!important}
  .version{margin-top:auto!important;padding:12px!important;justify-content:center!important}.online-dot{margin:0!important}
  header{height:66px!important;padding:0 16px!important}.search{width:min(430px,55vw)!important}
  main.punch-page{padding:10px 12px 16px!important;overflow-y:auto!important}
  .pc-top-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .pc-top-grid .panel,.pc-top-grid .pc-time-card,.pc-top-grid .pc-status-card{grid-column:auto!important;min-width:0!important;min-height:150px!important}
  .pc-main-grid{grid-template-columns:1fr!important}.pc-timeline{min-height:180px!important}
}

/* RainbowOS v1.3.5 - Mini Punch Card launcher */
.pc-head-actions{display:flex;align-items:center;gap:9px}.pc-mini-open{height:34px;border:1px solid rgba(119,143,196,.18);border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(242,238,255,.96));color:#516889;font-weight:800;font-size:11px;padding:0 12px;cursor:pointer;box-shadow:0 8px 20px rgba(77,102,155,.08);transition:.18s}.pc-mini-open:hover{transform:translateY(-1px);color:#5e67e8;box-shadow:0 10px 24px rgba(77,102,155,.13)}@media(max-width:900px){.pc-mini-open span{display:none}.pc-mini-open{width:36px;padding:0}.pc-head-actions{gap:6px}}

/* RainbowOS v1.3.6 - functional attendance/settings */
.setting-box.editable label{display:block;font-size:10px;color:#8491a8;margin:7px 0 3px}.setting-box.editable input{width:100%;box-sizing:border-box;border:1px solid #dfe7f6;background:#fff;border-radius:9px;padding:8px 9px;color:#273754;font:inherit;outline:none}.setting-box.editable input:focus{border-color:#7e91f2;box-shadow:0 0 0 3px rgba(111,135,240,.1)}
.settings-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.live-row{cursor:pointer}.live-row:hover td{background:#f4f8ff}.live-detail{margin-top:14px;padding:14px;border-radius:14px;background:#f8faff;border:1px solid #e9eef9}.live-detail h3{margin:0 0 10px;font-size:14px}.live-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.live-detail-grid div{background:#fff;border-radius:10px;padding:10px}.live-detail-grid small{display:block;color:#8793aa}.live-detail-grid b{font-size:12px}.admin-edit-note{font-size:11px;color:#6d7c99}
@media(max-width:850px){.live-detail-grid{grid-template-columns:1fr 1fr}}

/* RainbowOS v1.3.7 - attendance/settings spacing refinement */
.pc-management-page{padding-top:4px}
.pc-management-page .welcome{margin-bottom:18px;align-items:flex-start}
.pc-management-page .panel.punch-card{padding:26px 28px 30px}
.pc-management-page .panel-title{margin-bottom:20px}
.pc-management-page .live-table{border-spacing:0 12px}
.pc-management-page .live-table th{padding:7px 12px 10px}
.pc-management-page .live-table td{padding:14px 12px}
.pc-management-page .live-detail{margin-top:20px;padding:18px}
.pc-settings-page .pc-settings{gap:18px 16px}
.pc-settings-page .setting-box{padding:20px 18px;border-radius:16px}
.pc-settings-page .setting-box>b{margin-bottom:12px;font-size:13px}
.pc-settings-page .setting-box label{display:block;margin-top:12px}
.pc-settings-page .setting-box label:first-of-type{margin-top:0}
.pc-settings-page .setting-box label>span{display:block;margin-bottom:7px;line-height:1.3}
.pc-settings-page .setting-box input{min-height:48px}
.pc-settings-page .rotation-title{margin-top:28px!important;padding-top:4px}
.pc-settings-page .settings-actions{margin-top:24px;padding-top:4px;gap:12px}
@media(max-width:1050px){.pc-management-page .panel.punch-card{padding:22px}.pc-settings-page .pc-settings{gap:14px}}
@media(max-width:720px){.pc-management-page .panel.punch-card{padding:18px 16px}.pc-management-page .welcome{margin-bottom:14px}.pc-settings-page .setting-box{padding:16px}}


/* RainbowOS v1.3.8 - Staff Rest Day */
.rd-page{padding-top:4px}.rd-head{margin-bottom:16px}.rd-tabs{display:flex;gap:8px;margin-bottom:18px;padding:5px;background:rgba(255,255,255,.68);border:1px solid rgba(213,224,244,.85);border-radius:15px;width:max-content;box-shadow:0 8px 24px rgba(63,82,130,.05)}.rd-tab{border:0;background:transparent;color:#71809b;padding:9px 15px;border-radius:11px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.rd-tab span{font-size:9px;margin-left:4px;opacity:.7}.rd-tab.active{background:#fff;color:#5e67e8;box-shadow:0 5px 15px rgba(80,96,150,.10)}.rd-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.rd-summary.management{grid-template-columns:repeat(3,1fr)}.rd-kpi{background:rgba(255,255,255,.9);border:1px solid #e7edf8;border-radius:16px;padding:17px 18px;box-shadow:0 9px 24px rgba(65,84,132,.05)}.rd-kpi small,.rd-toolbar small,.panel-title small{display:block;color:#8b97ad;font-size:10px;margin-top:4px}.rd-kpi b{display:block;color:#273754;font-size:19px;margin:5px 0}.rd-kpi span{color:#8a96aa;font-size:10px}.rd-kpi.warning b{color:#e88955}.rd-panel{padding:22px 24px!important;margin-bottom:16px}.rd-panel .panel-title{margin-bottom:18px}.rd-request-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}.rd-request-grid label{font-size:10px;font-weight:700;color:#74829a}.rd-request-grid input,.rd-filters select{display:block;width:100%;box-sizing:border-box;margin-top:7px;border:1px solid #dfe7f5;border-radius:10px;background:#fff;padding:10px 11px;color:#33425d;font:inherit;outline:none}.rd-request-action{display:flex;gap:8px}.rd-table-wrap{overflow:auto}.rd-table{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:11px}.rd-table th{text-align:left;color:#8793a9;font-size:9px;text-transform:uppercase;letter-spacing:.04em;padding:5px 12px}.rd-table td{background:#f8faff;border-top:1px solid #edf1f8;border-bottom:1px solid #edf1f8;padding:12px}.rd-table td:first-child{border-left:1px solid #edf1f8;border-radius:10px 0 0 10px}.rd-table td:last-child{border-right:1px solid #edf1f8;border-radius:0 10px 10px 0}.rd-table td small{display:block;color:#929db0;margin-top:3px}.rd-status,.rd-remark{display:inline-block;padding:5px 9px;border-radius:999px;font-size:9px;font-weight:800}.rd-status.pending{background:#fff4db;color:#b67a1e}.rd-status.approved{background:#e9f9ef;color:#27855a}.rd-status.rejected{background:#ffeded;color:#bd5151}.rd-remark.rest{background:#f0edff;color:#7163c9}.rd-remark.sick{background:#eaf4ff;color:#4f7cb8}.rd-remark.ot{background:#e9f9ef;color:#27855a}.rd-remark.absent{background:#ffeded;color:#bd5151}.rd-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.rd-toolbar b{font-size:13px}.rd-filters{display:flex;gap:8px}.rd-filters select{width:auto;min-width:120px;margin:0;padding:8px 10px}.rd-note{margin-top:12px;padding:11px 13px;background:#f5f7ff;border:1px solid #e6eaff;border-radius:11px;color:#697995;font-size:10px;line-height:1.55}.rd-row-actions{display:flex;gap:6px}.rd-row-actions button{border:0;border-radius:8px;padding:6px 9px;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.rd-approve{background:#e8f8ee;color:#27855a}.rd-reject{background:#ffeded;color:#bd5151}.report-card pre{margin:0;background:#f8faff;border:1px solid #edf1f8;border-radius:12px;padding:15px;color:#42516c;font:11px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}.dtr td:nth-child(4){color:#5e67e8}
@media(max-width:1000px){.rd-summary{grid-template-columns:1fr 1fr}.rd-request-grid{grid-template-columns:1fr 1fr}.rd-request-action{grid-column:1/-1}.rd-toolbar{align-items:flex-start;flex-direction:column}.rd-filters{width:100%;flex-wrap:wrap}.rd-filters select{flex:1}}
@media(max-width:650px){.rd-tabs{width:100%;box-sizing:border-box;overflow:auto}.rd-tab{white-space:nowrap}.rd-summary,.rd-summary.management{grid-template-columns:1fr}.rd-request-grid{grid-template-columns:1fr}.rd-panel{padding:17px 15px!important}.rd-request-action{flex-direction:column}.rd-filters{flex-direction:column}.rd-filters select{width:100%}}

/* RainbowOS v1.3.9 - unified Rest Day controls */
.rd-request-grid label{position:relative}.rd-date-control,.rd-select{position:relative;margin-top:7px}.rd-date-btn,.rd-select-btn{width:100%;height:42px;border:1px solid #dfe7f5;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfcff);padding:0 13px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#33425d;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(66,84,130,.035);transition:.18s ease}.rd-date-btn:hover,.rd-select-btn:hover{border-color:#cdd9f2;box-shadow:0 7px 18px rgba(83,99,155,.08);transform:translateY(-1px)}.rd-date-btn:focus-visible,.rd-select-btn:focus-visible{outline:3px solid rgba(104,113,242,.13);border-color:#aeb8f5}.rd-control-chevron{width:8px;height:8px;border-right:1.8px solid #52627d;border-bottom:1.8px solid #52627d;transform:rotate(45deg) translateY(-2px);transition:.18s}.open>.rd-select-btn .rd-control-chevron,.open>.rd-date-btn .rd-control-chevron{transform:rotate(225deg) translate(-2px,-1px)}
.rd-select-menu{position:absolute;right:0;top:48px;min-width:100%;padding:6px;background:rgba(255,255,255,.98);border:1px solid #e0e7f5;border-radius:13px;box-shadow:0 16px 38px rgba(52,69,115,.15);z-index:40;display:none}.rd-select.open .rd-select-menu{display:block}.rd-select-option{width:100%;border:0;background:transparent;border-radius:9px;padding:9px 10px;text-align:left;color:#465672;font-family:inherit;font-size:10.5px;font-weight:700;cursor:pointer}.rd-select-option:hover{background:#f1f4ff;color:#5e67e8}.rd-select-option.active{background:linear-gradient(135deg,#eef0ff,#f6f1ff);color:#5e67e8}
.rd-calendar{position:absolute;left:0;top:49px;width:292px;padding:14px;background:rgba(255,255,255,.99);border:1px solid #e1e8f5;border-radius:16px;box-shadow:0 18px 45px rgba(49,66,112,.17);z-index:50;display:none}.rd-date-control.open .rd-calendar{display:block}.rd-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.rd-cal-head b{font-size:12px;color:#2d3d59}.rd-cal-nav{width:29px;height:29px;border:0;border-radius:9px;background:#f4f6ff;color:#6570df;font:700 16px/1 inherit;cursor:pointer;transition:.16s}.rd-cal-nav:hover{background:#e9ecff;transform:translateY(-1px)}.rd-cal-week,.rd-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.rd-cal-week span{text-align:center;color:#9aa5b7;font-size:8px;font-weight:800;padding:3px 0 6px}.rd-cal-day{height:31px;border:0;border-radius:9px;background:transparent;color:#41516d;font-family:inherit;font-size:10px;font-weight:700;cursor:pointer}.rd-cal-day:hover:not(:disabled){background:#eef1ff;color:#5e67e8}.rd-cal-day.selected{background:linear-gradient(135deg,#6671ef,#8c68ec);color:#fff;box-shadow:0 5px 12px rgba(103,105,231,.25)}.rd-cal-day:disabled{color:#c8ced9;background:#fafbfc;cursor:not-allowed;text-decoration:line-through}.rd-cal-day.outside{opacity:.35}.rd-cal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid #eef1f7}.rd-cal-note{font-size:8px;color:#98a3b6}.rd-cal-clear{border:0;background:#f2f4ff;color:#6670df;border-radius:8px;padding:6px 9px;font:800 8px inherit;cursor:pointer}
.rd-filters .rd-select{margin:0;min-width:128px}.rd-filters .rd-select-btn{height:38px;font-size:10.5px;padding:0 12px}.rd-filters .rd-select-menu{top:44px}
.rd-row-actions{gap:8px}.rd-row-actions button{position:relative;min-width:72px;height:31px;border:1px solid transparent;border-radius:10px;padding:0 11px;font-family:inherit;font-size:9px;font-weight:900;letter-spacing:.01em;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}.rd-row-actions button:hover{transform:translateY(-2px);filter:saturate(1.05)}.rd-row-actions button:active{transform:translateY(1px);box-shadow:none}.rd-approve{background:linear-gradient(180deg,#e9fbf0,#dff7e9)!important;color:#208456!important;border-color:#ccefdc!important;box-shadow:0 5px 11px rgba(39,151,94,.13)}.rd-approve:before{content:'✓';margin-right:5px}.rd-reject{background:linear-gradient(180deg,#fff0f0,#ffe5e6)!important;color:#c24e56!important;border-color:#f7d5d7!important;box-shadow:0 5px 11px rgba(191,72,82,.11)}.rd-reject:before{content:'×';margin-right:5px;font-size:12px}.rd-panel .btn{transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}.rd-panel .btn:hover{transform:translateY(-2px);filter:saturate(1.04)}.rd-panel .btn:active{transform:translateY(1px)}
@media(max-width:650px){.rd-calendar{width:min(292px,calc(100vw - 64px))}.rd-filters .rd-select{width:100%}.rd-filters .rd-select-btn{width:100%}}


/* RainbowOS v1.4.0 - Rest Day calendar layer + capacity settings */
.rd-panel:has(.rd-date-control.open){position:relative;z-index:160;overflow:visible!important}
.rd-request-grid,.rd-request-grid label,.rd-date-control.open{overflow:visible!important}
.rd-date-control.open{z-index:170}
.rd-date-control.open .rd-calendar{z-index:999;max-height:none;overflow:visible}
.rd-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rd-kpi-top small{margin:0}
.rd-setting-btn{border:1px solid #dfe5fb;background:linear-gradient(180deg,#f7f8ff,#eef1ff);color:#606be2;border-radius:9px;padding:6px 9px;font-family:inherit;font-size:8.5px;font-weight:900;cursor:pointer;box-shadow:0 4px 10px rgba(92,101,216,.08);transition:.16s}
.rd-setting-btn:hover{transform:translateY(-1px);box-shadow:0 7px 15px rgba(92,101,216,.14);border-color:#ccd4fa}
.rd-capacity-kpi span{display:block;line-height:1.4}
.rd-capacity-modal{width:min(470px,92vw)}
.rd-settings-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#edf0ff,#f6edff);color:#626ce6;font-size:18px;margin-bottom:12px}
.rd-capacity-label{display:block;margin-top:20px;color:#596a84;font-size:10px;font-weight:800}
.rd-capacity-label>span{display:block;margin-bottom:8px}
.rd-capacity-label>small{display:block;color:#94a0b3;font-size:9px;font-weight:600;margin-top:8px}
.rd-stepper{display:grid;grid-template-columns:44px 1fr 44px;height:46px;border:1px solid #dfe6f4;border-radius:13px;overflow:hidden;background:#fbfcff}
.rd-stepper button{border:0;background:#f1f4ff;color:#5f69df;font:900 20px/1 inherit;cursor:pointer;transition:.15s}
.rd-stepper button:hover{background:#e8ecff}
.rd-stepper input{width:100%;border:0;border-left:1px solid #e5eaf5;border-right:1px solid #e5eaf5;background:#fff;text-align:center;color:#2e3e5a;font:800 14px inherit;outline:none;-moz-appearance:textfield}
.rd-stepper input::-webkit-inner-spin-button,.rd-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* v1.4.3 Activity Report */
.activity-report-page .activity-toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:18px}.activity-filter{min-width:150px;flex:1}.activity-filter label{display:block;font-size:12px;font-weight:700;color:#667085;margin:0 0 7px}.activity-filter input,.activity-filter select{width:100%;height:42px;border:1px solid #dfe5f1;border-radius:12px;background:#fff;padding:0 12px;font:inherit;color:#344054;outline:none}.activity-filter input:focus,.activity-filter select:focus{border-color:#8b8df6;box-shadow:0 0 0 3px rgba(111,114,247,.10)}.activity-export{margin-left:auto;height:42px}.activity-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.activity-summary-card{padding:17px 18px;border:1px solid #edf0f6;border-radius:16px;background:linear-gradient(145deg,#fff,#fafbff)}.activity-summary-card small{display:block;color:#8a94a6;font-size:12px;margin-bottom:7px}.activity-summary-card b{font-size:22px;color:#27314d}.activity-table-wrap{overflow:auto;border:1px solid #edf0f6;border-radius:16px}.activity-table{width:100%;border-collapse:collapse;min-width:1040px}.activity-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#7b8497;background:#f8f9fc;padding:12px;text-align:left;white-space:nowrap}.activity-table td{padding:13px 12px;border-top:1px solid #edf0f6;font-size:13px;color:#39435d;white-space:nowrap}.activity-table tbody tr:hover{background:#fbfbff}.act-chip{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}.act-chip.work{background:#eaf9f1;color:#168454}.act-chip.break{background:#fff3e7;color:#b76216}.act-exceed{color:#d92d20;font-weight:800}.act-ok{color:#168454;font-weight:700}.activity-empty{padding:40px;text-align:center;color:#98a2b3}.activity-note{font-size:12px;color:#98a2b3;margin-top:12px}@media(max-width:900px){.activity-summary-grid{grid-template-columns:repeat(2,1fr)}.activity-export{margin-left:0}}