:root{--bg:#060a14;--bg2:#0d1320;--bgc:rgba(13,19,32,.85);--bgch:rgba(20,30,50,.92);--bgs:rgba(164,239,249,.05);--bd:rgba(164,239,249,.1);--bdl:rgba(164,239,249,.18);--t1:#edf2fc;--t2:rgba(237,242,252,.65);--t3:rgba(237,242,252,.38);--ac:#A4EFF9;--acd:rgba(164,239,249,.15);--acg:rgba(164,239,249,.3);--acm:rgba(164,239,249,.5);--acl:#7DD3FC;--bdh:rgba(164,239,249,.25);--sc:#6C63FF;--scd:rgba(108,99,255,.06);--pu:#6C63FF;--ur:#EC4899;--urd:rgba(236,72,153,.15);--gn:#4ADE80;--gnd:rgba(74,222,128,.15);--or:#FB923C;--ord:rgba(251,146,60,.15);--rd:#F87171;--rdd:rgba(248,113,113,.15);--yl:#FACC15;--rs:8px;--rm:12px;--rl:16px;--rx:20px;--sh:0 2px 8px rgba(0,0,0,.2);--sm:0 4px 16px rgba(0,0,0,.3);--sg:0 0 20px rgba(164,239,249,.1);--sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(164,239,249,0.5)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");--tr:.3s cubic-bezier(.4,0,.2,1);--tf:.15s cubic-bezier(.4,0,.2,1);--fn:-apple-system,BlinkMacSystemFont,'SF Pro Display','PingFang SC','Helvetica Neue',sans-serif;--raster-speed:3s}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;font-family:var(--fn);background:var(--bg);color:var(--t1);overflow:hidden;-webkit-font-smoothing:antialiased}
.app{height:100%;display:flex;flex-direction:column;position:relative}
.app::before{content:'';position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 30% 20%,var(--gl1,rgba(164,239,249,.03)) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,var(--gl2,rgba(108,99,255,.03)) 0%,transparent 50%);pointer-events:none;z-index:0;animation:bgF 20s ease-in-out infinite}
@keyframes bgF{0%,100%{transform:translate(0,0)}50%{transform:translate(-2%,-1%)}}

.loading-screen{position:fixed;inset:0;z-index:1000;background:var(--bg);transition:opacity .6s ease,visibility .6s ease}
.loading-screen.hiding{opacity:0;visibility:hidden}
.loading-screen canvas{position:absolute;inset:0;width:100%;height:100%}
.loading-screen__overlay{position:absolute;bottom:18%;left:0;right:0;z-index:1;text-align:center;pointer-events:none}
.loading-screen__title{font-size:24px;font-weight:700;color:var(--ac);letter-spacing:6px;text-shadow:0 0 20px var(--acg);margin-bottom:10px;animation:lsTI .8s ease both}
.loading-screen__sub{font-size:13px;color:var(--t3);letter-spacing:1px;margin-bottom:16px;min-height:20px;animation:lsSI .8s ease .2s both}
.loading-screen__hint{font-size:11px;color:var(--acd);letter-spacing:.5px;animation:lsH 2.5s ease-in-out infinite .6s;pointer-events:auto}
@keyframes lsTI{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes lsSI{from{opacity:0}to{opacity:1}}
@keyframes lsH{0%,100%{opacity:.25}50%{opacity:.6}}

.main-container{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1;padding-bottom:68px}

/* === 钥匙形顶部 ===
   圆环=钥匙柄 / key-connector=矩形连接体(隔开圆环与统计区)
   锯齿=每列顶部窄突起 / 用户+设置=统计区右侧上平面(与格子顶齐平)
*/
.key-header{display:flex;align-items:center;padding:14px 16px 10px;position:relative;gap:0}
/* 钥匙柄 - 圆环 */
.key-ring{position:relative;width:104px;height:104px;flex-shrink:0;display:flex;align-items:center;justify-content:center;z-index:2}
.key-ring__border{position:absolute;inset:0;border-radius:50%;border:3px solid var(--ac);opacity:.85;box-shadow:0 0 16px var(--acg),0 0 32px rgba(164,239,249,.15);animation:keyRingPulse 4s ease-in-out infinite}
.key-ring__border::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--acd);opacity:.3;animation:keyRingPulse 4s ease-in-out infinite .5s}
.key-ring__border::after{content:'';position:absolute;inset:6px;border-radius:50%;border:1.5px solid var(--bdl);opacity:.4}
@keyframes keyRingPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.02)}}
.key-ring__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;padding:0 10px}
.key-ring__time{font-size:26px;font-weight:200;color:var(--ac);font-variant-numeric:tabular-nums;letter-spacing:1px;text-shadow:0 0 20px var(--acg);line-height:1}
.key-ring__date{font-size:10px;color:var(--t2);line-height:1.1}
.key-ring__greeting{font-size:9px;background:linear-gradient(135deg,var(--ac),var(--pu));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:600;line-height:1.1}
/* 矩形连接体 - 圆环与统计区之间的钥匙杆 */
.key-connector{width:16px;height:36px;background:var(--bgc);border:1px solid var(--bd);border-left:none;border-right:none;flex-shrink:0;align-self:center;margin-left:-2px}
/* 钥匙杆 - 统计区主体 */
.key-shaft{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;z-index:1}
/* 统计列 - 每列=锯齿(上)+数值格(下)，右侧附用户/设置 */
.key-shaft__cols{display:flex;align-items:flex-end;gap:0;width:100%}
/* 单个统计列 */
.key-stat{display:flex;flex-direction:column;flex:1;min-width:0}
.key-stat--sync{flex:0 0 36px;margin-left:14px}
.key-stat--sync .key-stat__tooth{display:none}
/* 锯齿 - 窄突起(约1/4列宽靠左) */
.key-stat__tooth{width:25%;align-self:flex-start;margin-left:2px;background:var(--bgc);border:1px solid var(--bd);border-bottom:none;margin-bottom:-1px;position:relative;z-index:1;transition:height .4s ease;border-radius:3px 3px 0 0;height:4px}
/* 数值格 - 统计区主体 */
.key-stat__cell{display:flex;align-items:center;justify-content:center;gap:4px;height:36px;background:var(--bgc);border:1px solid var(--bd);border-right:none;padding:0 6px}
.key-stat:first-child .key-stat__cell{border-left:none}
.key-stat:last-child .key-stat__cell{border-right:1px solid var(--bd);border-bottom-right-radius:12px}
.key-stat--sync .key-stat__cell{cursor:pointer;transition:all var(--tf);-webkit-tap-highlight-color:transparent;flex-direction:column;gap:1px;border-left:1px solid var(--bd);border-radius:0 10px 10px 0}
.key-stat--sync .key-stat__cell:active{background:var(--acd);transform:scale(.98)}
.key-stat--sync.syncing .key-stat__cell svg{animation:spin 1s linear infinite}
.key-stat__val{font-size:14px;font-weight:700;color:var(--ac);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.key-stat__lbl{font-size:9px;color:var(--t3);line-height:1;white-space:nowrap}
.key-stat__countdown{font-size:7px;line-height:1;color:var(--acm);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 用户/设置 - 统计区右侧上平面(与格子顶齐平) */
.key-shaft__top{display:flex;align-items:flex-start;gap:6px;flex-shrink:0;margin-left:8px;padding-top:0}
.key-shaft__config{width:28px;height:28px;border-radius:8px;border:1px solid var(--bd);background:var(--bgc);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--tf);-webkit-tap-highlight-color:transparent}
.key-shaft__config:active{background:var(--acd);border-color:var(--bdl);color:var(--ac);transform:scale(.92)}
.key-shaft__config.active{background:var(--acd);border-color:var(--ac);color:var(--ac)}
.key-shaft__user{display:inline-flex;align-items:center;gap:4px;padding:4px 10px 4px 4px;background:var(--bgc);border:1px solid var(--bd);border-radius:8px;cursor:pointer;transition:all var(--tf);max-width:120px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.key-shaft__user:active{background:var(--acd);border-color:var(--bdl);transform:scale(.96)}
.key-shaft__avatar{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0;display:block;background:var(--bg2)}
.key-shaft__avatar--fallback{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--ac),var(--pu));color:var(--bg);font-size:9px;font-weight:700;line-height:1}
.key-shaft__username{font-size:10px;color:var(--t1);max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
@keyframes spin{to{transform:rotate(360deg)}}

.nav-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;background:rgba(10,14,26,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--bd);padding:2px 0;padding-bottom:env(safe-area-inset-bottom,4px)}
.nav-bar__inner{display:flex;justify-content:space-around;max-width:500px;margin:0 auto}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 14px;color:var(--t3);font-size:10px;cursor:pointer;transition:all var(--tr);position:relative}
.nav-item.active{color:var(--ac)}
.nav-item__icon{width:22px;height:22px;transition:transform var(--tr)}
.nav-item.active .nav-item__icon{transform:scale(1.25)}
.nav-item.active::after{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--ac);border-radius:1px;box-shadow:0 0 8px var(--acg)}
.nav-item span{transition:transform var(--tr),opacity var(--tr)}
.nav-item.active span{transform:scale(1.1);opacity:1}

.tab-panel{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 16px 20px;display:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.tab-panel.active{display:block;animation:fsI .3s ease}
@keyframes fsI{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;margin-top:8px}
.section-header--done{margin-top:16px}
.section-title{font-size:15px;font-weight:600}
.section-count{font-size:12px;font-weight:400;color:var(--t3);margin-left:4px}
.btn-text{background:none;border:none;color:var(--ac);font-size:13px;cursor:pointer;padding:4px 8px;border-radius:var(--rs);transition:background var(--tf);font-family:var(--fn)}
.btn-text:active{background:var(--acd)}
.btn-text--block{display:block;width:100%;text-align:center;padding:10px;margin-top:8px;border:1px dashed var(--bdl);border-radius:var(--rm)}

.task-list{min-height:20px}
.task-list--done .task-item{opacity:.55}
.task-list--done .task-actions{right:auto;left:10px;justify-content:flex-start}
.task-list--done .task-item--expanded .task-top{padding-right:0;padding-left:68px}
.task-list--done .task-item--expanded .task-title{max-width:none}

.task-item{padding:12px 14px;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm);margin-bottom:8px;transition:all var(--tr);position:relative;overflow:hidden;animation:tSI .25s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;user-select:none}
@keyframes tSI{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.task-item:active{transform:scale(.99)}
.task-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
.task-item--h::before{background:var(--rd)}
.task-item--m::before{background:var(--or)}
.task-item--l::before{background:var(--gn)}
.task-item--u::before{background:var(--ur)}
.task-item--active{border-color:var(--ac);background:linear-gradient(135deg,var(--acd),var(--scd));margin-bottom:12px;position:relative;overflow:hidden}
.task-item--active::after{content:'';position:absolute;top:-60%;left:-40%;width:40%;height:220%;background:radial-gradient(ellipse 70% 45% at 55% 50%,var(--acg) 0%,var(--acd) 40%,transparent 70%),radial-gradient(ellipse 50% 35% at 45% 50%,var(--scd) 0%,transparent 65%);filter:blur(3px);animation:flowLight var(--raster-speed) linear infinite;pointer-events:none}
@keyframes flowLight{0%{left:-40%;transform:rotate(-12deg)}100%{left:130%;transform:rotate(12deg)}}
.task-item--active .task-progress{display:block}

.task-top{display:flex;align-items:center;gap:8px;min-height:24px}
.task-title{flex:1;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)}
.task-note{font-size:12px;color:var(--t2);margin-top:4px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}
.task-meta{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.task-time{font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:3px}
.task-time::before{content:'⏱';font-size:10px;opacity:.7}
.task-remain{font-size:11px;color:var(--or);font-variant-numeric:tabular-nums;padding:1px 8px;border-radius:8px;background:var(--ord)}
.task-remain--over{color:var(--rd);background:var(--rdd)}

.task-progress{display:none;height:3px;background:var(--bd);border-radius:2px;margin-top:8px;overflow:hidden}
.task-progress__bar{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--ac),var(--pu));transition:width 1s linear}

