/* ===== Round 10b: card style everywhere (widgets, sheets, calendar, chat) ===== */
body[class*=" cs-"] .wid:hover,body[class*=" cs-"] #modal .box:hover{transform:translateY(-2px) rotate(-.25deg);box-shadow:0 12px 30px rgba(0,0,0,.18)}
body.rmo[class*=" cs-"] .wid,body.rmo[class*=" cs-"] #modal .box{animation:none;transition:none}
body[class*=" cs-"] .wid,body[class*=" cs-"] #modal .box{animation:none}
body.cs-cobweb .wid::after,body.cs-cobweb #modal .box::after{content:"";position:absolute;right:22px;top:0;width:1px;height:26px;background:rgba(255,255,255,.5);pointer-events:none}
body.cs-cobweb .wid::before,body.cs-cobweb #modal .box::before{content:"";position:absolute;right:16px;top:24px;width:13px;height:10px;border-radius:50%;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.25);pointer-events:none}
body.cs-present .wid::after,body.cs-present #modal .box::after{content:"";position:absolute;right:22px;top:-10px;width:36px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M15 9C9 1 2 2 3 8C4 14 10 12 15 9C20 12 26 14 27 8C28 2 21 1 15 9Z' fill='#facc15' stroke='#a16207'/%3E%3Ccircle cx='15' cy='9' r='2.6' fill='#eab308'/%3E%3C/svg%3E") 0 0/100% no-repeat;pointer-events:none}
body.cs-frost .wid::before,body.cs-frost #modal .box::before{content:"";position:absolute;left:-1px;right:-1px;top:-6px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 10Q0 2 10 2H190Q200 2 200 10Q194 9 190 13Q186 16 182 12Q176 8 168 11Q160 15 152 11Q144 7 134 12Q126 16 118 11Q108 7 98 11Q90 15 82 11Q72 7 62 12Q54 15 46 11Q36 7 26 12Q18 15 10 11Q4 8 0 10Z' fill='white'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
body.cs-bark .wid::before,body.cs-bark #modal .box::before{content:"";position:absolute;left:-12px;top:0;bottom:0;width:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' fill='none' stroke='#2b1a0e' stroke-opacity='.35' stroke-width='2'%3E%3Cpath d='M6 0Q10 15 5 30T8 60M20 0Q16 18 22 32T18 60M33 0Q37 14 31 28T35 60'/%3E%3C/svg%3E") 0 0/12px 30px repeat-y;pointer-events:none;border-radius:inherit}
body[class*=" cs-"] #modal .box{animation:none;transform:none!important}body[class*=" cs-"] .wid{padding-top:unset;padding-left:unset;padding-right:unset}
/* calendar cells */
body.cs-tomb .mday,body.cs-cobweb .mday{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.12))}body.cs-tomb .mday{border-radius:14px 14px 4px 4px}
body.cs-parch .mday{background:color-mix(in srgb,#e9d8b4 16%,transparent)}body.cs-present .mday.t{box-shadow:inset 0 0 0 2px #facc15}body.cs-frost .mday{background:color-mix(in srgb,#fff 6%,transparent);border-top:2px solid rgba(255,255,255,.35)}
body.cs-recipe .mday{background:color-mix(in srgb,#fffdf6 12%,transparent)}body.cs-quilt .mday{outline:1px dashed color-mix(in srgb,var(--acc) 30%,transparent);outline-offset:-3px}body.cs-glass .mday{background:color-mix(in srgb,#0ea5e9 7%,transparent)}body.cs-bark .mday{border-left:3px solid #7c4a21}body.cs-neonf .mday{box-shadow:inset 0 0 0 1px rgba(240,171,252,.35)}body.cs-cloudc .mday{border-radius:16px}body.cs-starc .mday{background-color:color-mix(in srgb,#141b33 40%,transparent)}
/* chat bubbles (others' bubbles take the card look; mine keep my bubble color) */
body.cs-tomb .bub:not(.me) .bb{background:linear-gradient(180deg,#4b4b5a,#34343f)!important;color:#f1f1f4!important;border-radius:22px 22px 8px 8px!important}
body.cs-cobweb .bub:not(.me) .bb{border:1px solid rgba(255,255,255,.2)}
body.cs-parch .bub:not(.me) .bb{background:#e9d8b4!important;color:#3b2a14!important;border-radius:6px 14px 8px 14px!important}
body.cs-present .bub:not(.me) .bb{border:2px solid color-mix(in srgb,#dc2626 60%,transparent)}body.cs-present .bub.me .bb{box-shadow:inset -6px 0 0 #facc15}
body.cs-frost .bub:not(.me) .bb{background:color-mix(in srgb,var(--card) 70%,transparent)!important;backdrop-filter:blur(8px);border-top:3px solid #fff}
body.cs-recipe .bub:not(.me) .bb{background:#fffdf6!important;color:#2b2420!important;border:1px solid #e7dcc4}
body.cs-quilt .bub:not(.me) .bb{outline:1.5px dashed color-mix(in srgb,var(--acc) 40%,transparent);outline-offset:-4px}
body.cs-glass .bub:not(.me) .bb{background:color-mix(in srgb,#0ea5e9 14%,var(--card))!important;border:1px solid rgba(186,230,253,.6)}
body.cs-bark .bub:not(.me) .bb{border-left:5px solid #7c4a21}body.cs-neonf .bub .bb{box-shadow:0 0 10px rgba(240,171,252,.35)}body.cs-cloudc .bub .bb{border-radius:22px!important}body.cs-starc .bub:not(.me) .bb{background:#141b33!important;color:#e8edff!important}
/* kitchen display tiles follow too (they reuse .card/.wid) */
body.kdmode[class*=" cs-"] .card,body.kdmode[class*=" cs-"] .wid{animation:none}
/* widget preview follows theme vars */
.wprev[style*="--wa"] .wph b,.wprev[style*="--wa"] .wpk b,.wprev[style*="--wa"] .wpk span.a{color:var(--wa)}
.wprev[style*="--wm"] .wph small,.wprev[style*="--wm"] .wpk span.m{color:var(--wm)}
/* ===== birthdays ===== */
.bdrow{gap:8px;flex-wrap:wrap}.bdrow select{flex:1 1 120px;min-width:0}.bdrow input{flex:1 1 130px;min-width:0}
.bdli{padding:8px 0;gap:10px}.bdav{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;background:color-mix(in srgb,var(--acc) 16%,transparent);font-size:18px;flex:none}
.bdban{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:0 0 14px;border-radius:var(--r,18px);background:linear-gradient(120deg,color-mix(in srgb,var(--acc) 22%,var(--card,#fff)),var(--card,#fff));border:2px solid color-mix(in srgb,var(--acc) 55%,transparent);color:var(--ink)}
.bdban b{display:block;font-size:1.15em}.bdban small{color:var(--mut,inherit);opacity:.9}.bdcf{font-size:30px;animation:bdpop 1.4s ease-in-out infinite alternate}
@keyframes bdpop{to{transform:rotate(-12deg) scale(1.15)}}@media (prefers-reduced-motion:reduce){.bdcf{animation:none}}
.bdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:6px}
.bdi{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);background:color-mix(in srgb,var(--card,#fff) 85%,transparent);color:var(--ink);min-height:56px;cursor:pointer;font:inherit}
.bdi .bdtx{flex:1;min-width:0}.bdi>.av,.bdi>.bdav{flex:none}.bdi b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bdi small{color:var(--mut,inherit);font-size:.8em}
.bdi em{font-style:normal;font-weight:800;font-size:1.3em;text-align:center;line-height:1;color:var(--acc)}.bdi em small{display:block;font-size:.55em;font-weight:600}
.bdi.soon{border-color:color-mix(in srgb,var(--acc) 50%,transparent)}.bdi.now{background:color-mix(in srgb,var(--acc) 18%,var(--card,#fff));border-color:var(--acc)}
@media (max-width:520px){.bdgrid{grid-template-columns:1fr}}
/* ===== quick log in place ===== */
.qlrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 12px;padding:10px 12px;border-radius:16px;background:color-mix(in srgb,var(--card,#fff) 88%,transparent);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.qlrow>b{margin-right:4px;color:var(--ink)}
.qlc{flex:1 1 auto;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);background:color-mix(in srgb,var(--acc) 10%,var(--card,#fff));color:var(--ink);font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.qlc:active{transform:scale(.96)}.qlc.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.qlg{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:8px}
.qlb{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;min-height:76px;border-radius:14px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);background:color-mix(in srgb,var(--card,#fff) 90%,transparent);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}.qlb span{font-size:26px}
#qlt{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,16px);opacity:0;pointer-events:none;z-index:9999;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 18px;border-radius:99px;background:var(--ink,#111);color:var(--bg,#fff);box-shadow:0 8px 28px rgba(0,0,0,.3);transition:opacity .25s,transform .3s;max-width:calc(100vw - 24px)}
#qlt.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}#qlt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#qlt button{border:0;border-radius:99px;padding:8px 14px;font:inherit;font-weight:800;background:var(--acc,#c2410c);color:#fff;cursor:pointer}
/* ===== poll results ===== */
.pkseg{flex-wrap:wrap}.pkseg button{flex:1 1 auto}
.plres{margin-top:10px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--acc) 14%,var(--card,#fff));border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.plres small{color:var(--mut,inherit)}.plpick{margin-top:8px}
.plban{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:16px 18px;margin:0 0 14px;border-radius:var(--r,18px);color:var(--ink);background:linear-gradient(120deg,color-mix(in srgb,var(--acc) 26%,var(--card,#fff)),var(--card,#fff));border:2px solid color-mix(in srgb,var(--acc) 55%,transparent)}
.plban b{display:block;font-size:1.2em;line-height:1.25}.plban .plk{display:block;font-weight:700;opacity:.8;margin-bottom:2px}.plban .btn{margin-top:6px}.plban>.btn.q{align-self:flex-start;margin-top:0}
.plban.k-trip{padding:22px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 40%,var(--card,#fff)),color-mix(in srgb,#38bdf8 22%,var(--card,#fff)))}.plban.k-trip b{font-size:1.5em}
.plban.tie{border-style:dashed}.plban.tie.spin b,.plres.tie.spin b{animation:plspin .3s linear 3}
.plban.reveal{animation:plin .8s cubic-bezier(.2,1.4,.4,1) both}
@keyframes plin{from{transform:scale(.85) translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes plspin{50%{transform:translateY(-4px) rotate(-3deg)}}
.plconf{position:absolute;inset:0;pointer-events:none}.plconf i{position:absolute;top:-10px;left:var(--x);width:8px;height:12px;border-radius:2px;background:var(--acc);opacity:.85;transform:rotate(var(--r));animation:plfall 2.6s var(--d) ease-in both}
.plconf i:nth-child(3n){background:#facc15}.plconf i:nth-child(3n+1){background:#38bdf8}.plconf i:nth-child(4n){background:#f472b6}
@keyframes plfall{to{transform:translateY(160px) rotate(calc(var(--r) + 540deg));opacity:0}}
.plcd{display:flex;align-items:center;gap:14px}.plcdn{font-size:2em;font-weight:900;color:var(--acc);text-align:center;line-height:1;min-width:56px}.plcdn small{display:block;font-size:.4em;font-weight:700}
.plcd b{display:block}
@media (prefers-reduced-motion:reduce){.plban.reveal,.plconf i,.plban.tie.spin b,.plres.tie.spin b{animation:none}.plconf{display:none}}