/* ══════════════════════════════════════════════════════════════════════ MSKEE 工作台 · 样式系统 8 套皮肤（同一套结构 × 8 套视觉），由 切换： tk 科技风 mc 马卡龙 ft 未来风 mo 马赛克 ap 苹果风 br 大牌风 ms 晨雾 pt 小资风 ══════════════════════════════════════════════════════════════════════ */ *{box-sizing:border-box;margin:0;padding:0} /* ── 布局基准高度（非皮肤令牌，8 套皮肤共用）── 680 = 新闻面板头 44 + 页签 40 + 正文 596（6 条，每条约 99px） 把它钉死，右侧「待办+自选股 | 新闻资讯」才能稳定构成一个矩形： 否则待办条目一多就会把左栈撑高，新闻底部不再对齐（实测踩过）。 下限由左栈决定：自选股 6 只约 411px + 间距 13px + 待办最小约 256px。 */ :root{--newstot:680px} /* ═══════════════ 1. 皮肤令牌 ═══════════════ */ /* ── 1 科技风 TECH（默认）── */ html[data-skin="tk"]{ --bg:#070A12;--bg2:#0B1120;--pnl:rgba(255,255,255,.034);--pnl2:rgba(255,255,255,.058); --line:rgba(120,180,255,.15);--line2:rgba(120,180,255,.32); --t1:#E9F1FF;--t2:#93A6C4;--t3:#5E6E88; --acc:#3DDCFF;--acc2:#7C5CFF;--acc3:#5EEAD4;--accbg:rgba(61,220,255,.09); --up:#FF4D6A;--dn:#22D3A8;--warn:#FFB454; --r:8px;--r2:5px;--gap:13px;--mkoff:rgba(120,180,255,.14); --hdrbg:linear-gradient(180deg,rgba(61,220,255,.07),transparent); --sh:0 0 0 1px rgba(61,220,255,.07),0 12px 34px -24px rgba(0,0,0,.9); --glow:0 0 26px -10px rgba(61,220,255,.55); --bgpat:linear-gradient(rgba(120,180,255,.042) 1px,transparent 1px), linear-gradient(90deg,rgba(120,180,255,.042) 1px,transparent 1px); --bgpat-size:44px 44px; --fnt:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --serif:inherit; } /* ── 2 马卡龙 MACARON（柔和糖果色 · 浅底 · 大圆角）── */ html[data-skin="mc"]{ --bg:#FCF7F7;--bg2:#FFFFFF;--pnl:rgba(255,255,255,.8);--pnl2:rgba(255,252,252,.96); --line:rgba(228,178,197,.36);--line2:rgba(228,178,197,.66); --t1:#4E3B48;--t2:#8E7684;--t3:#B8A0AF; --acc:#E3679C;--acc2:#5FC4B2;--acc3:#E9B33C;--accbg:rgba(227,103,156,.12); --up:#E8557F;--dn:#3FB394;--warn:#DFA02F; --r:16px;--r2:11px;--gap:13px;--mkoff:rgba(228,178,197,.42); --hdrbg:linear-gradient(180deg,rgba(227,103,156,.09),rgba(255,255,255,0)); --sh:0 2px 10px -5px rgba(170,125,150,.22),0 14px 34px -26px rgba(170,125,150,.32); --glow:0 3px 14px -6px rgba(227,103,156,.5); --bgpat:radial-gradient(circle at 9% 5%,rgba(227,103,156,.16),transparent 38%), radial-gradient(circle at 93% 9%,rgba(95,196,178,.16),transparent 36%), radial-gradient(circle at 52% 102%,rgba(233,179,60,.14),transparent 40%); --bgpat-size:100% 100%; --fnt:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --serif:inherit; } /* ── 3 未来 FUTURE（冷银 · 全息渐变玻璃 · 深底）── */ html[data-skin="ft"]{ --bg:#07090E;--bg2:#0D1119;--pnl:rgba(255,255,255,.042);--pnl2:rgba(255,255,255,.072); --line:rgba(168,200,255,.15);--line2:rgba(168,200,255,.34); --t1:#EBF1FA;--t2:#98A8BE;--t3:#5F6C80; --acc:#9EC5FF;--acc2:#C3A6FF;--acc3:#7BE6DC;--accbg:rgba(158,197,255,.1); --up:#FF5E7A;--dn:#3ED9B0;--warn:#FFC46B; --r:2px;--r2:2px;--gap:13px;--mkoff:rgba(168,200,255,.16); --hdrbg:linear-gradient(180deg,rgba(158,197,255,.09),transparent 82%); --sh:0 0 0 1px rgba(158,197,255,.07),0 16px 44px -28px rgba(0,0,0,.96); --glow:0 0 34px -12px rgba(158,197,255,.62); /* 点阵全息底：与科技风的方网格明显区分 */ --bgpat:radial-gradient(circle,rgba(158,197,255,.1) 1px,transparent 1.1px), linear-gradient(118deg,rgba(158,197,255,.06) 0%,transparent 38%, rgba(195,166,255,.06) 62%,transparent 100%); --bgpat-size:24px 24px,100% 100%; --fnt:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --serif:inherit; } /* ── 4 马赛克 MOSAIC（像素块 · 撞色 · 零圆角硬阴影）── */ html[data-skin="mo"]{ --bg:#0D0D11;--bg2:#15151B;--pnl:#131319;--pnl2:#1C1C24; --line:#272730;--line2:#3C3C4A; --t1:#F4F4F7;--t2:#A2A2B0;--t3:#6D6D7B; --acc:#FFD400;--acc2:#FF4D6D;--acc3:#4DA3FF;--accbg:rgba(255,212,0,.11); --up:#FF4D6D;--dn:#2ECC71;--warn:#FFD400; --r:0px;--r2:0px;--gap:9px;--mkoff:#22222B; --hdrbg:linear-gradient(180deg,rgba(255,212,0,.07),transparent); --sh:3px 3px 0 rgba(0,0,0,.55); --glow:0 0 0 2px rgba(255,212,0,.85); --bgpat:conic-gradient(from 90deg at 50% 50%,rgba(255,255,255,.03) 0 25%,transparent 0 50%, rgba(255,255,255,.03) 0 75%,transparent 0); --bgpat-size:18px 18px; --fnt:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --serif:inherit; } /* ── 5 苹果 APPLE（浅灰白 · 系统蓝 · 毛玻璃分层）── */ html[data-skin="ap"]{ --bg:#F2F2F7;--bg2:#FFFFFF;--pnl:rgba(255,255,255,.9);--pnl2:#F7F7FA; --line:rgba(60,60,67,.11);--line2:rgba(60,60,67,.22); --t1:#1C1C1E;--t2:#6E6E73;--t3:#A5A5AC; --acc:#007AFF;--acc2:#34C759;--acc3:#FF9500;--accbg:rgba(0,122,255,.09); --up:#FF3B30;--dn:#34C759;--warn:#FF9500; --r:12px;--r2:8px;--gap:13px;--mkoff:rgba(60,60,67,.13); --hdrbg:linear-gradient(180deg,#FFFFFF,rgba(255,255,255,.88)); --sh:0 1px 2px rgba(0,0,0,.05),0 10px 28px -20px rgba(0,0,0,.22); --glow:0 2px 12px -5px rgba(0,122,255,.42); --bgpat:none; --bgpat-size:100% 100%; --fnt:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --serif:inherit; } /* ── 6 大牌风 BRAND（浅 · 衬线 · 金线）── */ html[data-skin="br"]{ --bg:#F6F4EF;--bg2:#FFFFFF;--pnl:#FFFFFF;--pnl2:#FAF8F4; --line:#E4DED3;--line2:#CFC7B8; --t1:#15140F;--t2:#6E6659;--t3:#A79E8F; --acc:#15140F;--acc2:#B08D57;--acc3:#B08D57;--accbg:rgba(176,141,87,.09); --up:#B3372C;--dn:#2F6B4F;--warn:#B08D57; --r:0px;--r2:0px;--gap:15px;--mkoff:#E7E1D6; --hdrbg:#FFFFFF;--sh:none;--glow:none; --bgpat:none;--bgpat-size:100% 100%; --fnt:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; --mono:"SF Mono",Menlo,Consolas,monospace; --serif:"Songti SC","Source Han Serif SC",Georgia,serif; } /* ── 7 晨雾 MIST（浅 · 冷灰蓝 · 极简）── */ html[data-skin="ms"]{ --bg:#EEF2F6;--bg2:#FFFFFF;--pnl:#FFFFFF;--pnl2:#F7FAFC; --line:#DEE6EE;--line2:#C2CFDC; --t1:#182430;--t2:#5C6E80;--t3:#93A3B3; --acc:#2F77C9;--acc2:#5AA0D8;--acc3:#3FBFA8;--accbg:rgba(47,119,201,.08); --up:#D64541;--dn:#2E9E6B;--warn:#D99327; --r:6px;--r2:4px;--gap:13px;--mkoff:#DCE6EF; --hdrbg:#FFFFFF; --sh:0 1px 2px rgba(24,36,48,.05),0 10px 26px -20px rgba(24,36,48,.3); --glow:none; --bgpat:linear-gradient(rgba(47,119,201,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(47,119,201,.035) 1px,transparent 1px); --bgpat-size:40px 40px; --fnt:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --serif:inherit; } /* ── 8 小资风 PETIT（浅 · 奶油 · 大圆角）── */ html[data-skin="pt"]{ --bg:#FBF6F0;--bg2:#FFFDFB;--pnl:#FFFFFF;--pnl2:#FDF7F1; --line:#F0E4D9;--line2:#E1CFC0; --t1:#3E332C;--t2:#8B7A6D;--t3:#B5A597; --acc:#C97B63;--acc2:#7C9A8E;--acc3:#C97B63;--accbg:rgba(201,123,99,.09); --up:#C4553F;--dn:#5E8C7B;--warn:#D89A57; --r:16px;--r2:11px;--gap:14px;--mkoff:#F0E4D8; --hdrbg:linear-gradient(180deg,#FFF9F3,#FDFBF8); --sh:0 2px 9px -5px rgba(150,110,85,.16),0 12px 30px -22px rgba(150,110,85,.26); --glow:none; --bgpat:radial-gradient(circle at 84% 6%,rgba(201,123,99,.07),transparent 40%); --bgpat-size:100% 100%; --fnt:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; --mono:"SF Mono",Menlo,Consolas,monospace; --serif:inherit; } /* ═══════════════ 2. 基础 ═══════════════ */ body{ background:var(--bg);color:var(--t1);font-family:var(--fnt); font-size:13.5px;line-height:1.65; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background-image:var(--bgpat);background-size:var(--bgpat-size); } /* ⚠️ 这里只给 position:relative，绝不能加 z-index！ 一旦给顶层元素设 z-index，每个都会成为独立的层叠上下文， 搜索区里的「风格切换」浮层就再也盖不过下面的 .cols（实测踩过）。 */ body>*{position:relative} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;color:inherit} input,textarea{font-family:inherit} ::selection{background:var(--acc);color:var(--bg)} .wrap{max-width:1420px;margin:0 auto;padding:0 22px} .scroll{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin; scrollbar-color:var(--line2) transparent} .scroll::-webkit-scrollbar{width:7px;height:7px} .scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px} .scroll::-webkit-scrollbar-thumb:hover{background:var(--acc)} .scroll::-webkit-scrollbar-track{background:transparent} .progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200; background:linear-gradient(90deg,var(--acc),var(--acc2)); box-shadow:var(--glow);opacity:0;transition:width .28s ease,opacity .3s} .progress.on{opacity:1} /* ═══════════════ 3. 顶栏 ═══════════════ */ .hdr{background:var(--hdrbg);border-bottom:1px solid var(--line)} .hdr .wrap{height:104px;display:flex;align-items:center;gap:18px} .brand{display:flex;align-items:center;gap:16px} .mk{width:54px;height:54px;flex:none;display:grid;gap:2px; grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr))} .mk i{display:block;background:var(--mkoff)} .mk i.on{background:var(--acc)} .mk i.on2{background:var(--acc2)} .mk i.on3{background:var(--acc3)} html[data-skin="tk"] .mk{filter:drop-shadow(0 0 9px rgba(61,220,255,.4))} html[data-skin="ft"] .mk{filter:drop-shadow(0 0 10px rgba(158,197,255,.45))} html[data-skin="mo"] .mk{filter:drop-shadow(0 0 10px rgba(255,212,0,.5))} .mw{font-size:33px;font-weight:800;letter-spacing:.15em;line-height:1; position:relative;padding-bottom:7px} .mw::after{content:"";position:absolute;left:0;right:.15em;bottom:0;height:3px; background:linear-gradient(90deg,var(--acc) 0 25%,var(--acc2) 25% 50%, var(--acc3) 50% 75%,var(--line2) 75% 100%)} html[data-skin="br"] .mw{font-family:var(--serif);font-weight:500;letter-spacing:.22em} html[data-skin="br"] .mw::after{height:1px;background:var(--acc2)} html[data-skin="mo"] .mw{font-weight:800;letter-spacing:.06em} html[data-skin="mo"] .mw::after{height:6px} html[data-skin="pt"] .mw{font-weight:700;letter-spacing:.13em} html[data-skin="ap"] .mw{font-weight:600;letter-spacing:.02em} html[data-skin="ap"] .mw::after{height:2px;background:var(--acc)} html[data-skin="ms"] .mw::after{height:2px} html[data-skin="ft"] .mw{text-shadow:0 0 24px rgba(158,197,255,.5);letter-spacing:.17em} .hdr-r{margin-left:auto;display:flex;align-items:center;gap:10px} .hd{display:flex;align-items:baseline;gap:8px;padding:8px 15px;border:1px solid var(--line); border-radius:var(--r2);background:var(--pnl)} .hd b{font-size:19px;font-weight:600;font-family:var(--mono);letter-spacing:-.02em; font-variant-numeric:tabular-nums} .hd span{font-size:11.5px;color:var(--t3)} .hd svg{width:17px;height:17px;align-self:center;flex:none} .hd.wx b{color:var(--acc2)} .ibr{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:var(--r2);background:var(--pnl);color:var(--t2); transition:.16s} .ibr:hover{color:var(--acc);border-color:var(--line2)} .ibr svg{width:17px;height:17px} .menu-wrap{position:relative} .menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;z-index:120; background:var(--bg2);border:1px solid var(--line);border-radius:var(--r); padding:6px;display:none;box-shadow:0 18px 40px -18px rgba(0,0,0,.65)} .menu.open{display:block} .menu button{width:100%;display:flex;align-items:center;gap:9px;background:none;border:0; padding:8px 10px;border-radius:var(--r2);font-size:12.5px;color:var(--t2);text-align:left} .menu button:hover{background:var(--accbg);color:var(--acc)} .menu hr{border:0;border-top:1px solid var(--line);margin:5px 4px} /* ═══════════════ 4. 搜索区 + 热搜 + 风格切换 ═══════════════ */ .szone{padding:22px 0 16px;border-bottom:1px solid var(--line)} .srow{display:flex;align-items:stretch;max-width:720px;margin:0 auto;position:relative} .sbox{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:48px;padding:0 16px; border:1px solid var(--line2);border-right:0;background:var(--pnl2); border-radius:var(--r) 0 0 var(--r);box-shadow:var(--glow)} .sbox svg{width:16px;height:16px;flex:none;color:var(--t3)} .sbox input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--t1);font-size:14px} .sbox input::placeholder{color:var(--t3)} .sbox kbd{font:10.5px/1 var(--mono);color:var(--t3);border:1px solid var(--line); padding:4px 7px;border-radius:4px;flex:none} /* 风格切换：贴在搜索框右端，像输入框的一个附件按钮 */ .skin-btn{width:54px;flex:none;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:3px;border:1px solid var(--line2);background:var(--pnl2); border-radius:0 var(--r) var(--r) 0;color:var(--t2);transition:.16s} .skin-btn:hover{color:var(--acc);background:var(--accbg)} .skin-btn .dot4{display:grid;grid-template-columns:1fr 1fr;gap:1.5px;width:15px;height:15px} .skin-btn .dot4 i{display:block;border-radius:1px} .skin-btn .dot4 i:nth-child(1){background:var(--acc)} .skin-btn .dot4 i:nth-child(2){background:var(--acc2)} .skin-btn .dot4 i:nth-child(3){background:var(--acc3)} .skin-btn .dot4 i:nth-child(4){background:var(--line2)} .skin-btn em{font:600 9px/1 var(--mono);font-style:normal;letter-spacing:.02em} .skin-pop{position:absolute;right:0;top:calc(100% + 9px);z-index:130;width:330px; background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r); padding:12px;display:none;box-shadow:0 22px 46px -20px rgba(0,0,0,.7)} .skin-pop.open{display:block} .skin-pop h4{font-size:11.5px;color:var(--t3);font-weight:600;letter-spacing:.06em; margin-bottom:9px;display:flex;align-items:center;gap:7px} .skin-pop h4::after{content:"";flex:1;height:1px;background:var(--line)} .skin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .skin-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r2); border:1px solid transparent;background:var(--pnl);text-align:left;transition:.15s} .skin-item:hover{border-color:var(--line2)} .skin-item.on{border-color:var(--acc);background:var(--accbg)} .sw{width:26px;height:26px;flex:none;border-radius:4px;border:1px solid var(--line2); display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;overflow:hidden} .sw i{display:block} .skin-item .tx{min-width:0;flex:1} .skin-item .tx b{display:block;font-size:12.5px;font-weight:600;color:var(--t1);line-height:1.35} .skin-item .tx span{display:block;font:9.5px/1.3 var(--mono);color:var(--t3);letter-spacing:.04em} .skin-item.on .tx b::after{content:" ✓";color:var(--acc)} .hot{display:flex;align-items:center;gap:4px;margin-top:12px;justify-content:center; white-space:nowrap;overflow:hidden;flex-wrap:nowrap} .hot .lt{font-size:11.5px;color:var(--acc2);font-weight:600;flex:none; display:flex;align-items:center;gap:4px;margin-right:2px} .hot .lt svg{width:12px;height:12px} .hot a{font-size:12.5px;color:var(--t2);display:flex;align-items:center;gap:4px; padding:3px 8px;border-radius:99px;border:1px solid transparent; max-width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .hot a:hover{color:var(--acc);border-color:var(--line2);background:var(--accbg)} .hot a em{font:600 10px/1 var(--mono);color:var(--t3);font-style:normal;flex:none} .hot a:nth-child(-n+3) em{color:var(--up)} html[data-skin="mo"] .hot a::before{content:"▪";color:var(--acc);font-size:8px; vertical-align:2px;margin-right:3px} html[data-skin="mo"] .hot a::after{content:""} .hot .none{font-size:12px;color:var(--t3)} /* ═══════════════ 5. 面板 ═══════════════ */ .cols{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:var(--gap);padding:18px 0 20px;align-items:stretch} .colL,.colR{display:flex;flex-direction:column;gap:var(--gap);min-width:0} .top3{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:var(--gap); align-items:stretch} .top3>*{min-width:0} /* 高度钉死在 --newstot：左栈与新闻面板同高，矩形不随内容变化 */ .top3-l{display:flex;flex-direction:column;gap:var(--gap);min-width:0; height:var(--newstot);min-height:0} .top3-l>*{min-height:0} /* 自选股：高度上限按 6 只算（411px），股票更多则在面板内部滚动； 只加了几只时自然收缩，不会留一大片空行 */ .top3-l>#p-stocks{flex:0 1 auto;max-height:411px} /* 待办吃掉左栈剩余高度，条目再多也在面板内部滚动，绝不撑高左栈 */ .top3-l>#p-todo{flex:1 1 auto;min-height:200px} #p-news{height:var(--newstot)} .panel{background:var(--pnl);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--sh);min-width:0;display:flex;flex-direction:column;overflow:hidden} .ph{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid var(--line); background:var(--pnl2);min-height:44px;flex:none} .px{width:9px;height:9px;flex:none;display:grid;gap:1px; grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr} .px i{display:block;background:var(--acc)} .px i:nth-child(2){background:var(--acc2)} .px i:nth-child(3){background:var(--acc3)} .px i:nth-child(4){background:var(--line2)} .ph h2{font-size:13.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap} html[data-skin="br"] .ph h2{font-family:var(--serif);font-weight:600;font-size:14.5px} html[data-skin="mo"] .ph h2::before{content:"■ ";color:var(--acc);font-size:9px; vertical-align:1px} .ph .sp{flex:1} .ph .mt{font-size:11px;color:var(--t3);white-space:nowrap;font-family:var(--mono)} .mb{padding:12px 15px;flex:1;min-height:0;display:flex;flex-direction:column} .mb.tight{padding:9px 11px} /* 面板正文里的滚动容器统一撑满剩余高度（否则滚动条不出现、内容溢出） */ .mb>.scroll{flex:1;min-height:0} .mini{font:11.5px/1 var(--fnt);color:var(--t2);background:var(--pnl2);border:1px solid var(--line); border-radius:var(--r2);padding:5px 10px;white-space:nowrap;flex:none;transition:.15s} .mini:hover{color:var(--acc);border-color:var(--line2)} .mini:disabled{opacity:.5;cursor:default} /* ═══════════════ 6. 日历（日程已并入日期格） ═══════════════ */ /* 日历按内容自然高度（顶部已精简为紧凑单行 + 格子固定 56px），不参与拉伸 */ #p-calendar{flex:0 0 auto} /* OA 待审批吸收左栏剩余高度；空状态垂直居中，钉钉审批有数据时自然填满 */ #p-approval{flex:1 1 auto;min-height:200px} .caltop{display:flex;align-items:center;gap:10px;padding:7px 13px 6px; border-bottom:1px solid var(--line);flex:none} .caltop .big{font:600 27px/1 var(--mono);letter-spacing:-.04em;color:var(--acc)} html[data-skin="br"] .caltop .big{font-family:var(--serif);color:var(--t1)} .caltop .mdy{font-size:11.5px;color:var(--t2);line-height:1.3;min-width:0} .caltop .mdy b{display:block;color:var(--t1);font-size:12.5px;font-weight:600;white-space:nowrap} .caltop .lnr{display:block;font-size:10.5px;color:var(--t3);margin-top:1px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .caltop .lnr b{color:var(--acc2);font-weight:600} .caltop .nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex:none} .caltop .nav .mo{font:600 11.5px/1 var(--mono);color:var(--acc2);padding:0 3px; min-width:57px;text-align:center} .caltop .nav button{width:23px;height:23px;border:1px solid var(--line);background:var(--pnl2); border-radius:var(--r2);color:var(--t2);display:flex;align-items:center;justify-content:center; transition:.15s} .caltop .nav button:hover{color:var(--acc);border-color:var(--line2)} .caltop .nav button svg{width:11px;height:11px} /* 日历格：表头 20px + 6 周 × 56px 固定行高（不再随容器拉伸）。 改版前格子会被右栏高度撑到 62~150px，且整体偏大，这里一并收紧。 */ .cg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px; padding:8px 11px 10px;flex:0 0 auto; grid-template-rows:20px repeat(6,56px);grid-auto-rows:56px} .cg .wk{text-align:center;font-size:10.5px;color:var(--t3);padding:2px 0 4px; letter-spacing:.05em;align-self:center} .cell{position:relative;min-width:0;border-radius:var(--r2);padding:4px 5px 3px; display:flex;flex-direction:column;gap:1px;border:1px solid transparent;overflow:hidden; transition:.14s} .cell .cr{display:flex;align-items:baseline;gap:4px;line-height:1.1} .cell .d{font:600 12.5px/1.2 var(--mono);font-variant-numeric:tabular-nums} .cell .lm{font-size:8.5px;color:var(--t3);margin-left:auto;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .cell.other .d,.cell.other .lm{color:var(--t3);opacity:.42} .cell.today{background:var(--acc);border-color:var(--acc);box-shadow:var(--glow)} .cell.today .d{color:var(--bg)} .cell.today .lm{color:var(--bg);opacity:.8} .cell:hover:not(.today){background:var(--pnl2);border-color:var(--line)} /* ── 日程呈现 ── 旧版只在格子里点几个 5px 小方块，太不显眼。 现在：① 格子铺主色底 + 主色边框 + 主色日期；② 格内直接显示缩小后的日程标题（最多 3 行， 超出退化成「+N 项」）。完整当天安排仍由悬停浮层给出。 */ .cell.has-ev:not(.today){background:var(--accbg);border-color:var(--acc)} .cell.has-ev:not(.today) .d{color:var(--acc)} .cell .evl{margin-top:1px;display:flex;flex-direction:column;gap:1px;min-width:0;overflow:hidden} /* 格子内容高 49px = 日期行 15 + 间隙 1 + 3 行 × 9.9 ⇒ 最多铺 3 行 */ .cell .evl span{display:block;font-size:8px;line-height:1.24;color:var(--t2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cell .evl span.f{color:var(--t1)} .cell .evl span.more{color:var(--acc);font-weight:700;letter-spacing:.02em} .cell.other .evl span{color:var(--t3)} .cell.other .evl span.f{color:var(--t2)} .cell.other .evl span.more{color:var(--t3)} .cell.today .evl span,.cell.today .evl span.f{color:var(--bg);opacity:.93} .cell.today .evl span.more{color:var(--bg);opacity:1} /* ═══════ 日程浮层：鼠标移到有日程的日期格时弹出当天完整安排 ═══════ position:fixed 是必需的 —— .panel 有 overflow:hidden，绝对定位会被裁掉 */ .evpop{position:fixed;z-index:120;width:270px;max-width:86vw; background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r); box-shadow:0 20px 48px -22px rgba(0,0,0,.72),0 0 0 1px var(--line); padding:11px 13px;opacity:0;visibility:hidden;transform:translateY(-4px); transition:opacity .14s,transform .14s,visibility .14s;pointer-events:none} .evpop.on{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto} .evpop .eh{display:flex;align-items:baseline;gap:7px;padding-bottom:7px; border-bottom:1px solid var(--line);margin-bottom:5px} .evpop .eh b{font:700 13px/1.2 var(--mono);color:var(--t1)} .evpop .eh em{font-size:11px;color:var(--acc);font-style:normal;font-weight:600} .evpop .eh span{margin-left:auto;font-size:10.5px;color:var(--t3);white-space:nowrap} .evpop .er{display:flex;align-items:center;gap:8px;padding:6px 0} .evpop .er+.er{border-top:1px dashed var(--line)} .evpop .er:hover .et{color:var(--acc)} .evpop .er .ec{width:3px;height:14px;border-radius:2px;background:var(--acc);flex:none} .evpop .er .ec.b{background:var(--acc2)} .evpop .er .ec.c{background:var(--acc3)} /* 时间做成淡色小胶囊：用 --accbg 底 + --t1 字，深/浅皮肤下对比度都够 （原先直接上 --acc2，浅色皮肤的薄荷绿/系统绿在白底上只有 2.2:1，读不清） */ .evpop .er .etm{font:600 11px/1.25 var(--mono);color:var(--t1);flex:none; width:62px;text-align:center;background:var(--accbg);border-radius:var(--r2); padding:2px 3px;font-variant-numeric:tabular-nums} .evpop .er .et{font-size:12.5px;color:var(--t1);flex:1;min-width:0;line-height:1.35} .evpop .ejump{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--line); font-size:11px;color:var(--t3);text-align:center} .evpop .ejump:hover{color:var(--acc)} /* ═══════════════ 7. OA 待审批 ═══════════════ */ /* 空状态在整块面板里垂直居中（面板吸收左栏剩余高度，居中比顶部对齐更稳） */ #apprBody{display:flex;flex-direction:column} #apprBody>.apempty{margin:auto;width:100%;text-align:center} .ap{display:flex;align-items:center;gap:10px;padding:8px 0} .ap+.ap{border-top:1px solid var(--line)} .ap .bd{flex:1;min-width:0} .ap .tt{display:block;font-size:12.5px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ap .sub{font-size:11px;color:var(--t3);margin-top:3px;display:flex;gap:9px;align-items:center} .ap .sub span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ap .sub .due{color:var(--warn)} /* 页内直接审批：同意 / 拒绝 */ .ap .ops{display:flex;gap:6px;flex:none} .ap .apb{font:inherit;font-size:11px;line-height:1;padding:5px 9px;border-radius:var(--r2); border:1px solid var(--line2);background:var(--pnl2);color:var(--t2);cursor:pointer; white-space:nowrap;transition:background .16s,border-color .16s,color .16s} .ap .apb.ok:hover{border-color:var(--acc);background:var(--acc);color:#fff} .ap .apb.no:hover{border-color:var(--up);background:var(--up);color:#fff} .ap .ar{width:6px;height:6px;border-right:1.5px solid var(--t3);border-top:1.5px solid var(--t3); transform:rotate(45deg);flex:none;display:block} /* ═══════════════ 8. 自选股（含分时走势） ═══════════════ */ .stk,.stkh{display:grid;grid-template-columns:minmax(0,1fr) 92px 74px 68px 18px;gap:7px; align-items:center} .stkh{padding:2px 15px 8px;font-size:10.5px;color:var(--t3);letter-spacing:.04em;flex:none} .stkh .r{text-align:right} .stkbd{flex:1;min-height:0} /* 6 只股票按可用高度均分，避免面板底部空一截（flex:1 0 auto = 可拉伸但不压缩，超出仍可滚） */ #stockBody{display:flex;flex-direction:column} #stockBody .stk{flex:1 0 auto} .stk{padding:7px 15px;border-top:1px solid var(--line);transition:.14s} .stk:first-child{border-top:0} .stk:hover{background:var(--pnl2)} /* 删除自选股：平时几乎不可见，悬浮行时才浮现，避免视觉噪音 */ .stk .del{width:18px;height:18px;border:0;background:none;color:var(--t3);opacity:0; display:flex;align-items:center;justify-content:center;border-radius:var(--r2); transition:.14s;padding:0} .stk:hover .del{opacity:.55} .stk .del:hover{opacity:1;color:var(--up);background:var(--pnl2)} .stk .del svg{width:11px;height:11px} .stk .nm{min-width:0} .stk .nm b{display:block;font-size:14.5px;font-weight:700;color:var(--t1);letter-spacing:.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3} .stk .nm span{font:9.5px/1.4 var(--mono);color:var(--t3);letter-spacing:.03em} .stk .spark{width:92px;height:32px;display:block} .spark .ln{fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round} .spark .fl{stroke:none;opacity:.14} .spark .pv{stroke-dasharray:2 2;stroke-width:.8;opacity:.42} .stk .pr{text-align:right;font:700 16px/1.25 var(--mono); font-variant-numeric:tabular-nums;letter-spacing:-.02em} .stk .pc{text-align:right;font:700 14px/1.25 var(--mono); font-variant-numeric:tabular-nums;letter-spacing:-.01em} .up{color:var(--up)}.dn{color:var(--dn)}.flat{color:var(--t2)} /* ═══════════════ 9. 新闻资讯 ═══════════════ */ .tabs{display:flex;gap:3px;padding:8px 12px 0;border-bottom:1px solid var(--line);flex:none} .tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:0 10px 8px; font-size:12.5px;color:var(--t3);transition:.15s} .tabs button:hover{color:var(--t2)} .tabs button.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:600} .tabs button b{font:600 10px/1 var(--mono);color:var(--t3);margin-left:4px; padding:2px 5px;border-radius:99px;background:var(--pnl2)} .tabs button.on b{color:var(--acc);background:var(--accbg)} /* 只展示最新 6 条，不再出现滚动条；6 条在定高面板内均分填满 */ .nws{flex:1;min-height:0;padding:2px 0;display:flex;flex-direction:column;overflow:hidden} .nw{display:flex;flex-direction:column;justify-content:center;flex:1 0 auto; padding:12px 15px;border-bottom:1px solid var(--line);transition:.14s} .nw:last-child{border-bottom:0} .nw:hover{background:var(--pnl2)} .nw .t{font-size:16px;font-weight:600;line-height:1.45;color:var(--t1);letter-spacing:.005em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .nw:hover .t{color:var(--acc)} html[data-skin="br"] .nw .t{font-family:var(--serif);font-size:15.5px} .nw .m{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11px;color:var(--t3)} .nw .m .s{color:var(--acc2);font-weight:500} .nw .m .dt{font-family:var(--mono)} .nw .m i{width:3px;height:3px;border-radius:50%;background:var(--t3);display:block;flex:none} .nw .m .badge{margin-left:auto;font:9.5px/1 var(--mono);color:var(--t3); border:1px solid var(--line);padding:2px 6px;border-radius:99px} /* ═══════════════ 10. 卡片网格（AI 工具 / 网站收藏 共用同一种显示模式） ═══════════════ */ .cs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px} .cs .gl{grid-column:1/-1;font-size:10.5px;color:var(--t3);letter-spacing:.07em; display:flex;align-items:center;gap:7px} .cs .gl::after{content:"";flex:1;height:1px;background:var(--line)} .ct{display:flex;align-items:center;gap:10px;padding:8px 10px;min-width:0; border:1px solid var(--line);border-radius:var(--r2);background:var(--pnl2); transition:.16s;position:relative} .ct:hover{border-color:var(--line2);background:var(--accbg)} .ct .ic{width:28px;height:28px;flex:none;border-radius:7px;background-color:#fff; border:1px solid rgba(0,0,0,.08);overflow:hidden;padding:0; background-repeat:no-repeat;background-position:center;background-size:19px 19px; display:flex;align-items:center;justify-content:center} /* 深色皮肤下 favicon 底色提亮（很多站点图标是深色透明底，否则看不清） */ html[data-skin="tk"] .ct .ic,html[data-skin="ft"] .ct .ic, html[data-skin="mo"] .ct .ic{background-color:rgba(255,255,255,.93)} html[data-skin="mo"] .ct .ic{border-radius:0} html[data-skin="pt"] .ct .ic{border-radius:9px} .ct .ic img{width:100%;height:100%;object-fit:contain;display:block} .ct .tx{min-width:0;flex:1} .ct b{display:block;font-size:12.5px;font-weight:600;color:var(--t1); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ct span{display:block;font-size:10.5px;color:var(--t3);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} /* 编辑按钮：常驻但很淡，悬浮才亮 —— 既看得见「这里能改」，又不吵 */ .ct .ed{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:20px;height:20px; border:1px solid var(--line);background:var(--bg2);border-radius:var(--r2);color:var(--t3); display:flex;align-items:center;justify-content:center;padding:0;opacity:.32;transition:.15s} .ct:hover .ed{opacity:1} .ct .ed:hover{color:var(--acc);border-color:var(--acc)} .ct.add{border-style:dashed;background:transparent;color:var(--t3);justify-content:center;gap:7px} .ct.add:hover{color:var(--acc)} .ct.add svg{width:13px;height:13px;flex:none} .ct.add span{font-size:12px;color:inherit} /* ═══════════════ 11. 待办事项 ═══════════════ */ .tdadd{display:flex;gap:8px;padding:10px 13px;border-bottom:1px solid var(--line);flex:none} .tdadd input{flex:1;min-width:0;border:1px solid var(--line);background:var(--pnl2); border-radius:var(--r2);padding:7px 11px;font-size:12.5px;color:var(--t1);outline:0} .tdadd input:focus{border-color:var(--line2)} .tdadd input::placeholder{color:var(--t3)} .tdadd button{border:1px solid var(--acc);background:var(--acc);color:var(--bg); border-radius:var(--r2);padding:0 15px;font:600 12.5px/1 var(--fnt);flex:none} html[data-skin="br"] .tdadd button,html[data-skin="ms"] .tdadd button, html[data-skin="pt"] .tdadd button{color:#fff} .tdl{flex:1;min-height:0;padding:2px 0} .td{display:flex;align-items:flex-start;gap:10px;padding:9px 14px; border-bottom:1px solid var(--line);transition:.14s} .td:hover{background:var(--pnl2)} .td .ck{width:16px;height:16px;flex:none;border:1.5px solid var(--line2); border-radius:4px;display:flex;align-items:center;justify-content:center; margin-top:1px;padding:0;background:none;transition:.15s} .td .ck svg{width:10px;height:10px;color:var(--bg);opacity:0} .td:hover .ck{border-color:var(--acc)} .td.done .ck{background:var(--acc);border-color:var(--acc)} .td.done .ck svg{opacity:1} html[data-skin="br"] .td.done .ck svg,html[data-skin="ms"] .td.done .ck svg, html[data-skin="pt"] .td.done .ck svg{color:#fff} .td .tx{flex:1;min-width:0;font-size:13px;color:var(--t1);line-height:1.5;word-break:break-word} .td.done .tx{color:var(--t3);text-decoration:line-through} .td .meta{font:10.5px/1.4 var(--mono);color:var(--t3);white-space:nowrap;flex:none;margin-top:2px} .td .act{display:flex;gap:2px;flex:none;opacity:0;transition:.15s} .td:hover .act{opacity:1} .td .act button{width:22px;height:22px;border:1px solid transparent;background:none; border-radius:var(--r2);color:var(--t3);display:flex;align-items:center;justify-content:center; padding:0} .td .act button:hover{color:var(--acc);border-color:var(--line2)} .td .act button.del:hover{color:var(--up)} .td.pri .tx::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%; background:var(--up);margin-right:7px;vertical-align:2px} /* ═══════════════ 12. 页脚 ═══════════════ */ .ftb{border-top:1px solid var(--line)} .ft{display:flex;align-items:center;gap:16px;padding:16px 0;flex-wrap:wrap} .ft .cp{display:flex;align-items:center;gap:10px} .ft .cp .mk{width:24px;height:24px;gap:1px;filter:none} .ft .cp b{font-size:13px;font-weight:700;letter-spacing:.16em} .ft .bl{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:11.5px; color:var(--t3);flex-wrap:wrap} .ft .bl a{color:var(--t3);transition:.15s} .ft .bl a:hover{color:var(--acc)} .ft .bl img{width:14px;height:14px;vertical-align:-2px;margin-right:4px} .ft .bl .sp{opacity:.4} /* ═══════════════ 13. 状态 / 骨架 ═══════════════ */ .skel{display:flex;flex-direction:column;gap:8px;padding:6px 0} .skel i{display:block;height:14px;border-radius:4px; background:linear-gradient(90deg,var(--pnl2) 0%,var(--line) 50%,var(--pnl2) 100%); background-size:200% 100%;animation:sk 1.3s ease-in-out infinite} .skel i:nth-child(2){width:82%} .skel i:nth-child(3){width:64%} @keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}} .state{padding:14px 6px;text-align:center;color:var(--t3);font-size:12.5px;line-height:1.9} .state.tall{display:flex;align-items:center;justify-content:center;min-height:120px} .state.err{color:var(--t2);padding:12px 4px} .state .warn{color:var(--warn)} .state .tag{display:inline-block;font:10.5px/1 var(--mono);color:var(--t3); border:1px solid var(--line);padding:3px 8px;border-radius:99px;margin-left:6px} .state .tag.live{color:var(--acc);border-color:var(--line2);background:var(--accbg)} .lnk{color:var(--acc);cursor:pointer;text-decoration:underline} .apply-link{display:inline-block;margin:3px 4px;font-size:11.5px;color:var(--acc); border:1px solid var(--line2);padding:4px 9px;border-radius:var(--r2);background:var(--accbg)} .apply-link:hover{border-color:var(--acc)} /* ═══════════════ 14. 登录遮罩 ═══════════════ */ .lock{position:fixed;inset:0;z-index:300;background:var(--bg); display:flex;align-items:center;justify-content:center;padding:24px} .lock.hide{display:none} .lock::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:var(--bgpat);background-size:var(--bgpat-size)} .lock-card{position:relative;width:100%;max-width:372px;padding:34px 30px; background:var(--pnl);border:1px solid var(--line2);border-radius:var(--r); box-shadow:var(--sh);text-align:center;animation:pop .34s cubic-bezier(.2,.8,.3,1)} @keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}} .lock-card .mk{margin:0 auto 16px} .lock-card h1{font-size:21px;font-weight:700;letter-spacing:.12em;margin-bottom:6px} .lock-card p{font-size:12.5px;color:var(--t3);margin-bottom:20px} .lock-form{display:flex;flex-direction:column;gap:10px} .lock-form input{height:44px;padding:0 14px;border:1px solid var(--line);background:var(--pnl2); border-radius:var(--r2);color:var(--t1);font-size:13.5px;outline:0;text-align:center; letter-spacing:.1em} .lock-form input:focus{border-color:var(--line2)} .lock-form button{height:44px;border:1px solid var(--acc);background:var(--acc);color:var(--bg); border-radius:var(--r2);font-size:13.5px;font-weight:600} html[data-skin="br"] .lock-form button,html[data-skin="ms"] .lock-form button, html[data-skin="pt"] .lock-form button{color:#fff} .lock-form button:disabled{opacity:.6} .lock-msg{font-size:11.5px;color:var(--up);min-height:16px} /* ═══════════════ 15. 弹窗 / Toast ═══════════════ */ .modal-host:empty{display:none} .mask{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.55); backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px; animation:fade .18s ease} @keyframes fade{from{opacity:0}to{opacity:1}} .dialog{width:100%;max-width:452px;background:var(--bg2);border:1px solid var(--line2); border-radius:var(--r);box-shadow:0 30px 70px -24px rgba(0,0,0,.75); animation:pop .26s cubic-bezier(.2,.8,.3,1);overflow:hidden} .dialog-h{display:flex;align-items:center;gap:9px;padding:14px 17px; border-bottom:1px solid var(--line);background:var(--pnl2)} .dialog-h h3{font-size:13.5px;font-weight:600} .dialog-b{padding:16px 17px;display:flex;flex-direction:column;gap:13px} /* 弹窗顶部的说明条（如「确认同意：<审批标题>」），比塞进 label 里更显眼 */ .ddesc{font-size:12px;line-height:1.55;color:var(--t1);padding:9px 11px;border-radius:var(--r2); background:var(--accbg);border:1px solid var(--line);word-break:break-word} .field label{display:block;font-size:11.5px;color:var(--t2);margin-bottom:5px} .field input,.field textarea{width:100%;padding:9px 12px;border:1px solid var(--line); background:var(--pnl2);border-radius:var(--r2);color:var(--t1);font-size:13px;outline:0; resize:vertical} .field input:focus,.field textarea:focus{border-color:var(--line2)} .field textarea{min-height:76px} .field .hint{display:block;font-size:11px;color:var(--t3);margin-top:4px} .dialog-f{display:flex;align-items:center;gap:9px;padding:13px 17px; border-top:1px solid var(--line);background:var(--pnl2)} .btn{border:1px solid var(--line);background:var(--pnl);color:var(--t2); border-radius:var(--r2);padding:8px 15px;font-size:12.5px;transition:.15s} .btn:hover{border-color:var(--line2);color:var(--t1)} .btn.primary{background:var(--acc);border-color:var(--acc);color:var(--bg);font-weight:600} html[data-skin="br"] .btn.primary,html[data-skin="ms"] .btn.primary, html[data-skin="pt"] .btn.primary{color:#fff} .btn.danger{color:var(--up);border-color:var(--line)} .btn.danger:hover{border-color:var(--up)} /* ── 添加自选股：搜索候选列表 ── */ .dialog.sd{max-width:474px} .sdlist{max-height:292px;overflow-y:auto;display:flex;flex-direction:column;gap:5px; border-top:1px solid var(--line);padding-top:12px;scrollbar-width:thin; scrollbar-color:var(--line2) transparent} .sdlist::-webkit-scrollbar{width:7px} .sdlist::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px} .sdempty{font-size:12px;color:var(--t3);text-align:center;padding:24px 0} .sdi{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 11px; border:1px solid var(--line);border-radius:var(--r2);background:var(--pnl);transition:.14s} .sdi:hover:not(:disabled){border-color:var(--acc);background:var(--accbg)} .sdi:disabled{opacity:.52;cursor:default} .sdi.busy{opacity:.55} .sdi .sn{font-size:13px;font-weight:600;color:var(--t1);min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sdi .sc{font:10.5px/1 var(--mono);color:var(--t3);flex:none} .sdi .st{font:10px/1 var(--mono);color:var(--t3);border:1px solid var(--line); padding:2px 6px;border-radius:99px;flex:none;margin-left:auto;white-space:nowrap} .sdi .sa{font-size:13px;color:var(--acc);flex:none;font-weight:600;width:42px;text-align:right; white-space:nowrap} .sdi:disabled .sa{color:var(--t3);font-size:10.5px} .toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,14px);z-index:400; background:var(--bg2);border:1px solid var(--line2);color:var(--t1); padding:10px 18px;border-radius:99px;font-size:12.5px;opacity:0;pointer-events:none; transition:.24s;box-shadow:0 16px 34px -16px rgba(0,0,0,.6);max-width:80vw;text-align:center} .toast.on{opacity:1;transform:translate(-50%,0)} /* ── 浅色皮肤补充：主色填充的按钮 / 勾选框上用白字 ── */ html[data-skin="mc"] .tdadd button,html[data-skin="ap"] .tdadd button, html[data-skin="mc"] .td.done .ck svg,html[data-skin="ap"] .td.done .ck svg, html[data-skin="mc"] .lock-form button,html[data-skin="ap"] .lock-form button, html[data-skin="mc"] .btn.primary,html[data-skin="ap"] .btn.primary{color:#fff} /* ── 浅色皮肤补充：淡色主色（薄荷绿/系统绿/粉）落在白底上对比度不足， 浮层表头的农历改用次级文字色，保证 4.5:1 可读 ── */ html[data-skin="mc"] .evpop .eh em,html[data-skin="ap"] .evpop .eh em, html[data-skin="br"] .evpop .eh em,html[data-skin="ms"] .evpop .eh em, html[data-skin="pt"] .evpop .eh em{color:var(--t2)} /* ═══════════════ 16. 响应式 ═══════════════ */ @media(max-width:1400px){ .cs{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:1180px){ .cols{grid-template-columns:minmax(0,1fr)} .top3{grid-template-columns:minmax(0,1fr)} /* 单列堆叠时不再需要「左上右下」凑矩形，全部回到内容自然高度 */ .top3-l{height:auto} .top3-l>#p-todo{flex:none} #p-news{height:auto} .cg{grid-template-rows:20px repeat(6,50px);grid-auto-rows:50px} } @media(max-width:860px){ .wrap{padding:0 14px} .hdr .wrap{height:auto;padding:14px 0;flex-wrap:wrap;gap:12px} .mw{font-size:26px} .mk{width:44px;height:44px} .hdr-r{width:100%;margin-left:0;flex-wrap:wrap} .hd{padding:6px 11px} .hd b{font-size:16px} .cs{grid-template-columns:repeat(2,minmax(0,1fr))} .hot{overflow-x:auto;justify-content:flex-start;padding-bottom:3px} .skin-pop{width:min(330px,94vw)} .stk,.stkh{grid-template-columns:minmax(0,1fr) 74px 66px 60px 18px;gap:7px} .stk .spark{width:74px} } @media(max-width:560px){ .stk,.stkh{grid-template-columns:minmax(0,1fr) 78px 64px 18px} .stk .spark,.stkh span:nth-child(2){display:none} .cs{grid-template-columns:minmax(0,1fr)} }