.task-actions{display:none;align-items:center;justify-content:flex-end;gap:4px;position:absolute;top:8px;right:10px;z-index:2;padding:0;margin:0;border:none;background:rgba(10,14,26,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:var(--rs);padding:3px 4px}
.task-item--expanded .task-actions{display:flex}
.task-item--expanded .task-top{padding-right:8px}
.task-item--expanded .task-title{max-width:calc(100% - 60px)}
.task-act{border:none;background:transparent;border-radius:var(--rs);color:var(--t2);cursor:pointer;padding:4px 6px;transition:all var(--tf);font-family:var(--fn);line-height:1;display:flex;align-items:center;justify-content:center;border:1px solid transparent;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-width:28px;min-height:28px}
.task-act:active{transform:scale(.9);background:var(--acd);color:var(--ac)}
.task-act>svg,.task-item>.task-top,.task-item>.task-top>*,.task-item>.task-note,.task-item>.task-meta,.task-item>.task-meta>*,.task-item>.task-progress,.task-item>.task-timer-info{pointer-events:none}
.task-act--edit{color:var(--t2)}
.task-act--edit:hover,.task-act--edit:active{color:var(--ac);background:var(--acd);border-color:var(--bdl)}
.task-act--play{color:var(--ac)}
.task-act--pause{color:var(--yl);background:var(--acd)}
.task-act--tomato{color:var(--pu);background:var(--scd)}
.task-act--done{color:var(--gn)}
.task-act--restore{color:var(--or)}
.task-act--del{color:var(--rd)}

.task-timer-info{display:none;margin-top:6px;font-size:12px;color:var(--ac);font-variant-numeric:tabular-nums}
.task-item--active .task-timer-info{display:block}

.task-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.sort-dropdown{position:relative;flex-shrink:0}
.sort-dropdown__trigger{display:flex;align-items:center;gap:4px;padding:4px 8px;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;font-size:10px;color:var(--t2);cursor:pointer;transition:all var(--tf);-webkit-tap-highlight-color:transparent;user-select:none}
.sort-dropdown__trigger:active{background:var(--acd);border-color:var(--bdl)}
.sort-dropdown.open .sort-dropdown__trigger{border-color:var(--ac);background:var(--acd)}
.sort-dropdown__arrow{transition:transform var(--tf);flex-shrink:0}
.sort-dropdown.open .sort-dropdown__arrow{transform:rotate(180deg)}
.sort-dropdown__menu{position:absolute;top:calc(100% + 4px);right:0;min-width:120px;background:var(--bg2);border:1px solid var(--bdl);border-radius:var(--rm);box-shadow:var(--sm);z-index:50;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all var(--tf);padding:4px 0}
.sort-dropdown.open .sort-dropdown__menu{opacity:1;visibility:visible;transform:translateY(0)}
.sort-dropdown__item{display:flex;align-items:center;gap:5px;padding:8px 12px;font-size:12px;color:var(--t2);cursor:pointer;transition:all var(--tf);-webkit-tap-highlight-color:transparent;white-space:nowrap}
.sort-dropdown__item:active{background:var(--acd)}
.sort-dropdown__item.active{color:var(--ac);background:var(--acd)}
.sort-dropdown__ai-icon{color:var(--pu);flex-shrink:0}
.sort-dropdown__item.active .sort-dropdown__ai-icon{color:var(--ac)}

.ai-sort-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.ai-sort-card{background:var(--bgch);border:1px solid var(--bdl);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.3);max-width:380px;width:100%;overflow:hidden}
.ai-sort-card__head{display:flex;align-items:center;gap:6px;padding:14px 16px 8px;font-size:15px;font-weight:600;color:var(--t1)}
.ai-sort-card__hint{font-size:10px;color:var(--t3);font-weight:400;margin-left:auto}
.ai-sort-popup__badge{font-size:8px;padding:1px 5px;border-radius:4px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-weight:700;letter-spacing:.5px}
.ai-sort-card__list{max-height:50vh;overflow-y:auto;padding:4px 12px 8px}
.ai-sort-item{padding:10px 10px;border-radius:10px;background:var(--bgs);border:1px solid var(--bd);margin-bottom:6px;cursor:grab;transition:background var(--tf);position:relative;touch-action:none;user-select:none}
.ai-sort-item:active{cursor:grabbing}
.ai-sort-item--dragging{opacity:.85;background:var(--acd);z-index:10;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.ai-sort-item__row1{display:flex;align-items:center;gap:6px}
.ai-sort-item__grip{color:var(--t3);font-size:14px;flex-shrink:0;opacity:.5}
.ai-sort-item__num{font-size:11px;color:var(--t3);font-weight:700;min-width:16px;text-align:center;flex-shrink:0}
.ai-sort-item__pri{font-size:9px;padding:1px 5px;border-radius:4px;font-weight:600;flex-shrink:0}
.ai-sort-item__pri--u{background:rgba(239,68,68,.15);color:#ef4444}
.ai-sort-item__pri--h{background:rgba(249,115,22,.15);color:#f97316}
.ai-sort-item__pri--m{background:rgba(59,130,246,.15);color:#3b82f6}
.ai-sort-item__pri--l{background:rgba(34,197,94,.15);color:#22c55e}
.ai-sort-item__name{font-size:13px;color:var(--t1);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-sort-item__reason{font-size:11px;color:var(--ac);line-height:1.5;margin-top:4px;padding-left:28px;word-break:break-all}
.ai-sort-card__btns{display:flex;gap:8px;padding:8px 16px 14px}
.ai-sort-card__cancel{flex:1;padding:10px 0;border:1px solid var(--bd);border-radius:10px;background:transparent;color:var(--t2);font-size:14px;cursor:pointer;font-family:var(--fn);transition:background var(--tf)}
.ai-sort-card__cancel:active{background:var(--bgs)}
.ai-sort-card__confirm{flex:1;padding:10px 0;border:none;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--fn);transition:opacity var(--tf)}
.ai-sort-card__confirm:active{opacity:.8}

.ai-eat-overlay{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;transition:opacity .4s}
.ai-eat-overlay--done{opacity:0;pointer-events:none}
.ai-eat-scene{display:flex;flex-direction:column;align-items:center;gap:16px}
.ai-eat-face{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#a855f7);display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(124,58,237,.4);animation:aiBounce .8s ease-in-out infinite}
.ai-eat-face__inner{font-size:40px;animation:aiChew .4s ease-in-out infinite}
.ai-eat-tasks{font-size:13px;color:var(--ac);max-width:260px;text-align:center;transition:all .5s ease;opacity:1;transform:translateY(0)}
.ai-eat-overlay--eat .ai-eat-tasks{opacity:0;transform:translateY(-30px) scale(.5)}
.ai-eat-status{font-size:12px;color:var(--t3);opacity:0;transition:opacity .3s}
.ai-eat-overlay--digest .ai-eat-status{opacity:1}
.ai-eat-overlay--digest .ai-eat-face__inner{animation:aiDigest 1s ease-in-out infinite}
@keyframes aiBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes aiChew{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.85)}}
@keyframes aiDigest{0%{transform:rotate(0) scale(1)}25%{transform:rotate(-8deg) scale(1.05)}50%{transform:rotate(0) scale(.95)}75%{transform:rotate(8deg) scale(1.05)}100%{transform:rotate(0) scale(1)}}

.empty-state{text-align:center;padding:30px 20px}
.empty-state__text{font-size:14px;color:var(--t2);margin-bottom:4px}
.empty-state__hint{font-size:12px;color:var(--t3)}

.timer-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 160px);padding:10px 0}
.timer-mode{display:flex;gap:4px;background:var(--bgs);border-radius:24px;padding:3px;margin-bottom:20px;border:1px solid var(--bd)}
.timer-mode__btn{padding:8px 20px;border-radius:20px;font-size:13px;color:var(--t2);cursor:pointer;transition:all var(--tr);border:none;background:none;font-family:var(--fn)}
.timer-mode__btn.active{background:var(--ac);color:var(--bg);font-weight:600;box-shadow:var(--sg)}
.timer-mode__btn[data-mode="rest"].active{background:var(--gn);box-shadow:0 0 20px rgba(74,222,128,.2)}
.timer-ring-wrap{position:relative;width:240px;height:240px;margin-bottom:16px}
.timer-ring{width:100%;height:100%;transform:rotate(-90deg)}
.timer-ring__progress{transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 8px var(--acg))}
.timer-display{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.timer-display__time{font-size:48px;font-weight:200;color:var(--t1);font-variant-numeric:tabular-nums;letter-spacing:2px}
.timer-display__label{font-size:13px;color:var(--t3);margin-top:6px}
.timer-task-select{width:100%;max-width:280px;margin-bottom:12px}
.timer-select{width:100%;padding:10px 14px;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm);color:var(--t1);font-size:13px;font-family:var(--fn);appearance:none;-webkit-appearance:none;background-image:var(--sel-arrow);background-repeat:no-repeat;background-position:right 12px center}
.timer-custom-time{display:flex;gap:8px;width:100%;max-width:280px;margin-bottom:16px}
.timer-custom-time__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm)}
.timer-custom-time__lbl{font-size:10px;color:var(--t3)}
.timer-custom-time__val{font-size:16px;font-weight:700;color:var(--ac);font-variant-numeric:tabular-nums;min-width:20px;text-align:center}
.timer-custom-time__adj{width:24px;height:24px;border-radius:50%;border:1px solid var(--bdl);background:var(--bgs);color:var(--ac);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--tf);font-family:var(--fn)}
.timer-custom-time__adj:active{background:var(--acd);transform:scale(.9)}
.timer-controls{display:flex;align-items:center;gap:20px;margin-bottom:16px}
.timer-btn{border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--tr);font-family:var(--fn)}
.timer-btn--reset,.timer-btn--skip{width:44px;height:44px;border-radius:50%;background:var(--bgs);border:1px solid var(--bd);color:var(--t2)}
.timer-btn--reset svg,.timer-btn--skip svg{width:20px;height:20px}
.timer-btn--reset:active,.timer-btn--skip:active{transform:scale(.9);background:var(--acd)}
.timer-btn--main{width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--acl));color:var(--bg);box-shadow:0 4px 20px var(--acg)}
.timer-btn--main svg{width:24px;height:24px}
.timer-btn--main:active{transform:scale(.92)}
.timer-btn--main.running{animation:tP 2s ease-in-out infinite}
.timer-btn--main.waiting{background:linear-gradient(135deg,var(--gn),#86EFAC);box-shadow:0 4px 20px rgba(74,222,128,.3);animation:tPW 1.5s ease-in-out infinite}
@keyframes tP{0%,100%{box-shadow:0 4px 20px var(--acg)}50%{box-shadow:0 4px 30px var(--acg)}}
@keyframes tPW{0%,100%{box-shadow:0 4px 20px rgba(74,222,128,.3)}50%{box-shadow:0 4px 30px rgba(74,222,128,.5)}}
.timer-sessions{display:flex;gap:8px}
.timer-sessions__dot{width:8px;height:8px;border-radius:50%;background:var(--bd);transition:all var(--tr)}
.timer-sessions__dot.active{background:var(--ac);box-shadow:0 0 8px var(--acg)}
.timer-loop-info{font-size:12px;color:var(--t2);margin-top:8px;font-variant-numeric:tabular-nums}

.lb-summary{display:flex;gap:8px;margin-bottom:16px}
.lb-summary__item{flex:1;text-align:center;padding:10px 4px;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm)}
.lb-summary__val{display:block;font-size:16px;font-weight:700;color:var(--ac);font-variant-numeric:tabular-nums}
.lb-summary__lbl{display:block;font-size:10px;color:var(--t3);margin-top:2px}
.lb-day{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm);margin-bottom:6px;transition:all var(--tr)}
.lb-day--today{border-color:var(--ac);background:var(--bgs)}
.lb-day__rank{width:24px;height:24px;border-radius:50%;background:var(--bgs);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--t3);flex-shrink:0}
.lb-day--today .lb-day__rank{background:var(--acd);color:var(--ac);border-color:var(--ac)}
.lb-day__info{flex:1;min-width:0}
.lb-day__label{font-size:12px;color:var(--t2);margin-bottom:4px}
.lb-day__bar-wrap{height:6px;background:var(--bd);border-radius:3px;overflow:hidden}
.lb-day__bar{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--ac),var(--pu));transition:width .5s ease}
.lb-day--today .lb-day__bar{background:linear-gradient(90deg,var(--gn),#86EFAC)}
.lb-day__val{font-size:13px;font-weight:600;color:var(--ac);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:40px;text-align:right}

.stats-range{display:flex;gap:4px;background:var(--bgs);border-radius:20px;padding:2px;border:1px solid var(--bd)}
.stats-range__btn{padding:5px 14px;border-radius:18px;font-size:12px;color:var(--t2);cursor:pointer;transition:all var(--tf);border:none;background:none;font-family:var(--fn)}
.stats-range__btn.active{background:var(--acd);color:var(--ac)}
.stats-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.stats-overview__item{text-align:center;padding:16px 8px;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm)}
.stats-overview__value{font-size:22px;font-weight:700;color:var(--ac);font-variant-numeric:tabular-nums}
.stats-overview__label{font-size:11px;color:var(--t3);margin-top:4px}
.stats-chart-wrap{background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rl);padding:16px;margin-bottom:16px}
.stats-chart{display:flex;align-items:flex-end;justify-content:space-around;height:140px;gap:6px}
.stats-chart__bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.stats-chart__bar{width:100%;max-width:28px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--ac),var(--acg));transition:height .5s cubic-bezier(.4,0,.2,1);min-height:2px;position:relative}
.stats-chart__bar:hover::after{content:attr(data-val);position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--ac);white-space:nowrap;background:var(--bg2);padding:2px 6px;border-radius:4px}
.stats-chart__label{font-size:10px;color:var(--t3)}

