/* Shared warm surfaces. Geometry and business controls remain owned by layout CSS. */

/* Full-bleed prismatic glass, inspired by the supplied QQ homepage reference. */
.login-shell { --login-gold:#eaa247; --login-amber:#bb6a2c; --login-ivory:#fff9ef; display:flex; align-items:center; justify-content:center; min-height:100vh; min-height:100dvh; padding:42px 20px 26px; position:relative; isolation:isolate; overflow:hidden; background:#f4d5b3; }
.login-shell .login-panel { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; width:100%; padding:0; gap:24px; }
.login-atmosphere { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.login-color-field { position:absolute; inset:-150px; background:radial-gradient(ellipse at 15% 22%,#f0ad59 0,transparent 48%),radial-gradient(ellipse at 85% 20%,#b96b32 0,transparent 48%),radial-gradient(ellipse at 18% 82%,#e9a15c 0,transparent 42%),linear-gradient(145deg,#e5a14e 0%,#f3d2b1 48%,var(--login-ivory) 86%); transform:translate(var(--login-dx,0px),var(--login-dy,0px)); transition:transform 480ms cubic-bezier(.2,.7,.2,1); }
/* Independent flowing layers leave the pointer-driven parent transform intact. */
.login-color-field::before,.login-color-field::after { content:""; position:absolute; inset:-12%; pointer-events:none; mask-image:radial-gradient(ellipse at center,#000 45%,transparent 72%); will-change:transform; }
.login-color-field::before { background:radial-gradient(ellipse at 24% 34%,#d77c32e6 0%,#eaa247b3 22%,transparent 49%),radial-gradient(ellipse at 72% 70%,#fff9effa 0%,#fff0dfb3 20%,transparent 48%); animation:login-gold-flow 8s ease-in-out infinite alternate; }
.login-color-field::after { background:radial-gradient(ellipse at 76% 26%,#b9602799 0%,transparent 43%),radial-gradient(ellipse at 25% 76%,#fffaf2ed 0%,transparent 38%); animation:login-honey-flow 11s ease-in-out infinite alternate; }
@keyframes login-gold-flow { 0% { transform:translate3d(-20%,-13%,0) rotate(-12deg) scale(1.03); } 50% { transform:translate3d(14%,15%,0) rotate(6deg) scale(1.16); } 100% { transform:translate3d(23%,-9%,0) rotate(14deg) scale(1.03); } }
@keyframes login-honey-flow { 0% { transform:translate3d(18%,14%,0) rotate(12deg) scale(1.05); } 50% { transform:translate3d(-17%,-13%,0) rotate(-8deg) scale(1.18); } 100% { transform:translate3d(-22%,16%,0) rotate(-14deg) scale(1.05); } }
.login-shell[data-motion-paused] .login-color-field::before,.login-shell[data-motion-paused] .login-color-field::after { animation-play-state:paused; }
.login-pointer-glow { position:absolute; top:0; left:0; z-index:1; width:400px; height:400px; border-radius:50%; pointer-events:none; background:radial-gradient(ellipse,#fffdf7f5 0%,#fff3e0cc 15%,#ffd5a480 34%,#f2b27026 52%,transparent 70%); transition:transform 160ms ease-out; will-change:transform; }
.login-glass-stripes { position:absolute; inset:-60px; z-index:2; background:repeating-linear-gradient(90deg,#fffaf226 0px,#fffaf208 14px,#fffaf200 35px,#70380d1c 36px,#70380d08 58px,#fffaf233 59px,#fffaf212 60px); transform:translate3d(var(--login-glass-x,0px),0,0); transition:transform 650ms cubic-bezier(.2,.7,.2,1); }
.login-glass-stripes::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 25%,#fff9ef26 44%,#fffaf252 48%,transparent 67%); transform:translate3d(var(--login-sheen-x,0px),var(--login-sheen-y,0px),0); transition:transform 800ms cubic-bezier(.2,.7,.2,1); }
.login-intro { text-align:center; color:#56351f; }
.login-intro p { margin:0 0 10px; font-size:11px; letter-spacing:.26em; color:#69472e; }
.login-intro h1 { margin:0; font-weight:500; font-size:clamp(28px,3.8vw,48px); letter-spacing:.12em; text-shadow:0 2px 24px #fff5df88; }
.login-shell .auth-card { width:420px; max-width:100%; padding:36px; background:linear-gradient(145deg,#ffffffeb,#fff9eff0); border:1px solid #ffffffe0; border-radius:24px; backdrop-filter:blur(24px); box-shadow:0 28px 80px #713e2024,0 4px 18px #713e200a,inset 0 1px 0 #fff; }
.login-brand { display:flex; justify-content:center; margin:0 auto 14px; }
.login-product-name { color:#6b6054; text-align:center; font-size:14px; letter-spacing:.12em; margin-bottom:30px; }
.login-shell .auth-card>.eyebrow { display:none; }
.login-shell .auth-card h2 { text-align:center; font-size:25px; letter-spacing:-.02em; margin:0 0 8px; color:#292724; }
.login-shell .auth-card>p:not(.login-help) { text-align:center; margin:0 0 24px; font-size:14px; color:#7c736a; line-height:1.6; }
.login-shell #login-form { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
.login-shell #login-form .field { min-width:0; gap:8px; }
.login-shell #login-form label { font-size:13px; color:#514b44; font-weight:600; }
.login-shell #login-form input { width:100%; min-height:48px; border:1px solid #dfd7cd; border-radius:10px; background:#ffffffd9; padding:12px 14px; font-size:16px; transition:border-color 180ms ease,background-color 180ms ease; }
.login-shell #login-form input::placeholder { color:#938b82; }
.login-shell #login-form .form-actions { margin:4px 0 0; padding:0; border:0; }
.login-shell #login-form .btn { width:100%; min-height:48px; border-radius:10px; }
.login-shell .login-help { font-size:12px; color:#7c736a; margin:22px 0 0; text-align:center; line-height:1.7; }
.login-shell #login-error { margin:0; color:#b53838; background:#fff0ee; padding:10px 12px; border-radius:8px; overflow-wrap:anywhere; }
.login-footer { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 12px; margin:0; font-size:12px; color:#755239; text-align:center; }
@media(min-width:481px) and (max-height:800px) {
  .login-shell { padding:24px 20px; }
  .login-shell .login-panel { gap:18px; }
  .login-intro h1 { font-size:34px; }
  .login-shell .auth-card { padding:28px 36px; }
  .login-product-name { margin-bottom:22px; }
  .login-shell .login-help { margin-top:18px; }
}
@media(max-width:480px) { .login-shell { padding:24px 16px; } .login-shell .auth-card { padding:28px 24px; border-radius:20px; } }
@media(max-height:650px) { .login-shell { align-items:flex-start; padding-top:20px; padding-bottom:20px; } }
.brand-lockup { align-items:center; gap:12px; position:relative; }
.brand-logo-crop { position:relative; display:block; flex:none; height:44px; overflow:hidden; mix-blend-mode:multiply; }
.brand-logo-ck { width:82px; }
.brand-logo-cn { width:108px; }
.brand-logo-crop img { position:absolute; height:100px; width:auto; max-width:none; left:50%; top:50%; transform:translate(-50%,-50%); }
.brand-logo-ck img { margin-top:3px; }
.brand-accessible-name { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(min-width:761px) and (max-width:1100px) { .brand-lockup { gap:8px; } .brand-logo-crop { height:36px; } .brand-logo-ck { width:66px; } .brand-logo-cn { width:88px; } .brand-logo-crop img { height:82px; } }
@media(max-width:760px) {
  .app-header { display:flex; position:relative; top:auto; height:64px; padding:10px 16px; justify-content:space-between; gap:12px; }
  .app-header .top-nav { display:none; }
  .brand-lockup { gap:8px; }
  .brand-logo-crop { height:34px; }
  .brand-logo-ck { width:62px; } .brand-logo-cn { width:82px; }
  .brand-logo-crop img { height:78px; }
  .app-header .header-user { min-width:0; gap:6px; }
}
:root { --polish-shadow: 0 8px 24px rgba(104,65,22,.07); }
body { background: radial-gradient(ellipse at 12% 0%, #fff0dc 0, transparent 48%), linear-gradient(135deg,#fffaf3,#f7f6f3 70%); }
.app-shell,.workspace { background: transparent; }
.app-header { background:linear-gradient(110deg,#fff9ef 0%,#f5cb92 23%,#fff7e7 43%,#eab67c 65%,#fffaf3 83%,#f3d2a1 100%); background-size:300% 100%; animation:header-gold-flow 6s ease-in-out infinite alternate; box-shadow:0 3px 20px #a5681812; }
@keyframes header-gold-flow { from { background-position:0% 50%; } to { background-position:100% 50%; } }
.app-shell[data-motion-paused] .app-header { animation-play-state:paused; }
.card { background: linear-gradient(145deg,#fff,#fffdf9); border-color:#e9e0d5; box-shadow:var(--polish-shadow); transition:box-shadow 200ms ease,border-color 200ms ease; }
.card-head,.toolbar { background:linear-gradient(110deg,#fffaf3,#fff 80%); }
thead { background:linear-gradient(100deg,#fbf2e6,#faf8f4); }
thead th { background:transparent; }
.count-icon { background:linear-gradient(140deg,#fff4e6,#ffe8c9); box-shadow:inset 0 1px 0 #fff; }
.btn { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(180deg,#fff,#fcf9f4); box-shadow:0 2px 0 #e9e0d5,0 4px 10px rgba(104,65,22,.05); transition:transform 180ms ease,box-shadow 180ms ease,background-color 180ms ease; }
.btn-primary { color:#fff; background:linear-gradient(135deg,#d87a0a,#bb5705); border-color:#bf6406; box-shadow:0 3px 0 #994505,0 7px 16px rgba(190,94,6,.19),inset 0 1px 0 rgba(255,255,255,.25); }
.btn-danger { color:var(--red); background:linear-gradient(145deg,#fff5f4,#fde7e5); border-color:#eac5c1; }
.btn-ghost { background:transparent; box-shadow:none; }
.btn:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 rgba(104,65,22,.2),inset 0 2px 4px rgba(104,65,22,.09); }
.btn:disabled { transform:none; box-shadow:none; cursor:not-allowed; }
.btn:focus-visible { outline:3px solid #b65c12; outline-offset:3px; }
.search-box:focus-within,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid #d97706; outline-offset:2px; box-shadow:0 0 0 4px rgba(217,119,6,.09); }
.top-nav .nav-btn.active,.mobile-nav .nav-btn.active,.chip.active { background:linear-gradient(135deg,#fff0dc,#fff8ed); }
.top-nav .nav-slide-indicator { background:linear-gradient(90deg,#e7a54a,#cb6507); }
.modal-card,.confirm-dialog { background:linear-gradient(145deg,#fff,#fffaf3); box-shadow:0 22px 65px rgba(63,39,16,.19); animation:polish-enter 200ms ease-out; }
.ck-ripple { position:absolute; pointer-events:none; border-radius:50%; background:rgba(194,103,15,.18); width:var(--ripple-size); height:var(--ripple-size); left:var(--ripple-x); top:var(--ripple-y); transform:translate(-50%,-50%) scale(0); animation:polish-ripple 240ms ease-out forwards; }
.btn-primary .ck-ripple { background:rgba(255,255,255,.3); }
@keyframes polish-ripple { to { transform:translate(-50%,-50%) scale(1); opacity:0; } }
@keyframes polish-enter { from { opacity:0; } to { opacity:1; } }
@media (hover:hover) and (pointer:fine) {
  .btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 3px 0 #e9e0d5,0 8px 18px rgba(104,65,22,.1); }
  .btn-primary:hover:not(:disabled) { box-shadow:0 3px 0 #994505,0 10px 22px rgba(190,94,6,.23); }
  .btn:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 rgba(104,65,22,.2); }
  .dashboard-todos:hover,.dashboard-activity:hover { border-color:#e4cba9; box-shadow:0 10px 28px rgba(104,65,22,.1); }
  tbody tr:hover,.count-row:hover { background:#fff5e8; }
}
@media (hover:none),(pointer:coarse) { .btn:hover { transform:none; } .dashboard-counts { transform:none; } }


.login-shell #login-form .btn-primary { background:linear-gradient(110deg,#d87a0a,#bb5705); border-color:#bf6406; box-shadow:0 3px 0 #994505,0 8px 22px #be5e0630,inset 0 1px 0 #ffffff40; }
.login-shell #login-form input:focus { border-color:#d98225; outline:3px solid #d9822523; box-shadow:none; }
@media(max-width:480px) { .login-shell .login-panel { gap:22px; } .login-intro p { font-size:10px; letter-spacing:.17em; } .login-glass-stripes { background-size:40px 100%; } }

/* Transparent login lockup; the shared application-header logo keeps its layout. */
.login-brand.brand-lockup { width:280px; max-width:100%; height:70px; gap:0; overflow:hidden; }
.login-brand .login-logo-transparent { display:block; position:absolute; width:100%; max-width:100%; height:auto; left:50%; top:50%; transform:translate(-50%,-50%); }
@media(max-width:480px) { .login-brand.brand-lockup { width:248px; height:62px; } }

/* Warm, continuously moving atmosphere behind every signed-in page. */
.app-shell { position:relative; isolation:isolate; background:#fff9f1; }
.app-shell::before,.app-shell::after { content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none; mask-image:radial-gradient(ellipse at center,#000 45%,transparent 72%); will-change:transform; }
.app-shell::before { background:radial-gradient(ellipse at 20% 25%,#e9aa55b3,transparent 46%),radial-gradient(ellipse at 78% 66%,#d9955299,transparent 44%); animation:workspace-gold-flow 7s ease-in-out infinite alternate; }
.app-shell::after { background:radial-gradient(ellipse at 72% 18%,#fffefbf2,transparent 42%),radial-gradient(ellipse at 25% 78%,#ffd398b3,transparent 45%); animation:workspace-ivory-flow 9s ease-in-out infinite alternate; }
@keyframes workspace-gold-flow { from { transform:translate3d(-15%,-10%,0) scale(1); } to { transform:translate3d(16%,12%,0) scale(1.16); } }
@keyframes workspace-ivory-flow { from { transform:translate3d(14%,10%,0) scale(1.12); } to { transform:translate3d(-16%,-12%,0) scale(1); } }
.app-shell[data-motion-paused]::before,.app-shell[data-motion-paused]::after { animation-play-state:paused; }
#app-view :is(.card,.metric) { position:relative; isolation:isolate; background:linear-gradient(140deg,#ffffffed,#fffaf4eb); transition:box-shadow 220ms ease,border-color 220ms ease; }
#app-view :is(.card,.metric)::after { content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none; opacity:var(--glow-opacity,0); background:radial-gradient(320px circle at var(--glow-x,50%) var(--glow-y,50%),#f7ba5b2e,transparent 76%); box-shadow:inset 0 0 0 1px #eeb36045; transition:opacity 220ms ease; }
@media(hover:hover) and (pointer:fine) {
  #app-view :is(.card,.metric)[data-card-active] { transform:none; border-color:#dfb783; box-shadow:0 14px 32px #95571617,0 3px 9px #9557160d; }
  #app-view :is(.card,.metric):focus-within { transform:none; }
}
@media(hover:none),(pointer:coarse) { #app-view :is(.card,.metric)::after { display:none; } }

/* Keep navigation geometry stable when switching between long and short pages. */
@media(min-width:761px) {
  html:has(#app-view:not(.hidden)) { scrollbar-gutter:stable; }
  @supports not (scrollbar-gutter:stable) { html:has(#app-view:not(.hidden)) { overflow-y:scroll; } }
}
.top-nav .nav-btn,.top-nav .nav-btn.active { font-weight:600; flex-shrink:0; }

/* Account identity and explicit sign-out action. */
.app-header .header-user { min-width:0; gap:12px; }
.header-identity { display:flex; align-items:center; gap:10px; min-width:0; padding:6px 12px 6px 6px; border:1px solid #ffffffb3; border-radius:14px; background:linear-gradient(135deg,#fffdf5d9,#fff4e3b3); box-shadow:0 3px 12px #8b4d1409; }
.header-identity .avatar { width:36px; height:36px; border-radius:11px; color:#fffaf0; background:linear-gradient(135deg,#df942b,#ac5514); box-shadow:inset 0 1px 0 #ffffff52,0 3px 7px #a8641321; font-size:16px; }
.app-header .header-identity .sidebar-user { display:flex; flex:0 1 auto; max-width:112px; }
.header-identity .sidebar-user strong { color:#49321e; font-size:14px; line-height:1.4; font-weight:700; }
.app-header .header-identity .sidebar-user span { margin-top:2px; color:#876342; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-header .header-logout { display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:none; min-height:40px; padding:9px 12px; border:1px solid #c58b484d; border-radius:11px; color:#744921; background:#fffaf0de; box-shadow:0 2px 6px #86541e0a; font-size:13px; font-weight:600; white-space:nowrap; }
.app-header .header-logout svg { flex:none; }
.app-header .header-logout:hover:not(:disabled) { transform:none; background:#fff3df; border-color:#bc792f99; box-shadow:0 4px 12px #86541e14; }
@media(min-width:761px) and (max-width:1050px) {
 .app-header { height:auto; grid-template-columns:1fr auto; padding-block:8px; row-gap:4px; }
 .app-header .top-nav { grid-column:1/-1; grid-row:2; height:42px; }
 .app-header .header-user { grid-column:2; grid-row:1; }
}
@media(max-width:760px) {
 .app-header .header-user { gap:8px; }
 .header-identity { gap:6px; padding:4px 8px 4px 4px; border-radius:10px; }
 .header-identity .avatar { width:28px; height:28px; border-radius:8px; font-size:14px; }
 .app-header .header-identity .sidebar-user { max-width:56px; }
 .header-identity .sidebar-user strong { font-size:12px; }
 .app-header .header-identity .sidebar-user span { display:none; }
 .app-header .header-logout { min-height:36px; padding:7px 8px; gap:5px; border-radius:9px; font-size:12px; }
}
@media(max-width:480px) {
 .app-header { padding-inline:12px; gap:8px; }
 .app-header .brand-lockup { gap:6px; }
 .app-header .brand-logo-crop { height:26px; }
 .app-header .brand-logo-ck { width:44px; }
 .app-header .brand-logo-cn { width:58px; }
 .app-header .brand-logo-crop img { height:58px; }
 .app-header .header-identity .sidebar-user { max-width:42px; }
}