/* ============================================================
   设计语言(调研融合) — 白色底版本:
   - 状态驱动单按钮: iOS 录音/相机快门(圆形按钮随状态变形, 红=录制中)
   - 色彩语义: 绿=开始(上播/接听), 红=停止/危险(下播/挂断) — Google Meet / 手机通话
   - 交互: Material FAB 按压缩放 + 涟漪; 呼吸光晕 + 直播雷达脉冲环
   - 视觉: 白色底 + 浅色磨砂卡片 + 大圆钮居中
   ============================================================ */
:root{
  --bg:#f5f6f8; --card:#ffffff; --card-brd:#e5e8ef;
  --txt:#1f2733; --txt2:#5b6472; --txt3:#8b93a1;
  --green1:#22c55e; --green2:#15803d; --greenGlow:rgba(34,197,94,.35);
  --red1:#f43f5e; --red2:#dc2626; --redGlow:rgba(244,63,94,.4);
  --primary:#4f6ef7; --primary-soft:#eef1fe; --primary-txt:#4f6ef7;
  --amber:#b45309;
  --orange1:#f59e0b; --orange2:#c2410c; --orangeGlow:rgba(245,158,11,.38);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei UI",sans-serif;
  color:var(--txt); min-height:100vh; min-height:100dvh; overflow-x:hidden;
  background:
    radial-gradient(1000px 620px at 12% -8%, rgba(79,110,247,.06), transparent 60%),
    radial-gradient(800px 520px at 108% 10%, rgba(34,197,94,.05), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%);
  background-attachment:fixed; -webkit-font-smoothing:antialiased;
}
/* 顶部工具条 */
.topbar{
  position:sticky;top:0;z-index:50;align-items:center;justify-content:center;
  padding:12px 16px;padding-top:max(12px, env(safe-area-inset-top));
  background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--card-brd);
}
.topbar .right.clock-actions{width:min(100%,560px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:8px;margin:0 auto}
.topbar .right .clock-action{
  position:relative;min-width:0;min-height:74px;height:74px;margin:0;padding:9px 4px 8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px solid #e1e5ed;border-radius:14px;background:rgba(255,255,255,.94);color:var(--primary);
  font:700 12px/1.2 inherit;white-space:nowrap;cursor:pointer;touch-action:manipulation;
  box-shadow:0 2px 8px rgba(31,39,51,.04);transition:transform .15s,background .15s,border-color .15s,box-shadow .15s;
}
.topbar .right .clock-action:hover{border-color:#cfd7f2;background:var(--app-hover-neutral,#e5e9ef);box-shadow:0 4px 12px rgba(79,110,247,.08)}
.topbar .right .clock-action:active{transform:scale(.97);background:var(--primary-soft)}
.topbar .right .clock-action:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,110,247,.17)}
.topbar .right .clock-action .action-icon{width:24px;height:24px;display:block;flex:0 0 auto}
.topbar .right .clock-action.danger{color:#ef4444}
.topbar .right .clock-action.danger:hover{border-color:#fecaca;background:#feecec;box-shadow:0 4px 12px rgba(239,68,68,.08)}
.topbar .right .clock-action.danger:active{background:#fef2f2}
.topbar .right .clock-action.danger:focus-visible{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.16)}
.network-status{position:sticky;top:100px;z-index:45;margin:8px auto -2px;max-width:680px;padding:9px 14px;border-radius:10px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;text-align:center;font-size:13px;box-shadow:0 4px 14px rgba(154,52,18,.08)}
.network-status.reconnecting{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.network-status[hidden]{display:none}
/* 扫码在场校验提示条(规范 5.6): 常驻在页面顶部, 不由计时器自动消失 */
.presence-bar{position:sticky;top:100px;z-index:44;margin:8px auto -2px;max-width:680px;padding:9px 14px;border-radius:10px;border:1px solid transparent;text-align:center;font-size:13px;font-weight:600;line-height:1.6;box-shadow:0 4px 14px rgba(31,39,51,.06)}
.presence-bar.info{background:#fef6e7;color:#92400e;border-color:#fcd34d}
.presence-bar.err{background:#feecec;color:#991b1b;border-color:#fecaca}
.presence-bar a{color:inherit;font-weight:800}
.presence-bar[hidden]{display:none}
.notify-badge{position:absolute;right:5px;top:5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e11d48;color:#fff;font-size:10.5px;line-height:18px;font-weight:800;border:2px solid #fff}
/* 卡片 */
.glass{background:var(--card);border:1px solid var(--card-brd);border-radius:18px;box-shadow:0 6px 22px rgba(31,39,51,.06)}
.card{background:var(--card);border:1px solid var(--card-brd);border-radius:18px;padding:18px;box-shadow:0 6px 22px rgba(31,39,51,.06)}
/* ================= 主播操作台 ================= */
#clockArea{display:none;min-height:calc(100vh - 64px);min-height:calc(100dvh - 64px)}
.stage{max-width:560px;margin:0 auto;padding:18px 16px calc(30px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center}
.stage-top{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:14px}
.who{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.ava{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;background:linear-gradient(135deg,#4f6ef7,#7c8cf8);box-shadow:0 4px 12px rgba(79,110,247,.3)}
.who.live .ava{background:linear-gradient(135deg,#f43f5e,#e11d48);box-shadow:0 4px 12px rgba(244,63,94,.32)}
.nm{font-size:16px;font-weight:700}
.rl{font-size:12px;color:var(--txt2);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rl.full{color:var(--primary);font-weight:600}
.rl.part{color:var(--amber);font-weight:600}
.room-chip{flex-shrink:0;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--txt);background:#f3f5f9;border:1px solid var(--card-brd);border-radius:20px;padding:7px 12px;max-width:46%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.room-chip .dot2{width:7px;height:7px;border-radius:50%;background:var(--primary);flex-shrink:0}
/* 中央大圆钮 */
.stage-center{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:6vh}
.status-line{margin-top:5px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}
.badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge.sched{background:#fff7e8;color:#b45309;border:1px solid #f5d9a8}
.badge.idle{background:#eef1f5;color:var(--txt2);border:1px solid var(--card-brd)}
.live-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:22px;background:#e11d48;color:#fff;font-size:13.5px;font-weight:700;box-shadow:0 0 0 3px rgba(225,29,72,.14),0 6px 16px rgba(225,29,72,.22);white-space:nowrap}
.live-badge .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:livePulse 1.1s infinite ease-in-out}
@keyframes livePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.45}}
.live-dur{font-size:13px;font-weight:700;color:#15803d;font-variant-numeric:tabular-nums;white-space:nowrap}
.live-room{font-size:12.5px;color:var(--txt2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
/* ================= 大圆形电源按钮 ================= */
.power{
  position:relative;width:min(58vw,250px);height:min(58vw,250px);border-radius:50%;
  border:none;cursor:pointer;background:transparent;padding:0;outline:none;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.power:active{transform:scale(.93)}
.power:disabled{cursor:not-allowed;opacity:.55}
/* 外圈装饰环 */
.power::before{
  content:"";position:absolute;inset:-11px;border-radius:50%;
  border:2px solid rgba(31,39,51,.10);transition:border-color .35s;pointer-events:none;
}
.power.power-live::before{border-color:rgba(244,63,94,.42)}
.power.power-overtime::before{border-color:rgba(245,158,11,.55)}
/* 涟漪 */
.power .ripple{
  position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);
  background:rgba(255,255,255,.45);animation:rippleGo .55s ease-out forwards;
}
@keyframes rippleGo{to{transform:scale(2.4);opacity:0}}
/* 核心圆 */
.p-core{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;color:#fff;
  box-shadow:inset 0 2px 10px rgba(255,255,255,.28), inset 0 -8px 18px rgba(0,0,0,.22);
  transition:box-shadow .35s;
}
/* 双层渐变切换(绿<->红) */
.p-core::before,.p-core::after{content:"";position:absolute;inset:0;border-radius:50%;transition:opacity .38s ease;pointer-events:none}
.p-core::before{background:
  radial-gradient(120% 90% at 30% 8%, rgba(255,255,255,.36), transparent 42%),
  linear-gradient(145deg,var(--green1) 0%,var(--green2) 100%);opacity:1}
.p-core::after{background:
  radial-gradient(120% 90% at 30% 8%, rgba(255,255,255,.34), transparent 42%),
  linear-gradient(145deg,var(--red1) 0%,var(--red2) 100%);opacity:0}
.power-live .p-core::before{opacity:0}
.power-live .p-core::after{opacity:1}
.power-overtime .p-core::before{background:radial-gradient(120% 90% at 30% 8%,rgba(255,255,255,.36),transparent 42%),linear-gradient(145deg,var(--orange1),var(--orange2));opacity:1}
.power-overtime .p-core::after{opacity:0}
.power-overtime .p-core{box-shadow:inset 0 2px 10px rgba(255,255,255,.28),inset 0 -8px 18px rgba(0,0,0,.22),0 0 30px 5px var(--orangeGlow);animation:breatheOrange 2.6s ease-in-out infinite}
@keyframes breatheOrange{0%,100%{box-shadow:inset 0 2px 10px rgba(255,255,255,.28),inset 0 -8px 18px rgba(0,0,0,.22),0 0 16px 2px var(--orangeGlow)}50%{box-shadow:inset 0 2px 10px rgba(255,255,255,.28),inset 0 -8px 18px rgba(0,0,0,.22),0 0 36px 8px var(--orangeGlow)}}
/* 待机呼吸光晕 */
.power-on .p-core{box-shadow:inset 0 2px 10px rgba(255,255,255,.28), inset 0 -8px 18px rgba(0,0,0,.22), 0 0 0 0 var(--greenGlow);animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{
  0%,100%{box-shadow:inset 0 2px 10px rgba(255,255,255,.28), inset 0 -8px 18px rgba(0,0,0,.22), 0 0 18px 2px var(--greenGlow)}
  50%{box-shadow:inset 0 2px 10px rgba(255,255,255,.28), inset 0 -8px 18px rgba(0,0,0,.22), 0 0 36px 8px var(--greenGlow)}
}
/* 直播中: 雷达脉冲环(两层) */
.power-live{animation:liveShake 2.2s ease-in-out infinite}
@keyframes liveShake{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}
.power-live:active{transform:scale(.93);animation:none}
.p-pulse{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  border:3px solid rgba(244,63,94,.7);transform:scale(1);
}
.power-live .p-pulse{opacity:1;animation:radar 2.1s cubic-bezier(.25,.6,.35,1) infinite}
.power-live .p-pulse.p2{animation-delay:1.05s}
@keyframes radar{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.55);opacity:0}}
.power-live .p-core{box-shadow:inset 0 2px 10px rgba(255,255,255,.26), inset 0 -8px 18px rgba(0,0,0,.22), 0 0 28px 4px var(--redGlow)}
/* 图标与文字 */
.p-icon{position:relative;width:34%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;z-index:1}
.p-icon svg{width:100%;height:auto;display:block;transition:opacity .3s, transform .3s cubic-bezier(.34,1.56,.64,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.p-ico-play{fill:#fff}
.p-ico-stop{fill:#fff;opacity:0;transform:translate(-50%,-50%) scale(.3)}
.p-ico-camera{fill:#fff;opacity:0;transform:translate(-50%,-50%) scale(.3)}
.power-live .p-ico-play{opacity:0;transform:translate(-50%,-50%) scale(.3)}
.power-live .p-ico-stop{opacity:1;transform:translate(-50%,-50%) scale(1)}
.power-overtime .p-ico-play,.power-overtime .p-ico-stop{opacity:0;transform:translate(-50%,-50%) scale(.3)}
.power-overtime .p-ico-camera{opacity:1;transform:translate(-50%,-50%) scale(1)}
.p-label{font-size:clamp(20px,5.6vw,26px);font-weight:800;letter-spacing:.18em;text-indent:.18em;position:relative;text-shadow:0 2px 8px rgba(0,0,0,.22);z-index:1}
.p-sub{font-size:12px;font-weight:600;letter-spacing:.12em;opacity:.85}
#powerCap{font-size:13.5px;color:var(--txt2);font-weight:500;text-align:center;min-height:20px;transition:color .2s}
#powerCap.hot{color:#dc2626;font-weight:600}
.test-overtime-btn{border:1px solid #f59e0b;background:#fff7e8;color:#b45309;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:750;cursor:pointer;box-shadow:0 4px 12px rgba(245,158,11,.12)}
.test-overtime-btn:active{transform:scale(.97)}
.hint{color:var(--txt3);font-size:12px;margin-top:2px;line-height:1.6;text-align:center}
/* 长按防误触进度环 */
.p-hold{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:rotate(-90deg);opacity:0;transition:opacity .15s;z-index:2}
.power.holding .p-hold{opacity:1}
.p-hold-track{fill:none;stroke:rgba(255,255,255,.55);stroke-width:8}
.p-hold-bar{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-dasharray:345.58;stroke-dashoffset:345.58;filter:drop-shadow(0 1px 4px rgba(0,0,0,.3))}
/* 5秒可撤回提示条(非弹窗) */
.undo-bar{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:150;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--card-brd);color:var(--txt);padding:10px 12px 10px 16px;border-radius:14px;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(31,39,51,.14);max-width:min(92vw,420px);white-space:nowrap}
.undo-bar button{background:linear-gradient(135deg,#4f6ef7,#6d7ffa);border:none;color:#fff;font-size:13.5px;font-weight:700;padding:8px 16px;border-radius:10px;cursor:pointer;touch-action:manipulation;box-shadow:0 4px 12px rgba(79,110,247,.25)}
.undo-bar button:active{transform:scale(.97)}
/* 长按体验: 禁止选中文字/呼出系统菜单(微信按住说话同款), 触屏按住不再带动页面滚动 */
html,body{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none !important;user-select:none !important}
*{-webkit-touch-callout:none !important;-webkit-user-select:none !important;user-select:none !important}
input,textarea{-webkit-touch-callout:default !important;-webkit-user-select:text !important;user-select:text !important}
.power{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
.power *{-webkit-user-select:none;user-select:none}
.stage,.stage *,#powerCap,.hint,.topbar,.undo-bar{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* 结果提示 */
.result{display:none;margin-top:12px;padding:12px 16px;border-radius:12px;font-size:13.5px;line-height:1.7;text-align:left}
.result.show{display:block}
.result.toast{
  position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(8px);
  max-width:min(92vw,420px);padding:12px 18px;border-radius:14px;z-index:90;text-align:center;margin-top:0;
  box-shadow:0 12px 36px rgba(31,39,51,.24);
  transition:transform .25s, opacity .25s;
}
.result.toast.show{transform:translateX(-50%) translateY(0)}
.result.ok{background:#e9f9ef;color:#065f46;border:1px solid #a7f3d0}
.result.err{background:#feecec;color:#991b1b;border:1px solid #fecaca}
.result.info{background:#fef6e7;color:#92400e;border:1px solid #fcd34d}
/* ================= 排班卡片 ================= */
.sched-card{margin-top:18px;width:100%;padding:16px 16px 10px}
.sched-title{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:6px;color:var(--txt)}
.sched-day{margin-top:14px;padding-top:12px;border-top:1px solid var(--card-brd)}
.sched-day:first-child{margin-top:10px;padding-top:0;border-top:none}
.sched-day-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.sched-date{color:var(--txt)}
.sched-week{color:var(--txt2);font-weight:500}
.sched-tag{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--primary-soft);color:var(--primary-txt);font-weight:600}
.sched-item{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#f7f8fa;border:1px solid var(--card-brd);border-radius:10px;padding:9px 12px;margin-top:8px;font-size:13.5px}
.sched-room{color:var(--txt);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sched-time{color:var(--txt2);font-variant-numeric:tabular-nums;flex-shrink:0}
.sched-empty{color:var(--txt3);font-size:12.5px;margin-top:8px}
.sched-none{color:var(--txt3);font-size:13px;text-align:center;padding:18px 0}
/* ================= 登录区 ================= */
#loginArea{display:none;max-width:400px;margin:20px auto;width:calc(100% - 32px)}
.login-title{font-size:18px;font-weight:800;margin-bottom:2px}
.login-sub{font-size:13px;color:var(--txt2)}
label{display:block;font-size:12.5px;color:var(--txt2);margin:14px 0 6px;font-weight:600}
input{width:100%;height:48px;border:1px solid #dfe3ea;border-radius:12px;padding:0 14px;font-size:16px;color:var(--txt);background:#fff;transition:border-color .15s, box-shadow .15s}
input::placeholder{color:var(--txt3)}
input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,110,247,.16)}
.btn{display:flex;align-items:center;justify-content:center;width:100%;height:50px;border:none;border-radius:12px;font-size:15.5px;font-weight:700;cursor:pointer;margin-top:14px;touch-action:manipulation;transition:transform .15s, opacity .2s}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(135deg,#4f6ef7,#6d7ffa);color:#fff;box-shadow:0 8px 20px rgba(79,110,247,.28)}
.btn.secondary{background:#eef1f5;color:var(--txt);border:1px solid var(--card-brd)}
.btn.ghost{background:none;border:none;color:var(--primary-txt);font-size:13px;font-weight:600;height:34px;padding:0 8px;margin:0;border-radius:8px}
.btn.ghost:active{background:var(--primary-soft)}
.btn.sm{width:auto;height:36px;padding:0 18px;font-size:13px;border-radius:9px;margin-top:0}
/* ================= 弹窗 ================= */
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal{background:#fff;border:1px solid var(--card-brd);border-radius:18px;padding:24px;width:100%;max-width:380px;box-shadow:0 18px 60px rgba(31,39,51,.24);animation:popIn .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.modal-title{font-size:17px;font-weight:800;margin-bottom:2px;color:var(--txt)}
.modal-sub{font-size:12.5px;color:var(--txt3);margin-bottom:4px}
.modal .btn{height:46px;font-size:14.5px}
.camera-mask{padding:10px;align-items:flex-start;overflow:auto}
.camera-modal{max-width:560px;margin:auto;padding:18px}
.camera-frame{position:relative;width:100%;aspect-ratio:3/4;max-height:62vh;background:#0f172a;border-radius:14px;overflow:hidden;margin-top:12px}
.camera-frame video,.camera-frame img{width:100%;height:100%;object-fit:contain;display:block}
.camera-guide{position:absolute;left:10px;right:10px;top:10px;padding:7px 10px;border-radius:9px;background:rgba(15,23,42,.72);color:#fff;font-size:12px;text-align:center;pointer-events:none}
.capture-meta{margin-top:10px;padding:9px 11px;border-radius:10px;background:#fff7e8;border:1px solid #f5d9a8;color:#92400e;font-size:12px;line-height:1.65;font-variant-numeric:tabular-nums}
.camera-actions{display:flex;gap:10px}.camera-actions .btn{margin-top:12px}.camera-actions .secondary{flex:1}.camera-actions .primary{flex:2}
.notify-modal{max-width:520px}.notify-list{max-height:58vh;overflow:auto;margin-top:12px}
.notify-item{padding:12px 2px;border-bottom:1px solid var(--card-brd)}.notify-item:last-child{border-bottom:0}
.notify-item.unread .notify-title::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#e11d48;margin-right:7px}
.notify-title{font-size:14px;font-weight:750}.notify-body{font-size:13px;color:var(--txt2);line-height:1.6;margin-top:4px}.notify-time{font-size:11.5px;color:var(--txt3);margin-top:5px}.notify-empty{text-align:center;color:var(--txt3);padding:28px 0;font-size:13px}
.alert-msg{font-size:14px;color:var(--txt);line-height:1.7;margin:10px 0 4px;word-break:break-word}
.alert-icon{font-size:32px;text-align:center;margin-bottom:4px}
@media(max-width:390px){
  .topbar{padding-left:10px;padding-right:10px}
  .topbar .right.clock-actions{gap:6px}
  .topbar .right .clock-action{min-height:72px;height:72px;padding:8px 2px 7px;border-radius:13px;font-size:11.5px}
  .topbar .right .clock-action .action-icon{width:23px;height:23px}
}
@media(max-width:350px){
  .topbar{padding-left:8px;padding-right:8px}
  .topbar .right.clock-actions{gap:4px}
  .topbar .right .clock-action{font-size:10.5px;border-radius:12px}
}