.settings-group{margin-bottom:20px}
.settings-group__title{font-size:12px;color:var(--t3);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;padding-left:4px}
.setting-item{display:flex;align-items:center;justify-content:space-between;padding:14px;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm);margin-bottom:6px;transition:background var(--tf)}
.setting-item--action{cursor:pointer}
.setting-item--action:active{background:var(--bgch)}
.setting-item__label{font-size:14px}
.setting-item__control{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ac)}
.setting-adj{width:28px;height:28px;border-radius:50%;border:1px solid var(--bdl);background:var(--bgs);color:var(--ac);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--tf);font-family:var(--fn)}
.setting-adj:active{background:var(--acd);transform:scale(.9)}
.setting-val{min-width:24px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.toggle{position:relative;display:inline-block;width:44px;height:24px}
.toggle input{opacity:0;width:0;height:0}
.toggle__slider{position:absolute;inset:0;background:var(--bd);border-radius:12px;cursor:pointer;transition:all var(--tr)}
.toggle__slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:var(--t2);border-radius:50%;transition:all var(--tr)}
.toggle input:checked+.toggle__slider{background:var(--acd);border:1px solid var(--ac)}
.toggle input:checked+.toggle__slider::before{transform:translateX(20px);background:var(--ac)}
.setting-item__arrow{color:var(--t3);font-size:16px}

.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:flex-end;justify-content:center}
.modal-overlay.show{display:flex;animation:oI .2s ease}
@keyframes oI{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:500px;max-height:85vh;background:var(--bg2);border-radius:var(--rx) var(--rx) 0 0;overflow:hidden;display:flex;flex-direction:column;animation:mSU .3s cubic-bezier(.4,0,.2,1)}
@keyframes mSU{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--bd)}
.modal__title{font-size:16px;font-weight:600}
.modal__close{width:28px;height:28px;border:none;background:var(--bgs);border-radius:50%;color:var(--t2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all var(--tf)}
.modal__close:active{background:var(--rdd);color:var(--rd)}
.modal__body{padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}
.modal__body--detail{padding-bottom:0;display:flex;flex-direction:column}
.modal__footer{padding:12px 20px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--bd);background:var(--bg2);flex-shrink:0}

.form-group{margin-bottom:16px}
.form-label{display:block;font-size:13px;color:var(--t2);margin-bottom:6px}
.form-input{width:100%;padding:12px 14px;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm);color:var(--t1);font-size:14px;font-family:var(--fn);transition:border-color var(--tf);outline:none}
.form-input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acd)}
.form-input::placeholder{color:var(--t3)}
textarea.form-input{resize:vertical;min-height:60px;line-height:1.5}
.form-row{display:flex;gap:10px}
.form-row .form-group{flex:1}
.form-select{width:100%;padding:12px 14px;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm);color:var(--t1);font-size:14px;font-family:var(--fn);appearance:none;-webkit-appearance:none;outline:none;background-image:var(--sel-arrow);background-repeat:no-repeat;background-position:right 12px center}
.form-select:focus{border-color:var(--ac)}
.priority-selector{display:flex;gap:4px}
.priority-btn{flex:1;padding:8px 4px;border-radius:var(--rm);border:1px solid var(--bd);background:var(--bgc);color:var(--t2);font-size:12px;cursor:pointer;text-align:center;transition:all var(--tf);font-family:var(--fn)}
.priority-btn.active-h{border-color:var(--rd);background:var(--rdd);color:var(--rd)}
.priority-btn.active-m{border-color:var(--or);background:var(--ord);color:var(--or)}
.priority-btn.active-l{border-color:var(--gn);background:var(--gnd);color:var(--gn)}
.priority-btn.active-u{border-color:var(--ur);background:var(--urd);color:var(--ur)}
.dur-control{display:flex;align-items:center;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm);overflow:hidden}
.dur-adj{width:44px;height:44px;border:none;background:var(--bgs);color:var(--ac);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--tf);font-family:var(--fn);flex-shrink:0}
.dur-adj:active{background:var(--acd);transform:scale(.9)}
.dur-val{flex:1;text-align:center;font-size:18px;font-weight:700;color:var(--ac);font-variant-numeric:tabular-nums;padding:0 8px;border:none;background:transparent;outline:none;width:0;min-width:40px;font-family:var(--fn);-moz-appearance:textfield}
.dur-val::-webkit-inner-spin-button,.dur-val::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.dur-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.dur-quick__btn{padding:6px 12px;border-radius:16px;font-size:12px;color:var(--t2);background:var(--bgs);border:1px solid var(--bd);cursor:pointer;transition:all var(--tf);font-family:var(--fn)}
.dur-quick__btn:active{transform:scale(.9)}
.dur-quick__btn.active{background:var(--acd);color:var(--ac);border-color:var(--ac)}
.btn-submit{width:100%;padding:14px;background:linear-gradient(135deg,var(--ac),var(--acl));color:var(--bg);border:none;border-radius:var(--rm);font-size:15px;font-weight:600;cursor:pointer;transition:all var(--tr);font-family:var(--fn);margin-top:8px}
.btn-submit:active{transform:scale(.97);opacity:.9}
.btn-delete{width:100%;padding:14px;background:var(--rdd);color:var(--rd);border:1px solid rgba(248,113,113,.3);border-radius:var(--rm);font-size:14px;cursor:pointer;transition:all var(--tr);font-family:var(--fn);margin-top:8px}
.btn-delete:active{transform:scale(.97);background:rgba(248,113,113,.2)}

.modal-footer-btns{display:flex;justify-content:space-between;gap:10px;margin-top:8px}
.modal-footer-btns .btn-delete,
.modal-footer-btns .btn-submit{margin-top:0}
.modal-footer-btns .btn-delete{flex:1}
.modal-footer-btns .btn-submit{flex:2}

.toast-container{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{padding:10px 20px;border-radius:var(--rm);font-size:13px;color:var(--t1);background:var(--bg2);border:1px solid var(--bd);box-shadow:var(--sm);animation:tI .3s ease,tO .3s ease 2.5s forwards;white-space:pre-wrap;word-break:break-all;max-width:90vw;max-height:40vh;overflow-y:auto}
.toast--success{border-color:var(--gn);color:var(--gn)}
.toast--error{border-color:var(--rd);color:var(--rd)}
.toast--info{border-color:var(--ac);color:var(--ac)}
@keyframes tI{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes tO{from{opacity:1}to{opacity:0;transform:translateY(-10px)}}

.sync-card-container{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom,0px) + 16px);left:16px;right:16px;z-index:250;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.sync-card{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:var(--rm);font-size:13px;color:var(--t1);background:var(--bgc);border:1px solid var(--bdl);box-shadow:var(--sm);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:scI .3s ease;pointer-events:auto;transition:all .4s ease}
.sync-card--out{opacity:0;transform:translateY(10px)}
.sync-card__text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sync-card__close{flex-shrink:0;width:20px;height:20px;border:none;background:rgba(255,255,255,.08);color:var(--t2);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;margin-left:8px;transition:all var(--tf);padding:0;line-height:1}
.sync-card__close:hover{background:rgba(255,255,255,.15);color:var(--t1)}
@keyframes scI{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.fab{position:fixed;right:20px;bottom:calc(80px + env(safe-area-inset-bottom,0px) + 30px);width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--acl));color:var(--bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px var(--acg);z-index:50;transition:all var(--tr);animation:fI .5s cubic-bezier(.4,0,.2,1) .5s both}
@keyframes fI{from{transform:scale(0) rotate(-180deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.fab svg{width:22px;height:22px}
.fab:active{transform:scale(.9)}
.proposal-fab{position:fixed;right:20px;bottom:calc(80px + env(safe-area-inset-bottom,0px) + 86px);width:44px;height:44px;border-radius:14px;border:1px solid var(--bdl);background:linear-gradient(135deg,var(--ac),var(--acl));color:var(--bg);font-size:20px;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.3),0 0 16px var(--acg);z-index:50;transition:transform .2s,box-shadow .2s,filter .2s}
.proposal-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 26px rgba(0,0,0,.38),0 0 22px var(--acg);filter:brightness(1.04)}
.proposal-fab:active{transform:scale(.96)}
.proposal-overlay{position:fixed;inset:0;z-index:255;background:rgba(4,6,14,.78);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:16px}
.proposal-overlay.show{display:flex}
.proposal-card{position:relative;width:min(92vw,420px);background:linear-gradient(180deg,rgba(16,22,50,.98),rgba(8,12,28,.98));border:1px solid var(--bdh);border-radius:22px;padding:24px 20px 22px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.proposal-close-btn{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:1px solid var(--bd);background:var(--bgs);color:var(--t3);font-size:16px;cursor:pointer;display:grid;place-items:center}
.proposal-close-btn:hover{border-color:var(--rd);color:var(--rd)}
.proposal-emoji{font-size:34px;text-align:center;margin-bottom:10px}
.proposal-card h3{text-align:center;font-size:20px;color:var(--t1);margin-bottom:10px}
.proposal-desc{font-size:14px;line-height:1.8;color:var(--t2);text-align:center}
.proposal-go-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--ac),var(--acl));color:#fff;text-decoration:none;font-weight:700;box-shadow:0 10px 24px var(--bdh)}
.proposal-go-btn:hover{filter:brightness(1.05)}
.thanks-board{padding:16px;border:1px solid var(--bdl);border-radius:18px;background:linear-gradient(180deg,var(--bd),var(--bgs));color:var(--t2);box-shadow:0 10px 28px rgba(0,0,0,.18)}
.thanks-board-title{display:flex;align-items:center;justify-content:flex-start;gap:8px;font-size:14px;font-weight:800;color:var(--ac);margin-bottom:10px;letter-spacing:1px}
.thanks-board-text{font-size:12px;line-height:1.8;color:var(--t3);text-align:left;margin-bottom:12px}
.thanks-board-list{display:flex;flex-direction:column;gap:10px;align-items:stretch;margin-top:8px}
.thanks-board-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--bdl);background:rgba(255,255,255,.03)}
.thanks-board-rank{flex-shrink:0;min-width:64px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;font-size:11px;font-weight:800;letter-spacing:.5px;background:var(--bdl);color:var(--ac)}
.thanks-board-name{font-size:13px;line-height:1.6;color:var(--t2);font-weight:700}
.thanks-board-role{display:block;font-size:11px;line-height:1.4;color:var(--t3);font-weight:500;margin-top:2px}
.thanks-action-row{display:flex;justify-content:center;margin:12px 0 8px}
.thanks-proposal-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--bdh);background:linear-gradient(135deg,var(--bdl),var(--acd));color:var(--t1);font-size:13px;font-weight:800;text-decoration:none;box-shadow:0 10px 20px rgba(0,0,0,.12);transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;cursor:pointer}
.thanks-proposal-btn:hover{transform:translateY(-1px);border-color:var(--ac);background:linear-gradient(135deg,var(--bdh),var(--acg));box-shadow:0 14px 26px rgba(0,0,0,.16)}
.thanks-proposal-btn .tp-emoji{font-size:16px}
.thanks-section-title{font-size:13px;font-weight:800;color:var(--or);margin:14px 0 4px;letter-spacing:.5px}
.sponsor-rank{background:rgba(255,169,64,.16)!important;color:var(--or)!important}
.sponsor-placeholder{border-style:dashed;opacity:.7}
.sponsor-btn{border-color:rgba(255,169,64,.35)!important;background:linear-gradient(135deg,rgba(255,169,64,.18),rgba(255,210,119,.12))!important}
.sponsor-btn:hover{border-color:var(--or)!important;background:linear-gradient(135deg,rgba(255,169,64,.28),rgba(255,210,119,.22))!important}
.sponsor-overlay{display:none;position:fixed;inset:0;background:rgba(4,6,14,.65);backdrop-filter:blur(8px);z-index:256;justify-content:center;align-items:center;padding:16px}
.sponsor-overlay.open{display:flex}
.sponsor-card{width:min(400px,90vw);border-radius:20px;border:1px solid rgba(255,169,64,.3);background:linear-gradient(160deg,rgba(30,22,12,.97),rgba(16,12,8,.98));box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 60px rgba(255,169,64,.1);padding:28px 24px 24px;text-align:center;animation:sponsorIn .35s ease;position:relative;overflow:hidden}
.sponsor-card::before{content:"";position:absolute;width:240px;height:240px;top:-100px;right:-80px;background:radial-gradient(circle,rgba(255,169,64,.18),transparent 70%);pointer-events:none}
.sponsor-card::after{content:"";position:absolute;width:180px;height:180px;bottom:-60px;left:-50px;background:radial-gradient(circle,rgba(255,210,119,.12),transparent 70%);pointer-events:none}
@keyframes sponsorIn{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.sponsor-close-btn{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,169,64,.2);background:rgba(30,22,12,.5);color:var(--t3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;z-index:1}
.sponsor-close-btn:hover{color:var(--or)}
.sponsor-emoji{font-size:48px;line-height:1;margin-bottom:8px;position:relative;z-index:1;animation:emojiBounce 2s ease-in-out infinite}
@keyframes emojiBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sponsor-title{margin:0 0 4px;font-size:22px;font-weight:800;background:linear-gradient(90deg,#ffa940,#ffd277,#ffa940);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s linear infinite;position:relative;z-index:1}
@keyframes shimmer{0%{background-position:0% center}100%{background-position:200% center}}
.sponsor-subtitle{margin:0 0 20px;font-size:13px;color:var(--t3);line-height:1.5;position:relative;z-index:1}
.sponsor-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;position:relative;z-index:1}
.sponsor-amount-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 6px;border-radius:14px;border:1.5px solid rgba(255,169,64,.2);background:rgba(255,169,64,.06);color:var(--t1);cursor:pointer;transition:.2s ease;font-family:inherit}
.sponsor-amount-btn .amount-icon{font-size:20px;line-height:1;transition:transform .2s}
.sponsor-amount-btn .amount-value{font-size:15px;font-weight:800;color:#ffd277}
.sponsor-amount-btn .amount-label{font-size:10px;color:var(--t3);white-space:nowrap}
.sponsor-amount-btn:hover{border-color:rgba(255,169,64,.5);background:rgba(255,169,64,.12);transform:translateY(-2px)}
.sponsor-amount-btn:hover .amount-icon{transform:scale(1.2)}
.sponsor-amount-btn.active{border-color:#ffa940;background:linear-gradient(135deg,rgba(255,169,64,.2),rgba(255,210,119,.12));box-shadow:0 0 16px rgba(255,169,64,.15)}
.sponsor-amount-btn.active .amount-value{color:#ffa940}
.sponsor-custom-amount{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;border:1.5px solid rgba(255,169,64,.2);background:rgba(255,169,64,.06);transition:.2s}
.sponsor-custom-amount:focus-within{border-color:#ffa940;background:rgba(255,169,64,.1)}
.custom-prefix{font-size:18px;font-weight:800;color:#ffa940}
.custom-amount-input{flex:1;border:none;outline:none;background:transparent;color:var(--t1);font-size:18px;font-weight:700;font-family:inherit;min-width:0}
.custom-amount-input::placeholder{color:var(--t3);font-weight:400}
.custom-amount-input::-webkit-outer-spin-button,.custom-amount-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.custom-amount-input[type=number]{-moz-appearance:textfield}
.sponsor-message-wrap{margin-bottom:14px;position:relative;z-index:1}
.sponsor-message-input{width:100%;height:42px;padding:0 14px;border-radius:14px;border:1.5px solid rgba(255,169,64,.2);background:rgba(255,169,64,.06);color:var(--t1);font-size:13px;font-family:inherit;outline:none;transition:.2s;box-sizing:border-box}
.sponsor-message-input::placeholder{color:var(--t3)}
.sponsor-message-input:focus{border-color:#ffa940;background:rgba(255,169,64,.1)}
.sponsor-pay-btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 36px;border-radius:999px;border:none;background:linear-gradient(135deg,#ffa940,#ff7b87,#ffa940);background-size:200% auto;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:.2s;box-shadow:0 4px 20px rgba(255,169,64,.4);position:relative;z-index:1;animation:payBtnGlow 2.5s ease-in-out infinite;font-family:inherit}
@keyframes payBtnGlow{0%,100%{box-shadow:0 4px 20px rgba(255,169,64,.4)}50%{box-shadow:0 4px 28px rgba(255,123,135,.5)}}
.sponsor-pay-btn:hover{transform:translateY(-2px);background-position:right center;box-shadow:0 6px 28px rgba(255,169,64,.55)}
.sponsor-pay-btn .pay-btn-icon{font-size:20px}
.sponsor-hint{margin:12px 0 0;font-size:11px;color:var(--t3);line-height:1.5;position:relative;z-index:1}
.sponsor-toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-120%);z-index:9999;display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:16px;border:1px solid rgba(255,169,64,.4);background:linear-gradient(135deg,rgba(30,22,12,.96),rgba(16,12,8,.98));backdrop-filter:blur(16px);box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 40px rgba(255,169,64,.15);transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s ease;opacity:0;pointer-events:none;white-space:nowrap}
.sponsor-toast.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.sponsor-toast-icon{font-size:24px;line-height:1}
.sponsor-toast-text{font-size:14px;font-weight:700;color:#ffd277;letter-spacing:.3px}
.sponsor-item{animation:sponsorFadeIn .4s ease both}
@keyframes sponsorFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sponsor-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sponsor-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sponsor-amount-badge{font-size:11px;font-weight:800;color:#ffa940;background:rgba(255,169,64,.14);border-radius:999px;padding:2px 8px;letter-spacing:.3px;white-space:nowrap}
.sponsor-msg{color:var(--t2);font-style:italic;font-size:12px;line-height:1.5}
.sponsor-time{font-size:10px!important;color:var(--t3)!important;margin-top:1px}

.fireworks-canvas{position:fixed;inset:0;z-index:250;pointer-events:none;display:none}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.4s!important;transition-duration:1s!important}.task-item--active::after{animation-duration:var(--raster-speed)!important}}
@media(min-width:500px)and(max-width:767px){.main-container{max-width:500px;margin:0 auto}.nav-bar__inner{max-width:500px}}

/* === PC端响应式适配（模块化） ===
   核心策略：.app保持纵向布局，导航栏PC端改为左侧fixed，内容区margin-left偏移
   768px+：平板/小屏PC — 侧边导航 + 内容区放宽
   1024px+：标准PC — 内容区限宽居中，各组件放大
   1440px+：大屏PC — 更宽敞间距和字号
*/

/* ── 768px+ 平板/小屏PC ── */
@media(min-width:768px){
  /* ─ 导航栏：底部→左侧 ─ */
  .nav-bar{top:0;left:0;bottom:0;right:auto;width:72px;border-top:none;border-right:1px solid var(--bd);padding:0;padding-bottom:0;background:rgba(8,12,22,.97)}
  .nav-bar__inner{flex-direction:column;max-width:none;height:100%;padding:0;justify-content:flex-end;gap:0}
  .nav-bar__inner::before{content:'⏱';display:flex;align-items:center;justify-content:center;height:64px;font-size:22px;opacity:.7;margin-bottom:auto}
  .nav-item{padding:12px 6px;font-size:9px;gap:3px;border-radius:0;position:relative;transition:all .2s}
  .nav-item__icon{width:24px;height:24px}
  .nav-item:hover{color:var(--t2);background:rgba(164,239,249,.04)}
  .nav-item.active{color:var(--ac);background:rgba(164,239,249,.06)}
  .nav-item.active::after{top:50%;left:0;right:auto;transform:translateY(-50%);width:2px;height:24px;margin-top:0;border-radius:0 1px 1px 0;box-shadow:2px 0 8px var(--acg)}
  .nav-item:not(:last-child)::before{content:'';position:absolute;bottom:0;left:20%;right:20%;height:1px;background:var(--bd)}

  /* ─ 内容区偏移 ─ */
  .main-container{max-width:none;margin-left:72px;padding-bottom:0}

  /* ─ 钥匙头部：限制最大宽度，保持钥匙造型比例 ─ */
  .key-header{padding:14px 24px 10px;max-width:420px;margin:0 auto}
  .key-ring{width:112px;height:112px}
  .key-ring__time{font-size:28px}
  .key-ring__date{font-size:11px}
  .key-ring__greeting{font-size:10px}
  .key-stat__cell{height:38px}
  .key-stat__val{font-size:15px}
  .key-stat__lbl{font-size:10px}

  /* ─ 面板内边距 ─ */
  .tab-panel{padding:0 24px 24px}

  /* ─ 任务列表：hover+阴影，保持单列 ─ */
  .task-item{padding:14px 16px;transition:all .2s}
  .task-item:hover{border-color:var(--bdl);box-shadow:0 2px 12px rgba(0,0,0,.2)}
  .task-title{font-size:15px}

  /* ─ 番茄钟 ─ */
  .timer-wrap{min-height:calc(100vh - 200px);padding:20px 0}
  .timer-ring-wrap{width:260px;height:260px}
  .timer-display__time{font-size:50px}
  .timer-select,.timer-custom-time{max-width:300px}

  /* ─ 统计图表 ─ */
  .stats-chart{height:170px}

  /* ─ 模态框居中弹出 ─ */
  .modal-overlay{align-items:center;padding:20px}
  .modal{border-radius:var(--rx);max-width:460px}
  @keyframes mSU{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}

  /* ─ 设置项hover ─ */
  .setting-item--action:hover{background:var(--bgch)}

  /* ─ FAB/浮动元素偏移 ─ */
  .fab,.proposal-fab{right:24px;bottom:24px}
  .sync-card-container{left:92px;right:24px;bottom:16px}
  .qc-overlay{left:72px}
  .quick-config{right:24px}
  .voice-guide{left:calc(50% + 36px);bottom:24px}
}

/* ── 1024px+ 标准PC ── */
@media(min-width:1024px){
  /* ─ 导航栏 ─ */
  .nav-bar{width:80px}
  .nav-bar__inner::before{font-size:26px;height:72px}
  .nav-item{padding:14px 8px;font-size:10px;gap:4px}
  .nav-item__icon{width:26px;height:26px}

  /* ─ 内容区 ─ */
  .main-container{margin-left:80px}
  .tab-panel{max-width:880px;margin:0 auto}

  /* ─ 钥匙头部：保持钥匙造型 ─ */
  .key-header{padding:16px 32px 12px;max-width:460px;margin:0 auto}
  .key-ring{width:118px;height:118px}
  .key-ring__time{font-size:30px}
  .key-shaft__username{font-size:11px;max-width:100px}

  /* ─ 面板 ─ */
  .tab-panel{padding:0 32px 28px}

  /* ─ 仪表盘：待完成/已完成左右模块化布局 ─ */
  #panel-dashboard.active{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start}
  #panel-dashboard>.section-header{grid-column:1;grid-row:1}
  #panel-dashboard>#pendingList{grid-column:1;grid-row:2}
  #panel-dashboard>.section-header--done{grid-column:2;grid-row:1}
  #panel-dashboard>#doneList{grid-column:2;grid-row:2}

  /* ─ 任务列表：保持单列，hover浮起 ─ */
  .task-item{padding:14px 18px}
  .task-item:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.25)}

  /* ─ 番茄钟 ─ */
  .timer-wrap{min-height:calc(100vh - 220px);padding:24px 0}
  .timer-ring-wrap{width:280px;height:280px}
  .timer-display__time{font-size:58px}
  .timer-select,.timer-custom-time{max-width:340px}

  /* ─ 统计 ─ */
  .stats-overview__value{font-size:26px}
  .stats-chart{height:190px}
  .stats-chart__bar{max-width:34px}
  .stats-chart__bar:hover::after{font-size:11px;padding:3px 8px}

  /* ─ 模态框 ─ */
  .modal{max-width:500px}

  /* ─ FAB/浮动元素 ─ */
  .fab,.proposal-fab{right:32px;bottom:28px}
  .sync-card-container{left:108px;right:32px;bottom:20px}
  .qc-overlay{left:80px}
  .quick-config{right:32px;width:270px}
  .login-qr-card{max-width:360px}
  .sponsor-card{max-width:440px}
  .proposal-card{max-width:460px}
  .voice-guide{left:calc(50% + 40px);bottom:28px}
}

/* ── 1440px+ 大屏PC ── */
@media(min-width:1440px){
  /* ─ 导航栏 ─ */
  .nav-bar{width:88px}
  .nav-bar__inner::before{font-size:28px;height:80px}
  .nav-item{padding:16px 10px;font-size:11px;gap:5px}
  .nav-item__icon{width:28px;height:28px}

  /* ─ 内容区 ─ */
  .main-container{margin-left:88px}
  .tab-panel{max-width:1040px}

  /* ─ 钥匙头部 ─ */
  .key-header{padding:18px 40px 14px;max-width:500px;margin:0 auto}
  .key-ring{width:124px;height:124px}
  .key-ring__time{font-size:32px}

  /* ─ 面板 ─ */
  .tab-panel{padding:0 40px 32px}
  .section-title{font-size:17px}

  /* ─ 任务列表 ─ */
  .task-item{padding:16px 20px}
  .task-title{font-size:16px}
  .task-note{font-size:13px}

  /* ─ 番茄钟 ─ */
  .timer-ring-wrap{width:300px;height:300px}
  .timer-display__time{font-size:64px}
  .timer-select,.timer-custom-time{max-width:380px}

  /* ─ 统计 ─ */
  .stats-overview__value{font-size:28px}
  .stats-chart{height:210px}

  /* ─ 模态框 ─ */
  .modal{max-width:540px}

  /* ─ FAB/浮动元素 ─ */
  .fab,.proposal-fab{right:40px;bottom:32px}
  .sync-card-container{left:116px;right:40px;bottom:24px}
  .qc-overlay{left:88px}
  .quick-config{right:40px;width:290px}
  .voice-guide{left:calc(50% + 44px);bottom:32px}
}

.goto-tomato{display:flex;flex-direction:column;gap:14px}
.goto-tomato__intro{font-size:13px;color:var(--t2);line-height:1.55;padding:10px 12px;background:var(--bgs);border-radius:var(--rm);border-left:3px solid var(--ac)}
.goto-tomato__card{padding:16px;background:linear-gradient(135deg,var(--bgs),var(--scd));border:1px solid var(--bdl);border-radius:var(--rl);display:flex;flex-direction:column;gap:10px}
.goto-tomato__head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.goto-pri{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;letter-spacing:.3px}
.goto-pri--h{color:var(--rd);background:var(--rdd)}
.goto-pri--m{color:var(--or);background:var(--ord)}
.goto-pri--l{color:var(--gn);background:var(--gnd)}
.goto-pri--u{color:var(--ur);background:var(--urd)}
.goto-tomato__title{font-size:17px;font-weight:600;color:var(--t1);line-height:1.4;word-break:break-all}
.goto-tomato__desc{font-size:12px;color:var(--t2);line-height:1.5;word-break:break-all;padding:8px 10px;background:var(--bgs);border-radius:var(--rs)}
.goto-tomato__stats{display:flex;gap:8px;margin-top:2px}
.goto-stat{flex:1;text-align:center;padding:10px 4px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rm)}
.goto-stat__val{font-size:20px;font-weight:700;color:var(--ac);font-variant-numeric:tabular-nums;line-height:1}
.goto-stat__val span{font-size:11px;font-weight:400;color:var(--t3);margin-left:2px}
.goto-stat__lbl{font-size:10px;color:var(--t3);margin-top:4px}
.goto-progress{height:4px;background:var(--bd);border-radius:2px;overflow:hidden;margin-top:4px}
.goto-progress__bar{height:100%;background:linear-gradient(90deg,var(--ac),var(--pu));border-radius:2px;transition:width .4s ease}
.goto-progress__lbl{font-size:11px;color:var(--t3);text-align:right;font-variant-numeric:tabular-nums}
.goto-tomato__warn{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--or);background:var(--ord);padding:10px 12px;border-radius:var(--rm);border:1px solid rgba(251,146,60,.2);line-height:1.5}
.goto-tomato__warn svg{flex-shrink:0;margin-top:2px}
.goto-tomato__actions{display:flex;gap:10px;margin-top:6px}
.goto-tomato__actions .btn-cancel{flex:1;padding:14px;background:var(--bgs);color:var(--t1);border:1px solid var(--bd);border-radius:var(--rm);font-size:14px;cursor:pointer;font-family:var(--fn);transition:all var(--tf)}
.goto-tomato__actions .btn-cancel:active{transform:scale(.97);background:var(--bgc)}
.goto-tomato__actions .btn-submit{flex:2;margin-top:0}

.tomato-task{width:100%;max-width:300px;padding:12px 14px;margin-bottom:14px;background:linear-gradient(135deg,var(--bd),var(--scd));border:1px solid var(--bdl);border-radius:var(--rm);display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.tomato-task__title{font-size:14px;font-weight:600;color:var(--t1);line-height:1.4;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tomato-task__stats{display:flex;justify-content:space-between;gap:6px;font-size:11px;color:var(--t2);font-variant-numeric:tabular-nums}
.tomato-task__stats span{flex:1;text-align:center}
.tomato-task__progress{height:3px;background:var(--bd);border-radius:2px;overflow:hidden}
.tomato-task__progress-bar{height:100%;background:linear-gradient(90deg,var(--ac),var(--pu));border-radius:2px;transition:width .5s ease}

.timer-display__label{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}

.timer-btn--complete{border:none;background:linear-gradient(135deg,var(--gn),#34D399);color:var(--bg);border-radius:50%;width:44px;height:44px;cursor:pointer;transition:all var(--tf);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(52,211,153,.35)}
.timer-btn--complete svg{width:22px;height:22px}
.timer-btn--complete:active{transform:scale(.95)}

.tomato-task__desc{font-size:12px;color:var(--t2);line-height:1.5;padding:6px 8px;background:var(--bgs);border-radius:var(--rs);word-break:break-all;margin-top:2px}

.fireworks-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:flex;align-items:center;justify-content:center}
.fireworks-canvas-wrap{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.fireworks-canvas{width:100%;height:100%;display:none}
.fw-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;transition:opacity .5s ease;z-index:2}
.fw-emoji{font-size:48px;animation:fwEmojiPop .5s ease forwards}
@keyframes fwEmojiPop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
.fw-status{padding:16px 28px;background:rgba(10,14,26,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--rl);border:1px solid var(--bdh);text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.fw-title{font-size:22px;font-weight:700;color:var(--t1);line-height:1.3}
.fw-sub{font-size:13px;color:var(--t2);margin-top:6px;line-height:1.4}
.fw-status--early{border-color:rgba(255,215,0,.4);box-shadow:0 8px 32px rgba(255,215,0,.25)}
.fw-status--early .fw-title{color:#FFD700}
.fw-status--ontime{border-color:var(--acg);box-shadow:0 8px 32px var(--bdh)}
.fw-status--ontime .fw-title{color:var(--ac)}
.fw-status--late{border-color:rgba(251,146,60,.4);box-shadow:0 8px 32px rgba(251,146,60,.25)}
.fw-status--late .fw-title{color:#FB923C}

.detail-card{display:flex;flex-direction:column;gap:16px}
.detail-header{display:flex;flex-direction:column;gap:8px}
.detail-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.detail-title{font-size:18px;font-weight:700;color:var(--t1);line-height:1.4;flex:1;word-break:break-all}
.detail-status{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:4px 10px;border-radius:12px;font-weight:500;flex-shrink:0;white-space:nowrap}
.detail-status--done{color:var(--gn);background:var(--gnd)}
.detail-status--active{color:var(--ac);background:var(--acd);animation:detailPulse 2s ease-in-out infinite}
@keyframes detailPulse{0%,100%{box-shadow:0 0 0 0 var(--bdl)}50%{box-shadow:0 0 0 4px var(--bd)}}
.detail-status--pending{color:var(--t2);background:var(--bgs);border:1px solid var(--bd)}
.detail-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.detail-pri{font-size:10px;padding:3px 10px;border-radius:10px;font-weight:600;letter-spacing:.3px}
.detail-pri--h{color:var(--rd);background:var(--rdd)}
.detail-pri--m{color:var(--or);background:var(--ord)}
.detail-pri--l{color:var(--gn);background:var(--gnd)}
.detail-pri--u{color:var(--ur);background:var(--urd)}
.detail-rc{font-size:10px;padding:3px 10px;border-radius:10px;font-weight:600;color:#22c55e;background:rgba(34,197,94,.12)}
.detail-stats{display:flex;gap:8px}
.detail-stat{flex:1;text-align:center;padding:14px 6px;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm)}
.detail-stat__val{font-size:22px;font-weight:700;color:var(--ac);font-variant-numeric:tabular-nums;line-height:1}
.detail-stat__val span{font-size:11px;font-weight:400;color:var(--t3);margin-left:1px}
.detail-stat__val--over{color:var(--or)}
.detail-stat__lbl{font-size:10px;color:var(--t3);margin-top:6px}
.detail-progress{height:6px;background:var(--bd);border-radius:3px;overflow:hidden;margin-top:2px}
.detail-progress__bar{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--ac),var(--pu));transition:width .5s ease}
.detail-progress__lbl{font-size:11px;color:var(--t3);text-align:right;font-variant-numeric:tabular-nums;margin-top:4px}
.detail-section{display:flex;flex-direction:column;gap:8px}
.detail-section__title{font-size:12px;color:var(--t3);font-weight:600;letter-spacing:.5px;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.detail-section__actions{margin-left:auto;display:flex;gap:4px}
.detail-section__act{width:26px;height:26px;border:none;background:var(--bgs);border-radius:6px;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all var(--tf)}
.detail-section__act:active{color:var(--ac);background:var(--acd)}
.detail-section__count{font-size:10px;padding:1px 6px;border-radius:8px;background:var(--acd);color:var(--ac);font-weight:500}
.detail-desc{font-size:13px;color:var(--t2);line-height:1.6;padding:12px 14px;background:var(--bgs);border-radius:var(--rm);border-left:3px solid var(--ac);word-break:break-all}
.detail-timers{display:flex;flex-direction:column;gap:0;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm);overflow:hidden;max-height:180px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.detail-section__title--clickable{cursor:pointer;transition:color var(--tf)}
.detail-section__title--clickable:active{color:var(--ac)}
.detail-section__title--clickable::after{content:'查看全部';font-size:10px;color:var(--ac);font-weight:400;margin-left:auto;letter-spacing:0;text-transform:none}
.detail-timer-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--bd)}
.detail-timer-item:last-child{border-bottom:none}
.detail-timer-item--active{background:var(--bgs)}
.detail-timer__dot--pulse{animation:detailPulse 1.5s ease-in-out infinite}
@keyframes detailPulse{0%,100%{box-shadow:0 0 0 0 var(--acm)}50%{box-shadow:0 0 0 5px transparent}}
.detail-timer__dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.detail-timer__info{flex:1;display:flex;align-items:center;justify-content:space-between}
.detail-timer__time{font-size:12px;color:var(--t2);font-variant-numeric:tabular-nums}
.detail-timer__dur{font-size:12px;color:var(--ac);font-weight:600;font-variant-numeric:tabular-nums}
.detail-meta{display:flex;flex-direction:column;gap:6px;padding:12px 14px;background:var(--bgs);border-radius:var(--rm)}
.detail-meta__item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums}
.detail-meta__item svg{flex-shrink:0;opacity:.6}
.detail-actions{display:flex;gap:8px;margin-top:4px}
.detail-btn{flex:1;padding:12px 8px;border-radius:var(--rm);font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:var(--fn);transition:all var(--tf);text-align:center}
.detail-btn:active{transform:scale(.96);opacity:.9}
.detail-btn--edit{background:var(--bgs);color:var(--t1);border:1px solid var(--bd)}
.detail-btn--play{background:linear-gradient(135deg,var(--ac),var(--acl));color:var(--bg)}
.detail-btn--pause{background:var(--acd);color:var(--ac);border:1px solid var(--bdl)}
.detail-btn--done{background:var(--gnd);color:var(--gn);border:1px solid rgba(74,222,128,.3)}
.detail-btn--restore{background:var(--ord);color:var(--or);border:1px solid rgba(251,146,60,.3)}

.color-selector{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.color-dot{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all var(--tf);flex-shrink:0;position:relative}
.color-dot:active{transform:scale(.9)}
.color-dot--active{border-color:var(--t1);box-shadow:0 0 8px rgba(255,255,255,.2)}
.color-dot--active::after{content:'';position:absolute;inset:3px;border-radius:50%;border:2px solid var(--bg2)}
.color-dot[data-cl=""]{background:var(--bgc)!important;border:2px dashed var(--bd)}
.color-dot[data-cl=""]::before{content:'✕';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t3)}

.task-color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-left:6px}

.task-item[data-cl="yl"]::before{background:var(--yl)!important}
.task-item[data-cl="gn"]::before{background:var(--gn)!important}
.task-item[data-cl="ac"]::before{background:var(--ac)!important}
.task-item[data-cl="pu"]::before{background:var(--pu)!important}
.task-item[data-cl="or"]::before{background:var(--or)!important}
.task-item[data-cl="rd"]::before{background:var(--rd)!important}
.task-item[data-cl="ur"]::before{background:var(--ur)!important}

.detail-card--themed{border-top:2px solid var(--da);background:radial-gradient(ellipse at 50% 0%,var(--dab) 0%,transparent 70%)}
.detail-card--themed .detail-stat__val{color:var(--da)}
.detail-card--themed .detail-progress__bar{background:linear-gradient(90deg,var(--da),var(--dag))}
.detail-card--themed .detail-desc{border-left-color:var(--da)}
.detail-card--themed .detail-timer__dur{color:var(--da)}
.detail-card--themed .detail-status--active{color:var(--da);background:var(--dab)}
.detail-card--themed .detail-status--pending{color:var(--da);background:var(--dab);border-color:var(--da)}
.detail-card--themed .detail-btn--play{background:linear-gradient(135deg,var(--da),var(--dag))}
.detail-card--themed .detail-btn--pause{background:var(--dab);color:var(--da);border-color:var(--da)}
.detail-card--themed .detail-section__count{background:var(--dab);color:var(--da)}
.detail-card--themed .detail-timer__dot{background:var(--da)!important}
.detail-card--themed .detail-timer-item--active{background:var(--dab)}
.detail-card--themed .detail-timer__dot--pulse{animation-name:detailPulseThemed}
@keyframes detailPulseThemed{0%,100%{box-shadow:0 0 0 0 var(--dag)}50%{box-shadow:0 0 0 5px transparent}}

.detail-stat__val--auto{transition:font-size .2s ease}

.timer-popup-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center}
.timer-popup-overlay.show{display:flex;animation:oI .2s ease}
.timer-popup{width:90%;max-width:380px;max-height:70vh;background:var(--bg2);border-radius:var(--rl);overflow:hidden;display:flex;flex-direction:column;animation:tpI .25s cubic-bezier(.4,0,.2,1)}
@keyframes tpI{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.timer-popup__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bd)}
.timer-popup__title{font-size:15px;font-weight:600}
.timer-popup__close{width:28px;height:28px;border:none;background:var(--bgs);border-radius:50%;color:var(--t2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all var(--tf)}
.timer-popup__close:active{background:var(--rdd);color:var(--rd)}
.timer-popup__body{padding:16px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.timer-popup__list{display:flex;flex-direction:column;gap:0;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm);overflow:hidden}
.timer-popup__item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--bd)}
.timer-popup__item:last-child{border-bottom:none}
.timer-popup__dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.timer-popup__info{flex:1;display:flex;align-items:center;justify-content:space-between}
.timer-popup__time{font-size:13px;color:var(--t2);font-variant-numeric:tabular-nums}
.timer-popup__dur{font-size:13px;color:var(--ac);font-weight:600;font-variant-numeric:tabular-nums}

.task-alarm-badge{color:var(--yl);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;pointer-events:none;gap:3px}
.task-alarm-badge--repeat{color:var(--ac)}
.task-alarm-cd{font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
.task-rc-badge{font-size:10px;padding:2px 6px;border-radius:8px;background:rgba(34,197,94,.12);color:#22c55e;flex-shrink:0;margin-left:4px;font-weight:500;white-space:nowrap}
.task-done-days{font-size:11px;padding:1px 8px;border-radius:8px;background:var(--acd);color:var(--ac);font-variant-numeric:tabular-nums;white-space:nowrap}
.task-age{font-size:11px;padding:1px 8px;border-radius:8px;background:var(--ord);color:var(--or);font-variant-numeric:tabular-nums;white-space:nowrap}
.task-tn-badge{font-size:10px;padding:2px 6px;border-radius:8px;background:rgba(139,92,246,.12);color:#8b5cf6;flex-shrink:0;margin-left:4px;font-weight:500;white-space:nowrap}
.task-st-badge{font-size:10px;padding:2px 6px;border-radius:8px;background:var(--acd);color:var(--ac);flex-shrink:0;margin-left:4px;font-weight:500;white-space:nowrap}
.detail-notes{display:flex;flex-direction:column;gap:8px}
.detail-note-item{padding:8px 10px;border-radius:8px;background:var(--bgs);border:1px solid var(--bd)}
.detail-note__time{font-size:10px;color:var(--t3);margin-bottom:2px}
.detail-note__content{font-size:13px;color:var(--t1);line-height:1.5;word-break:break-all}
.detail-subtasks{display:flex;flex-direction:column;gap:6px}
.detail-subtask{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:var(--bgs);border:1px solid var(--bd);transition:all var(--tf)}
.detail-subtask--done{opacity:.5}
.detail-subtask--done .detail-subtask__title{text-decoration:line-through;color:var(--t3)}
.detail-subtask__check{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--bd);background:transparent;color:var(--ac);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:all var(--tf)}
.detail-subtask__check:active{opacity:.7}
.detail-subtask--done .detail-subtask__check{background:var(--ac);border-color:var(--ac);color:var(--bg)}
.detail-subtask__title{flex:1;font-size:13px;color:var(--t1);line-height:1.4}
.detail-subtask__dur{font-size:11px;color:var(--t3);white-space:nowrap}
.detail-subtask__drag{cursor:grab;color:var(--t3);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:4px;touch-action:none;-webkit-user-select:none;user-select:none}
.detail-subtask__drag:active{cursor:grabbing}
.detail-subtask--dragging{opacity:.85;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:10;position:relative;transition:none}
.detail-subtask__ops{display:flex;align-items:center;gap:2px;flex-shrink:0;margin-left:4px}
.detail-subtask__op{width:22px;height:22px;border:none;background:transparent;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;border-radius:6px;transition:all var(--tf)}
.detail-subtask__op:active{background:var(--bgs);color:var(--t1)}
.detail-subtask__op--del:active{color:var(--rd);background:rgba(248,113,113,.15)}
.ai-split-loading{text-align:center;padding:20px 0;color:var(--t3);font-size:13px}
.ai-split-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.ai-split-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:var(--bgs);border:1px solid var(--bd)}
.ai-split-item__idx{width:20px;height:20px;border-radius:50%;background:var(--acd);color:var(--ac);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-split-item__title{flex:1;font-size:13px;color:var(--t1)}
.ai-split-item__dur{font-size:11px;color:var(--t3)}
.ai-split-item__add{width:26px;height:26px;border:none;background:var(--acd);color:var(--ac);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border-radius:6px;transition:all var(--tf);font-size:13px}
.ai-split-item__add:active{background:var(--ac);color:var(--bg)}
.ai-split-item__add:disabled{background:var(--bgs);color:var(--ac);cursor:default;opacity:.7}
.ai-split-item--added{opacity:.5}
.ai-split-item--added .ai-split-item__title{text-decoration:line-through;color:var(--t3)}
.ai-split-actions{margin-top:4px}
.task-act--alarm{color:var(--yl)}
.task-act--alarm:hover,.task-act--alarm:active{color:var(--yl);background:rgba(250,204,21,.15)}

.reminder-popup-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center}
.reminder-popup-overlay.show{display:flex;animation:oI .2s ease}
.reminder-popup{width:90%;max-width:380px;max-height:80vh;background:var(--bg2);border-radius:var(--rl);overflow:hidden;display:flex;flex-direction:column;animation:tpI .25s cubic-bezier(.4,0,.2,1)}
.reminder-popup__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bd)}
.reminder-popup__title{font-size:15px;font-weight:600}
.reminder-popup__close{width:28px;height:28px;border:none;background:var(--bgs);border-radius:50%;color:var(--t2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all var(--tf)}
.reminder-popup__close:active{background:var(--rdd);color:var(--rd)}
.reminder-popup__body{padding:16px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch}

.rm-popup{display:flex;flex-direction:column;gap:14px}
.rm-task-name{font-size:15px;font-weight:600;color:var(--t1);line-height:1.4;word-break:break-all;padding-bottom:10px;border-bottom:1px solid var(--bd)}
.rm-existing{display:flex;flex-direction:column;gap:8px}
.rm-existing__title{font-size:12px;color:var(--t3);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.rm-existing__list{display:flex;flex-direction:column;gap:6px}
.rm-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm);gap:8px}
.rm-item__info{display:flex;align-items:center;gap:8px;flex:1;min-width:0;flex-wrap:wrap}
.rm-item__time{font-size:13px;color:var(--t2);font-variant-numeric:tabular-nums;white-space:nowrap}
.rm-item__ch{font-size:11px;color:var(--t3)}
.rm-status{font-size:10px;padding:2px 6px;border-radius:8px;white-space:nowrap}
.rm-status--pending{color:var(--yl);background:rgba(250,204,21,.12)}
.rm-status--sent{color:var(--gn);background:var(--gnd)}
.rm-status--repeat{color:var(--ac);background:rgba(59,130,246,.12)}
.rm-item__del{border:none;background:transparent;color:var(--t3);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:var(--rs);transition:all var(--tf);flex-shrink:0}
.rm-item__del:active{color:var(--rd);background:var(--rdd)}

.rm-form{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--bd)}
.rm-form__title{font-size:12px;color:var(--t3);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.rm-channels{display:flex;flex-direction:column;gap:6px}
.rm-channel{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm);cursor:pointer;transition:all var(--tf)}
.rm-channel:active{background:var(--bgch)}
.rm-channel input[type="checkbox"]{margin-top:2px;accent-color:var(--ac);width:16px;height:16px;flex-shrink:0}
.rm-channel__right{display:flex;flex-direction:column;gap:2px}
.rm-channel__name{font-size:13px;color:var(--t1)}
.rm-channel__note{font-size:11px;color:var(--t3)}
.rm-channel--disabled{opacity:.45;cursor:not-allowed}
.rm-channel--disabled:active{background:var(--bgc)}
.rm-channel--disabled .rm-channel__name{color:var(--t3)}
.rm-channel--unchecked{border-color:var(--yl);background:rgba(250,204,21,.06)}
.rm-channel--unchecked .rm-channel__note{color:var(--yl)}

.rm-qr-overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center}
.rm-qr-overlay.show{display:flex;animation:oI .2s ease}
.rm-qr-popup{width:85%;max-width:320px;background:var(--bg2);border-radius:var(--rl);overflow:hidden;animation:tpI .25s cubic-bezier(.4,0,.2,1)}
.rm-qr-popup__header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--bd)}
.rm-qr-popup__header span{font-size:15px;font-weight:600}
.rm-qr-popup__close{width:28px;height:28px;border:none;background:var(--bgs);border-radius:50%;color:var(--t2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all var(--tf)}
.rm-qr-popup__close:active{background:var(--rdd);color:var(--rd)}
.rm-qr-popup__body{padding:20px 18px;display:flex;flex-direction:column;align-items:center;gap:14px}
.rm-qr-loading{color:var(--t3);font-size:13px;padding:20px 0}
.rm-qr-hint{font-size:14px;color:var(--t1);text-align:center;line-height:1.5}
.rm-qr-img{width:200px;height:200px;border-radius:var(--rm);border:1px solid var(--bd);object-fit:contain;background:#fff}
.rm-qr-subhint{font-size:12px;color:var(--t3);text-align:center;line-height:1.4}
.rm-qr-success{font-size:14px;color:var(--gn);text-align:center;padding:20px 0;font-weight:600}
.rm-qr-error{font-size:13px;color:var(--rd);text-align:center;padding:10px 0}

.rm-confirm-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center}
.rm-confirm-overlay.show{display:flex;animation:oI .2s ease}
.rm-confirm-popup{width:80%;max-width:280px;background:var(--bg2);border-radius:var(--rl);padding:24px 20px 18px;animation:tpI .25s cubic-bezier(.4,0,.2,1)}
.rm-confirm__text{font-size:14px;color:var(--t1);text-align:center;line-height:1.5;margin-bottom:18px}
.rm-confirm__btns{display:flex;gap:10px;justify-content:center}
.rm-confirm__btn{flex:1;padding:8px 0;border:none;border-radius:var(--rm);font-size:13px;cursor:pointer;transition:all var(--tf)}
.rm-confirm__btn--cancel{background:var(--bgs);color:var(--t2)}
.rm-confirm__btn--ok{background:var(--rd);color:#fff}
.rm-confirm__btn:active{opacity:.7}

.qc-overlay{position:fixed;inset:0;z-index:149;background:rgba(0,0,0,.4);animation:oI .2s ease}
.quick-config{position:absolute;top:50px;right:12px;width:240px;background:var(--bg2);border:1px solid var(--bdl);border-radius:var(--rl);box-shadow:var(--sm);z-index:150;animation:qcI .2s ease;overflow:hidden}
@keyframes qcI{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.quick-config__section{padding:12px 14px;border-bottom:1px solid var(--bd)}
.quick-config__section:last-child{border-bottom:none}
.quick-config__title{font-size:11px;color:var(--t3);margin-bottom:8px;letter-spacing:.5px;font-weight:600}
.quick-config__options{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qc-theme{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all var(--tf);position:relative;flex-shrink:0}
.qc-theme:active{transform:scale(.9)}
.qc-theme.active{border-color:var(--t1);box-shadow:0 0 8px rgba(255,255,255,.15)}
.qc-theme.active::after{content:'';position:absolute;inset:3px;border-radius:50%;border:2px solid var(--bg2)}
.qc-size{padding:5px 14px;border-radius:16px;font-size:12px;color:var(--t2);background:var(--bgs);border:1px solid var(--bd);cursor:pointer;transition:all var(--tf);font-family:var(--fn)}
.qc-size.active{background:var(--acd);color:var(--ac);border-color:var(--ac)}
.qc-size:active{transform:scale(.92)}
.qc-sound{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--rm);background:var(--bgs);border:1px solid var(--bd);cursor:pointer;transition:all var(--tf);font-size:12px;color:var(--t2);width:100%;font-family:var(--fn)}
.qc-sound:active{background:var(--bgch)}
.qc-sound.active{border-color:var(--ac);color:var(--ac);background:var(--acd)}
.qc-sound__icon{font-size:14px;flex-shrink:0}
.qc-sound__name{flex:1;text-align:left}
.qc-sound__check{color:var(--ac);font-size:12px;display:none}
.qc-sound.active .qc-sound__check{display:block}
.qc-sound-custom{display:none;margin-top:8px}
.qc-sound-custom.show{display:block}
.qc-sound-custom input[type="file"]{width:100%;font-size:11px;color:var(--t3)}
.qc-sound-custom input[type="file"]::-webkit-file-upload-button{background:var(--bgs);border:1px solid var(--bd);border-radius:var(--rs);color:var(--t2);font-size:11px;padding:4px 10px;font-family:var(--fn);cursor:pointer}
.qc-theme--custom{background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)!important;display:flex;align-items:center;justify-content:center;font-size:13px}
.qc-theme--custom span{filter:grayscale(1) brightness(2)}
.qc-custom-colors{margin-top:10px;max-height:280px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.qc-cc-grid{display:flex;flex-direction:column;gap:6px}
.qc-cc-item{display:flex;align-items:center;gap:6px}
.qc-cc-label{font-size:10px;color:var(--t3);min-width:56px;flex-shrink:0}
.qc-cc-input{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.qc-cc-picker{width:24px;height:24px;border:none;border-radius:4px;cursor:pointer;padding:0;background:none;flex-shrink:0}
.qc-cc-picker::-webkit-color-swatch-wrapper{padding:0}
.qc-cc-picker::-webkit-color-swatch{border:1px solid var(--bd);border-radius:4px}
.qc-cc-text{flex:1;min-width:0;padding:3px 6px;font-size:10px;font-family:monospace;background:var(--bgc);border:1px solid var(--bd);border-radius:4px;color:var(--t1);outline:none}
.qc-cc-text:focus{border-color:var(--ac)}
.qc-cc-actions{margin-top:8px;text-align:center}
.qc-cc-reset{padding:5px 14px;border-radius:12px;font-size:11px;color:var(--t2);background:var(--bgs);border:1px solid var(--bd);cursor:pointer;font-family:var(--fn);transition:all var(--tf)}
.qc-cc-reset:active{transform:scale(.95);background:var(--acd)}

[data-ts="S"] .main-container{zoom:.92}
[data-ts="L"] .main-container{zoom:1.1}
[data-ts="XL"] .main-container{zoom:1.22}

.form-compact .form-group{margin-bottom:8px}
.form-compact .form-label{margin-bottom:3px;font-size:12px}
.form-compact .form-input{padding:8px 10px;font-size:13px}
.form-compact textarea.form-input{min-height:40px}
.form-compact .form-select{padding:8px 10px;font-size:13px}
.form-compact .priority-btn{padding:6px 4px;font-size:11px}
.form-compact .dur-adj{width:36px;height:36px;font-size:16px}
.form-compact .dur-val{font-size:16px}
.form-compact .dur-quick{margin-top:4px}
.form-compact .dur-quick__btn{padding:4px 10px;font-size:11px}
.form-compact .btn-submit{padding:10px;font-size:14px;margin-top:4px}
.form-compact .btn-delete{padding:10px;font-size:13px;margin-top:4px}

.ai-fill-btn{border:none;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-size:12px;cursor:pointer;padding:4px 10px;border-radius:12px;transition:all var(--tf);font-family:var(--fn);white-space:nowrap;margin-right:8px}
.ai-fill-btn:active{transform:scale(.9);opacity:.8}
.ai-fill-overlay{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:oI .2s ease}
.ai-fill-card{width:90%;max-width:380px;background:var(--bg2);border-radius:var(--rx);overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.3);animation:mSU .3s cubic-bezier(.4,0,.2,1)}
.ai-fill-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--bd)}
.ai-fill-title{font-size:15px;font-weight:600;color:var(--t1)}
.ai-fill-close{width:26px;height:26px;border:none;background:var(--bgs);border-radius:50%;color:var(--t2);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center}
.ai-fill-close:active{background:var(--rdd);color:var(--rd)}
.ai-fill-body{padding:16px}
.ai-fill-textarea{width:100%;height:100px;padding:10px 12px;background:var(--bgc);border:1px solid var(--bd);border-radius:var(--rm);color:var(--t1);font-size:13px;font-family:var(--fn);resize:none;outline:none;line-height:1.5}
.ai-fill-textarea:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acd)}
.ai-fill-textarea::placeholder{color:var(--t3)}
.ai-fill-hint{font-size:11px;color:var(--t3);margin-top:8px;text-align:center}
.ai-fill-submit{width:100%;padding:10px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;border-radius:var(--rm);font-size:14px;font-weight:600;cursor:pointer;margin-top:12px;font-family:var(--fn);transition:all var(--tf);display:flex;align-items:center;justify-content:center;gap:6px}
.ai-fill-submit:active{transform:scale(.97);opacity:.9}
.ai-fill-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.ai-fill-loading{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:aiSpin .6s linear infinite}
@keyframes aiSpin{to{transform:rotate(360deg)}}

/* === AI语音输入 ===
   导航栏AI按钮：呼吸光晕+指纹标识
   覆盖层：半透明毛玻璃，底部留空给手势引导
   手势引导：独立浮层，三按钮圆弧排列（取消左/编辑上/发送右）
*/
.nav-ai-voice{position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none}
.nav-dashboard-icon{display:flex;flex-direction:column;align-items:center;gap:2px}
.nav-dashboard-icon .nav-item__icon{width:22px;height:22px}
.nav-dashboard-icon span{font-size:10px;color:var(--mt)}
.nav-ai-voice .nav-dashboard-icon span{font-size:11px;font-weight:700;letter-spacing:1px;background:linear-gradient(135deg,var(--ac),var(--pu));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-ai-voice.pressing .nav-item__icon{transform:scale(1.4) !important;filter:drop-shadow(0 0 8px var(--acg));transition:transform .2s ease-out,filter .2s ease-out}
.nav-ai-voice.pressing .nav-ai-voice__fingerprint{opacity:.8 !important}
/* 长按扩散波纹 - 多层扩散环 */
.nav-ai-voice .press-ripple{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--ac);opacity:0;pointer-events:none}
.nav-ai-voice.pressing .press-ripple{animation:pressRipple 1.2s ease-out infinite}
.nav-ai-voice.pressing .press-ripple:nth-child(2){animation-delay:.4s}
.nav-ai-voice.pressing .press-ripple:nth-child(3){animation-delay:.8s}
@keyframes pressRipple{0%{transform:scale(.8);opacity:.7}100%{transform:scale(2.8);opacity:0}}
/* 长按中心光晕 */
.nav-ai-voice.pressing::before{opacity:.8 !important;transform:scale(1.6) !important;transition:all .2s ease-out;animation:pressGlow 1.5s ease-in-out infinite}
@keyframes pressGlow{0%,100%{opacity:.6;transform:scale(1.4)}50%{opacity:.9;transform:scale(1.8)}}
.nav-ai-voice__wrap{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px}
.nav-ai-voice__wrap .nav-item__icon{width:26px;height:26px}
.nav-ai-voice__fingerprint{position:absolute;bottom:-2px;right:-4px;opacity:.35;transition:opacity .3s}
.nav-ai-voice span{font-size:11px;font-weight:700;letter-spacing:1px;background:linear-gradient(135deg,var(--ac),var(--pu));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-ai-voice::before{content:'';position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,var(--acg) 0%,transparent 70%);opacity:0;animation:voiceBreathe 4s ease-in-out infinite}
@keyframes voiceBreathe{0%,100%{opacity:0;transform:scale(.9)}50%{opacity:.5;transform:scale(1.1)}}
.nav-ai-voice.active .nav-item__icon{transform:scale(1.2)}
.nav-ai-voice.active::after{width:24px;height:3px;background:linear-gradient(90deg,var(--ac),var(--pu));border-radius:2px;box-shadow:0 0 8px var(--acg)}
.nav-ai-voice.active .nav-ai-voice__fingerprint{opacity:.55}

/* 语音覆盖层 - 底部留空给手势引导区域 */
.voice-overlay{position:fixed;top:0;left:0;right:0;bottom:160px;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(6,10,20,.6);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.voice-overlay.show{opacity:1;visibility:visible}
.voice-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;padding:20px;animation:voiceIn .4s cubic-bezier(.4,0,.2,1)}
@keyframes voiceIn{from{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* AI脸 */
.voice-ai-face{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--pu));display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 0 40px var(--acg),0 0 80px rgba(108,99,255,.15);transition:all .3s}
.voice-ai-face.listening{animation:facePulse 1.5s ease-in-out infinite;box-shadow:0 0 60px var(--acg),0 0 120px rgba(108,99,255,.25)}
@keyframes facePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.voice-ai-eye{width:10px;height:12px;background:var(--bg);border-radius:50%;position:absolute;top:22px;transition:all .3s}
.voice-ai-eye.left{left:19px}
.voice-ai-eye.right{right:19px}
.voice-ai-face.listening .voice-ai-eye{height:5px;top:25px;border-radius:3px;animation:eyeBlink 2s ease-in-out infinite}
@keyframes eyeBlink{0%,45%,55%,100%{height:5px}50%{height:2px}}
.voice-ai-mouth{width:18px;height:7px;border:2px solid var(--bg);border-top:none;border-radius:0 0 10px 10px;position:absolute;bottom:18px;transition:all .3s}
.voice-ai-face.listening .voice-ai-mouth{width:14px;height:14px;border:2px solid var(--bg);border-radius:50%;animation:mouthTalk .4s ease-in-out infinite alternate}
@keyframes mouthTalk{from{height:7px}to{height:16px;border-radius:50% 50% 50% 50%}}

/* 声波 */
.voice-waves{display:flex;align-items:center;gap:3px;height:36px}
.voice-waves span{width:3px;background:var(--ac);border-radius:2px;animation:wave 1s ease-in-out infinite}
.voice-waves span:nth-child(1){animation-delay:0s;height:10px}
.voice-waves span:nth-child(2){animation-delay:.1s;height:18px}
.voice-waves span:nth-child(3){animation-delay:.2s;height:28px}
.voice-waves span:nth-child(4){animation-delay:.3s;height:18px}
.voice-waves span:nth-child(5){animation-delay:.4s;height:10px}
@keyframes wave{0%,100%{transform:scaleY(.4);opacity:.5}50%{transform:scaleY(1);opacity:1}}

/* 语音文字 */
.voice-text{font-size:17px;font-weight:600;color:var(--t1);text-align:center;max-width:280px;min-height:26px;text-shadow:0 0 20px var(--acg);word-break:break-all;line-height:1.4}

/* 手势引导区域 - 独立浮层，在覆盖层和导航栏之间 */
.voice-guide{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);width:300px;height:170px;z-index:999;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;pointer-events:none}
.voice-guide.show{opacity:1;visibility:visible;pointer-events:auto}
/* 手指跟随光标圆环 - 大光圈+脉冲+扩散波纹 */
.voice-cursor{display:none;position:fixed;width:88px;height:88px;border-radius:50%;border:3px solid var(--ac);background:radial-gradient(circle,rgba(164,239,249,.22) 0%,rgba(164,239,249,.08) 40%,transparent 70%);pointer-events:none;z-index:1000;transform:translate(-50%,-50%);transition:border-color .2s,background .2s,box-shadow .2s;box-shadow:0 0 30px var(--acg),0 0 60px rgba(164,239,249,.12),inset 0 0 20px rgba(164,239,249,.1);animation:cursorPulse 1.2s ease-in-out infinite}
@keyframes cursorPulse{0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 30px var(--acg),0 0 60px rgba(164,239,249,.12),inset 0 0 20px rgba(164,239,249,.1)}50%{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 45px var(--acg),0 0 80px rgba(164,239,249,.18),inset 0 0 30px rgba(164,239,249,.15)}}
.voice-cursor.merge{width:100px;height:100px;border-width:3.5px;background:radial-gradient(circle,rgba(164,239,249,.32) 0%,rgba(164,239,249,.12) 40%,transparent 70%);box-shadow:0 0 50px var(--acg),0 0 100px rgba(164,239,249,.2),inset 0 0 30px rgba(164,239,249,.18);animation:cursorMergePulse .8s ease-in-out infinite}
@keyframes cursorMergePulse{0%,100%{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 0 50px var(--acg),0 0 100px rgba(164,239,249,.2),inset 0 0 30px rgba(164,239,249,.18)}50%{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 70px var(--acg),0 0 120px rgba(164,239,249,.25),inset 0 0 40px rgba(164,239,249,.22)}}
.voice-cursor.cursor-cancel{border-color:var(--rd);background:radial-gradient(circle,rgba(248,113,113,.25) 0%,rgba(248,113,113,.08) 40%,transparent 70%);box-shadow:0 0 50px rgba(248,113,113,.35),0 0 100px rgba(248,113,113,.15),inset 0 0 30px rgba(248,113,113,.12)}
.voice-cursor.cursor-edit{border-color:var(--yl);background:radial-gradient(circle,rgba(250,204,21,.25) 0%,rgba(250,204,21,.08) 40%,transparent 70%);box-shadow:0 0 50px rgba(250,204,21,.35),0 0 100px rgba(250,204,21,.15),inset 0 0 30px rgba(250,204,21,.12)}
.voice-cursor.cursor-send{border-color:var(--gn);background:radial-gradient(circle,rgba(74,222,128,.25) 0%,rgba(74,222,128,.08) 40%,transparent 70%);box-shadow:0 0 50px rgba(74,222,128,.35),0 0 100px rgba(74,222,128,.15),inset 0 0 30px rgba(74,222,128,.12)}
/* 光标扩散波纹环 */
.voice-cursor-ripple{position:fixed;width:88px;height:88px;border-radius:50%;border:2px solid var(--ac);pointer-events:none;z-index:999;transform:translate(-50%,-50%);animation:cursorRipple .9s ease-out forwards}
@keyframes cursorRipple{0%{transform:translate(-50%,-50%) scale(1);opacity:.5}100%{transform:translate(-50%,-50%) scale(2.5);opacity:0}}
/* 引导区中心连接线 */
.voice-guide::before{content:'';position:absolute;bottom:-10px;left:50%;width:2px;height:10px;background:var(--ac);opacity:.3;animation:guideLine .8s ease-in-out infinite}
@keyframes guideLine{0%,100%{opacity:.1;height:6px}50%{opacity:.5;height:14px}}
.voice-guide-zone{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;transition:all .25s cubic-bezier(.4,0,.2,1);opacity:.65;-webkit-tap-highlight-color:transparent}
.voice-guide-zone.active{opacity:1;transform:scale(1.35)}
.voice-guide-zone__circle{width:76px;height:76px;border-radius:50%;border:2.5px solid var(--bd);display:flex;align-items:center;justify-content:center;background:rgba(20,22,30,.95);color:var(--t2);transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.3)}
/* 圆圈内发光波纹 */
.voice-guide-zone__circle::after{content:'';position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .3s}
.voice-guide-zone.active .voice-guide-zone__circle{transform:scale(1.1)}
.voice-guide-zone.active .voice-guide-zone__circle::after{opacity:1}
.voice-guide-zone span{font-size:12px;color:var(--t3);font-weight:700;letter-spacing:1px;transition:all .3s;white-space:nowrap}
.voice-guide-zone.active span{color:var(--t1);text-shadow:0 0 10px currentColor}
/* 取消 - 左前方 */
.voice-guide-zone--cancel{left:10px;bottom:15px;animation:guideFloat 3s ease-in-out infinite;animation-delay:0s}
.voice-guide-zone--cancel .voice-guide-zone__circle{border-color:rgba(248,113,113,.4)}
.voice-guide-zone--cancel .voice-guide-zone__circle::after{background:radial-gradient(circle,rgba(248,113,113,.2),transparent 70%)}
.voice-guide-zone--cancel.active .voice-guide-zone__circle{background:var(--rdd);border-color:var(--rd);color:var(--rd);box-shadow:0 0 40px var(--rdd),0 0 80px rgba(248,113,113,.3),0 0 120px rgba(248,113,113,.12)}
.voice-guide-zone--cancel.active span{color:var(--rd)}
/* 编辑 - 正上方 */
.voice-guide-zone--edit{left:50%;transform:translateX(-50%);bottom:95px;animation:guideFloat 3s ease-in-out infinite;animation-delay:.5s}
.voice-guide-zone--edit.active{transform:translateX(-50%) scale(1.35)}
.voice-guide-zone--edit .voice-guide-zone__circle{border-color:rgba(250,204,21,.4)}
.voice-guide-zone--edit .voice-guide-zone__circle::after{background:radial-gradient(circle,rgba(250,204,21,.2),transparent 70%)}
.voice-guide-zone--edit.active .voice-guide-zone__circle{background:rgba(250,204,21,.18);border-color:var(--yl);color:var(--yl);box-shadow:0 0 40px rgba(250,204,21,.4),0 0 80px rgba(250,204,21,.2),0 0 120px rgba(250,204,21,.1)}
.voice-guide-zone--edit.active span{color:var(--yl)}
/* 发送 - 右前方 */
.voice-guide-zone--send{right:10px;bottom:15px;animation:guideFloat 3s ease-in-out infinite;animation-delay:1s}
.voice-guide-zone--send .voice-guide-zone__circle{border-color:rgba(74,222,128,.4)}
.voice-guide-zone--send .voice-guide-zone__circle::after{background:radial-gradient(circle,rgba(74,222,128,.2),transparent 70%)}
.voice-guide-zone--send.active .voice-guide-zone__circle{background:var(--gnd);border-color:var(--gn);color:var(--gn);box-shadow:0 0 40px var(--gnd),0 0 80px rgba(74,222,128,.3),0 0 120px rgba(74,222,128,.12)}
.voice-guide-zone--send.active span{color:var(--gn)}
/* 浮动动画 */
@keyframes guideFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.voice-guide-zone--edit{animation-name:guideFloatEdit}
@keyframes guideFloatEdit{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
/* 呼吸脉冲 */
.voice-guide-zone__circle::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--acd);opacity:0;animation:guidePulse 2.5s ease-in-out infinite}
.voice-guide-zone--cancel .voice-guide-zone__circle::before{animation-delay:0s;border-color:rgba(248,113,113,.3)}
.voice-guide-zone--edit .voice-guide-zone__circle::before{animation-delay:.8s;border-color:rgba(250,204,21,.3)}
.voice-guide-zone--send .voice-guide-zone__circle::before{animation-delay:1.6s;border-color:rgba(74,222,128,.3)}
@keyframes guidePulse{0%,100%{opacity:0;transform:scale(.9)}50%{opacity:.6;transform:scale(1.15)}}

/* 语音编辑覆盖层 */
.voice-edit-overlay{position:fixed;inset:0;z-index:310;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.voice-edit-overlay.show{opacity:1;visibility:visible}
.voice-edit-card{width:90%;max-width:380px;background:var(--bg2);border-radius:var(--rx);overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.3);animation:mSU .3s cubic-bezier(.4,0,.2,1)}
.voice-edit-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--bd);font-size:15px;font-weight:600;color:var(--t1)}
.voice-edit-close{width:26px;height:26px;border:none;background:var(--bgs);border-radius:50%;color:var(--t2);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center}
.voice-edit-close:active{background:var(--rdd);color:var(--rd)}
.voice-edit-textarea{width:100%;height:120px;padding:12px 16px;background:var(--bgc);border:none;color:var(--t1);font-size:14px;font-family:var(--fn);resize:none;outline:none;line-height:1.5}
.voice-edit-textarea::placeholder{color:var(--t3)}
.voice-edit-actions{display:flex;gap:8px;padding:12px 16px}
.voice-edit-btn{flex:1;padding:10px;border:none;border-radius:var(--rm);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--fn);transition:all var(--tf)}
.voice-edit-btn:active{transform:scale(.97)}
.voice-edit-cancel{background:var(--bgs);color:var(--t2);border:1px solid var(--bd)}
.voice-edit-submit{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff}

/* AI处理动画 */
.voice-processing{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;background:rgba(6,10,20,.6);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.voice-processing.show{opacity:1;visibility:visible}
.voice-proc-content{display:flex;flex-direction:column;align-items:center;gap:24px;animation:voiceIn .4s cubic-bezier(.4,0,.2,1)}
.voice-proc-face{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--pu));display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 0 60px var(--acg);animation:procSpin 3s linear infinite}
@keyframes procSpin{0%{box-shadow:0 0 60px var(--acg)}33%{box-shadow:0 0 60px var(--gnd)}66%{box-shadow:0 0 60px rgba(250,204,21,.3)}100%{box-shadow:0 0 60px var(--acg)}}
.voice-proc-eye{width:14px;height:16px;background:var(--bg);border-radius:50%;position:absolute;top:30px}
.voice-proc-eye.left{left:28px}
.voice-proc-eye.right{right:28px}
.voice-proc-face .voice-proc-eye{animation:procEye 1.5s ease-in-out infinite}
@keyframes procEye{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.3)}}
.voice-proc-mouth{width:24px;height:24px;border:3px solid var(--bg);border-radius:50%;position:absolute;bottom:24px;animation:procMouth .6s ease-in-out infinite alternate}
@keyframes procMouth{from{width:24px;height:12px;border-radius:50%}to{width:20px;height:20px;border-radius:50%}}

/* 处理粒子 */
.voice-proc-particles{position:absolute;width:200px;height:200px;pointer-events:none}
.voice-proc-particle{position:absolute;width:6px;height:6px;background:var(--ac);border-radius:50%;top:50%;left:50%;animation:particleOrbit 2s linear infinite}
@keyframes particleOrbit{0%{transform:rotate(var(--angle)) translateX(60px) scale(1);opacity:1}50%{transform:rotate(calc(var(--angle) + 180deg)) translateX(40px) scale(.5);opacity:.4}100%{transform:rotate(calc(var(--angle) + 360deg)) translateX(60px) scale(1);opacity:1}}

.voice-proc-text{font-size:16px;font-weight:600;color:var(--ac);text-shadow:0 0 20px var(--acg);letter-spacing:2px}
.voice-proc-cancel{margin-top:8px;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--bd);background:rgba(20,22,30,.8);color:var(--t2);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;animation:voiceIn .3s ease}
.voice-proc-cancel:active{background:var(--rdd);border-color:var(--rd);color:var(--rd);transform:scale(.9)}

/* 回收站 */
.rb-wrap{padding:4px 0}
.rb-empty{text-align:center;color:var(--t3);padding:40px 0;font-size:14px}
.rb-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.rb-count{font-size:13px;color:var(--t3)}
.rb-clear-btn{background:none;border:1px solid var(--rd);color:var(--rd);border-radius:var(--rs);padding:4px 12px;font-size:12px;cursor:pointer;transition:all var(--tr)}
.rb-clear-btn:active{background:var(--rdd)}
.rb-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto}
.rb-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--bgs);border:1px solid var(--bd);border-radius:var(--rm);gap:8px}
.rb-item__info{flex:1;min-width:0}
.rb-item__title{font-size:14px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-item__meta{font-size:11px;color:var(--t3);margin-top:2px}
.rb-item__actions{display:flex;gap:6px;flex-shrink:0}
.rb-restore-btn{background:none;border:1px solid var(--ac);color:var(--ac);border-radius:var(--rs);padding:4px 10px;font-size:12px;cursor:pointer;transition:all var(--tr)}
.rb-restore-btn:active{background:var(--acd)}
.rb-del-btn{background:none;border:1px solid var(--rd);color:var(--rd);border-radius:var(--rs);padding:4px 10px;font-size:12px;cursor:pointer;transition:all var(--tr)}
.rb-del-btn:active{background:var(--rdd)}
.login-qr-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}
.login-qr-overlay.show{display:flex;animation:oI .25s ease}
.login-qr-card{position:relative;width:100%;max-width:320px;background:var(--bg2);border-radius:20px;padding:32px 24px;text-align:center;box-shadow:0 12px 48px rgba(0,0,0,.4)}
.login-qr-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border:none;background:var(--bgs);border-radius:50%;color:var(--t2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all var(--tf)}
.login-qr-close:active{background:var(--rdd);color:var(--rd)}
.login-qr-icon{font-size:36px;margin-bottom:8px}
.login-qr-title{font-size:18px;font-weight:700;color:var(--t1);margin-bottom:4px}
.login-qr-desc{font-size:12px;color:var(--t3);margin-bottom:20px}
.login-qr-wrap{width:180px;height:180px;margin:0 auto 16px;border-radius:14px;border:2px solid var(--bd);overflow:hidden;position:relative;background:var(--bgs)}
.login-qr-wrap img{width:100%;height:100%;object-fit:contain}
.login-qr-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bgs);color:var(--ac);font-size:14px}
.login-qr-loading svg{animation:lgSpin 1s linear infinite;width:28px;height:28px}
@keyframes lgSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.login-qr-expired{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.6);gap:8px}
.login-qr-expired span{font-size:13px;color:var(--t2)}
.login-qr-refresh{padding:6px 16px;border-radius:8px;background:var(--ac);color:var(--bg);font-size:12px;font-weight:700;border:none;cursor:pointer;transition:all .2s}
.login-qr-refresh:active{opacity:.8}
.login-qr-tip{font-size:13px;color:var(--t2);margin:0 0 2px}
.login-qr-tip-sub{font-size:11px;color:var(--t3);margin:0}
.login-qr-status{margin-top:12px;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;display:none}
.login-qr-status.scanning{display:block;background:rgba(52,152,219,.1);color:#3498db}
.login-qr-status.success{display:block;background:rgba(76,175,80,.1);color:#4CAF50}
.login-qr-status.error{display:block;background:rgba(192,57,43,.1);color:#c0392b}