/* ============================================================
   Yogaholic — app stylesheet  (v3: green / orange / soft)
   green #18785A · leaf #2E9E76 · orange #F2871E · soft sky #6FB1E0
   Legacy var names kept stable so all views re-theme automatically.
   ============================================================ */
:root{
  --navy:#0f4f3a;            /* darkest green (header/text accents) */
  --indigo:#155e46;
  --purple:#18785A;          /* primary green */
  --violet:#2E9E76;          /* bright green (focus/charts) */
  --orange:#F2871E; --orange-2:#ffa94d;
  --sky:#6FB1E0;             /* soft accent */
  --sand:#f3f7f4;            /* page bg */
  --sand-2:#e8f0eb;          /* hover/fill */
  --paper:#ffffff;
  --ink:#173a30; --ink-soft:#5f7a6f; --line:#dde8e2;
  --evergreen:#155e46; --evergreen-2:#18785A;
  --clay:#F2871E; --clay-soft:#fdecda; --gold:#F2871E;
  --danger:#d8412f; --danger-soft:#fbe3df; --ok:#1f9d6b;
  --grad:linear-gradient(120deg,#0f4f3a 0%,#176b4f 50%,#1f8a66 100%);
  --grad-soft:linear-gradient(120deg,#1f8a66,#2E9E76);
  --grad-orange:linear-gradient(120deg,#F2871E,#ffa94d);
  --shadow:0 1px 2px rgba(15,79,58,.05),0 10px 30px rgba(15,79,58,.08);
  --shadow-lg:0 20px 50px rgba(15,79,58,.18);
  --radius:16px;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:
    radial-gradient(1200px 600px at 100% -10%,rgba(46,158,118,.12),transparent 60%),
    radial-gradient(900px 500px at -10% 0%,rgba(242,135,30,.10),transparent 55%),
    var(--sand);
  color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;
}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:600;margin:0;letter-spacing:-.01em;}
a{color:var(--purple);text-decoration:none;}

/* top navigation */
.topnav{position:sticky;top:0;z-index:60;background:var(--grad);color:#eafaf3;box-shadow:0 6px 24px rgba(15,79,58,.25);}
.topnav-inner{max-width:1340px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:16px;height:64px;}
.brand-row{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.brand-row img{height:55px;border-radius:10px;bbackground:#fff;ppadding:3px;bbox-shadow:0 4px 12px rgba(0,0,0,.18);}
.brand-row .wm{font-family:'Fraunces',serif;font-size:21px;font-weight:600;color:#fff;line-height:1;}
.brand-row .wm em{color:var(--orange);font-style:normal;}
.brand-row .wm small{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:9px;letter-spacing:.22em;color:#a9d8c6;text-transform:uppercase;margin-top:2px;}
.navlinks{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap;}
.navlinks a,.navlinks .navtrigger{color:#cfeadd;font-weight:600;font-size:13.5px;padding:8px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;transition:.16s;white-space:nowrap;cursor:pointer;background:none;border:none;font-family:inherit;}
.navlinks a:hover,.navlinks .navtrigger:hover{background:rgba(255,255,255,.12);color:#fff;}
.navlinks a.active,.navlinks .has-sub.active .navtrigger{background:#fff;color:var(--navy);box-shadow:0 4px 14px rgba(0,0,0,.2);}
.navlinks a.active .ico{color:var(--orange);}
.navlinks .ico{opacity:.9;}
/* nav dropdown */
.has-sub{position:relative;}
.submenu{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;min-width:210px;display:none;z-index:70;}
.has-sub.open .submenu{display:block;}
.submenu a{display:flex;color:var(--ink);font-size:13.5px;font-weight:600;padding:9px 12px;border-radius:10px;white-space:nowrap;}
.submenu a:hover{background:var(--sand-2);color:var(--evergreen-2);}
.submenu a.active{background:var(--sand-2);color:var(--evergreen-2);}
.submenu .sep{height:1px;background:var(--line);margin:6px 4px;}

/* user chip + dropdown */
.userchip{position:relative;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.userchip .utrigger{display:flex;align-items:center;gap:10px;cursor:pointer;background:none;border:none;font-family:inherit;}
.userchip .who{text-align:right;line-height:1.1;}
.userchip .who b{color:#fff;font-size:13px;font-weight:700;}
.userchip .who span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-2);}
.userchip .av{width:38px;height:38px;border-radius:50%;background:var(--grad-orange);color:#fff;display:grid;place-items:center;font-weight:800;font-family:'Fraunces',serif;}
.usermenu{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);min-width:230px;padding:8px;display:none;z-index:70;}
.userchip.open .usermenu{display:block;}
.usermenu .uhead{padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;}
.usermenu .uhead b{display:block;color:var(--ink);} .usermenu .uhead span{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em;}
.usermenu a{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;font-size:13.5px;padding:9px 12px;border-radius:10px;}
.usermenu a:hover{background:var(--sand-2);}
.usermenu a.danger{color:var(--danger);}
.hamburger{display:none;background:rgba(255,255,255,.14);border:none;color:#fff;font-size:20px;padding:8px 12px;border-radius:10px;cursor:pointer;}

/* page frame */
.page{max-width:1340px;margin:0 auto;padding:26px 22px 60px;}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap;}
.page-head h1{font-size:26px;} .page-head .sub{color:var(--ink-soft);font-size:13px;}

/* cards */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.panel .panel-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.panel .panel-head h3{font-size:16px;}
.panel .panel-body{padding:20px;}

/* stat cards */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;margin-bottom:22px;}
.stat{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);}
.stat::after{content:'';position:absolute;right:-28px;top:-28px;width:80px;height:80px;border-radius:50%;background:var(--grad-soft);opacity:.10;}
.stat .n{font-family:'Fraunces',serif;font-size:33px;color:var(--navy);line-height:1;}
.stat .l{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px;}
/* smaller variant for durations rendered as "6 h 45 m" rather than a bare number */
.stat .n.sm{font-size:25px;}

/* hours + minutes duration input pair (teacher agreed load) */
.hm-input{display:flex;align-items:center;gap:6px;}
.hm-input input{width:74px;text-align:center;}
.hm-input em{font-style:normal;font-size:12px;font-weight:700;color:var(--ink-soft);}
.stat.accent{background:var(--grad);border:none;} .stat.accent .n{color:#fff;} .stat.accent .l{color:#bfe6d6;}
.stat.orange{background:var(--grad-orange);border:none;} .stat.orange .n{color:#fff;} .stat.orange .l{color:#fff3e8;}

/* dashboard */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;}
.dash-grid .full{grid-column:1 / -1;}
@media (max-width:860px){.dash-grid{grid-template-columns:1fr;}}
.chart-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;}
.chart-card h3{font-size:15px;margin-bottom:4px;} .chart-card .cap{font-size:12px;color:var(--ink-soft);margin-bottom:12px;}
.chart-wrap{position:relative;height:200px;}
.hero{background:var(--grad);color:#fff;border-radius:20px; padding: 15px; margin-bottom:22px;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);}
.hero::before{content:'';position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:var(--grad-orange);opacity:.25;filter:blur(8px);}
.hero h1{color:#fff;font-size:28px;} .hero p{color:#cdeadd;margin:6px 0 0;max-width:60ch;}
.hero .hero-badges{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.hero .hbadge{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);padding:8px 14px;border-radius:12px;font-size:13px;}
.hero .hbadge b{font-family:'Fraunces',serif;font-size:18px;display:block;}

/* tables */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.data{width:100%;border-collapse:collapse;min-width:520px;}
table.data th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding:11px 12px;border-bottom:2px solid var(--line);cursor:default;}
table.data td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle;}
table.data tr:last-child td{border-bottom:none;}
table.data tbody tr:hover td{background:var(--sand-2);}
.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.12);vertical-align:-2px;margin-right:6px;}
.tag{display:inline-block;font-size:11px;padding:3px 10px;border-radius:999px;background:var(--sand-2);color:var(--ink-soft);margin:1px 2px;font-weight:600;}
.tag.green{background:#dff1e8;color:var(--ok);} .tag.clay{background:var(--clay-soft);color:#d96a13;}
.tag.role{background:#e6eefb;color:#3768b5;}
.pill-sub{color:var(--clay);font-size:11px;font-weight:700;}
.muted{color:var(--ink-soft);} .small{font-size:12px;}

/* datatable controls (search + pagination + export) */
.dt-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line);}
.dt-search{flex:1;min-width:180px;max-width:340px;position:relative;}
.dt-search input{padding-left:34px;}
.dt-search::before{content:'⌕';position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-soft);font-size:16px;}
.dt-export{background:var(--grad-soft);color:#fff;border:none;cursor:pointer;font-weight:700;font-size:12.5px;padding:9px 14px;border-radius:10px;display:inline-flex;gap:7px;align-items:center;box-shadow:0 5px 14px rgba(24,120,90,.3);}
.dt-export:hover{filter:brightness(1.06);}
.dt-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);}
.dt-pages{display:flex;gap:4px;align-items:center;}
.dt-pages button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;min-width:32px;height:32px;cursor:pointer;font-weight:600;font-family:inherit;}
.dt-pages button:hover{background:var(--sand-2);}
.dt-pages button.active{background:var(--evergreen-2);color:#fff;border-color:transparent;}
.dt-pages button:disabled{opacity:.4;cursor:default;}
.dt-size{padding:6px 8px;border-radius:8px;}

/* forms / buttons */
.btn{display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;padding:10px 17px;border-radius:11px;transition:.16s;text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--grad-soft);color:#fff;box-shadow:0 6px 18px rgba(24,120,90,.32);}
.btn-primary:hover{filter:brightness(1.07);}
.btn-clay{background:var(--grad-orange);color:#fff;box-shadow:0 6px 18px rgba(242,135,30,.32);}
.btn-clay:hover{filter:brightness(1.05);}
.btn-ghost{background:var(--sand-2);color:var(--ink);} .btn-ghost:hover{background:#dceae2;}
.btn-danger{background:var(--danger-soft);color:var(--danger);}
.btn-sm{padding:6px 11px;font-size:12px;border-radius:9px;}
.btn-block{width:100%;justify-content:center;padding:12px;font-size:14px;}
label.field{display:block;margin-bottom:13px;}
label.field>span{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px;font-weight:600;}
input,select,textarea{width:100%;font-family:inherit;font-size:14px;padding:10px 12px;border:1.5px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(46,158,118,.18);}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
@media (max-width:560px){.row-2,.row-3{grid-template-columns:1fr;}}
.checks{display:flex;flex-wrap:wrap;gap:7px;}
.checks label{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 11px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);cursor:pointer;}
.checks input{width:auto;}
.checks label:has(input:checked){border-color:var(--violet);background:#e7f5ee;color:var(--evergreen-2);font-weight:600;}
.flash{padding:12px 16px;border-radius:12px;margin-bottom:18px;font-weight:600;}
.flash.ok{background:#dff1e8;color:var(--ok);border:1px solid #bfe6d3;}
.flash.err{background:var(--danger-soft);color:var(--danger);border:1px solid #f3c4c0;}
.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start;}
@media (max-width:980px){.two-col{grid-template-columns:1fr;}}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:18px;}
.toolbar .field,.toolbar label.field{margin-bottom:0;}

/* login */
.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;}
.login-card{width:420px;max-width:100%;background:var(--paper);border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden;}
.login-card .top{background:var(--grad);padding:30px;text-align:center;color:#fff;position:relative;overflow:hidden;}
.login-card .top::after{content:'';position:absolute;left:-40px;bottom:-50px;width:160px;height:160px;border-radius:50%;background:var(--grad-orange);opacity:.3;}
.login-card .top img{width:76px;height:76px;border-radius:18px;background:#fff;padding:6px;box-shadow:0 8px 22px rgba(0,0,0,.25);position:relative;}
.login-card .top .wm{font-family:'Fraunces',serif;font-size:26px;margin-top:12px;}
.login-card .top .wm em{color:var(--orange);font-style:normal;}
.login-card .top .ltag{color:#bfe6d6;letter-spacing:.2em;font-size:10px;text-transform:uppercase;margin-top:2px;}
.login-card .body{padding:26px 30px 30px;}
.demo-creds{margin-top:16px;font-size:12px;color:var(--ink-soft);background:var(--sand);border:1px dashed var(--line);border-radius:12px;padding:12px;}
.demo-creds b{color:var(--ink);} .demo-creds code{color:var(--evergreen-2);font-weight:700;}

/* mobile nav */
@media (max-width:980px){
  .hamburger{display:inline-flex;}
  .navlinks{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--navy);padding:10px 14px 16px;gap:4px;display:none;box-shadow:0 16px 30px rgba(0,0,0,.3);}
  .navlinks.open{display:flex;}
  .navlinks a,.navlinks .navtrigger{padding:12px 14px;border-radius:12px;}
  .submenu{position:static;display:block;box-shadow:none;background:rgba(255,255,255,.06);padding:4px;margin:2px 0 6px 14px;}
  .submenu a{color:#cfeadd;} .submenu a:hover{background:rgba(255,255,255,.1);color:#fff;}
  .userchip .who{display:none;}
}

/* combobox (type-to-search) + tag input (Phase 2) */
.combo{position:relative;}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);max-height:240px;overflow:auto;z-index:300;display:none;padding:4px;}
.combo-list.show{display:block;}
.combo-opt{padding:8px 11px;border-radius:8px;cursor:pointer;font-size:13.5px;}
.combo-opt:hover,.combo-opt.active{background:var(--sand-2);color:var(--evergreen-2);}
.combo-empty{padding:9px 11px;color:var(--ink-soft);font-size:13px;}
.taginput{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1.5px solid var(--line);border-radius:11px;padding:7px 8px;background:var(--paper);position:relative;}
.taginput:focus-within{border-color:var(--violet);box-shadow:0 0 0 3px rgba(46,158,118,.18);}
.taginput .tagchip{display:inline-flex;align-items:center;gap:6px;background:var(--clay-soft);color:#d96a13;font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;}
.taginput .tagchip b{cursor:pointer;font-weight:800;line-height:1;}
.taginput input{border:none;outline:none;box-shadow:none;flex:1;min-width:140px;padding:4px;background:transparent;}
.taginput input:focus{box-shadow:none;border:none;}

/* attendance modal (Phase 3) */
.att-bg{position:fixed;inset:0;background:rgba(15,79,58,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:16px;}
.att-bg.show{display:flex;}
.att-modal{background:#fff;width:540px;max-width:96vw;border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;max-height:88vh;}
.att-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.att-head h3{font-size:17px;}
.att-body{padding:6px 10px;overflow:auto;}
.att-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 8px;border-bottom:1px solid var(--line);}
.att-row:last-child{border-bottom:none;}
.att-name{font-weight:600;}
.att-seg{display:flex;gap:4px;flex-shrink:0;}
.att-seg .seg{width:36px;height:32px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-weight:800;color:var(--ink-soft);font-family:inherit;}
.att-seg .seg:hover{background:var(--sand-2);}
.att-seg .seg.on.present{background:var(--ok);color:#fff;border-color:transparent;}
.att-seg .seg.on.absent{background:var(--danger);color:#fff;border-color:transparent;}
.att-seg .seg.on.late{background:var(--orange);color:#fff;border-color:transparent;}
.att-seg .seg.on.excused{background:var(--sky);color:#fff;border-color:transparent;}
.att-foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}

/* hero glass logo panel — frosted card; artwork keeps its true brand colours
   (blend modes were rejected: multiply murders the orange, screen leaves a
   white slab, so the panel does the glass work instead) */
/* ============================================================
   Hero Glass Logo Panel — Re-designed for true Glassmorphism
   ============================================================ */
.hero-glass {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 15px;
  /* Balanced frosted glass background */
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 12px 40px rgba(15, 79, 58, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  overflow: hidden;
  z-index: 2;
}

/* Diagonal sheen sweep across the glass panel */
.hero-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 20px;
  background: white;
}

.hero-glass img {
  display: block;
  height: 200px;
  width: auto;
  border-radius: 12px;
  position: relative;
  z-index: 1;
  /* Blends away the solid white slab background into the glass panel */
  mix-blend-mode: multiply; 
  opacity: 0.92;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
}

/* Keep hero text clear of the panel */
.hero.has-glass {
  padding-right: 230px;
}

@media (max-width: 820px) {
  .hero-glass {
    position: static;
    transform: none;
    margin: 0 0 14px;
    display: inline-block;
  }
  .hero-glass img {
    height: 120px;
  }
  .hero.has-glass {
    padding-right: 28px;
  }
}


/* ---- DD/MM/YYYY date field (YSDate) --------------------------------
   The native <input type="date"> is kept for the calendar popup and for
   its ISO value, but is collapsed to zero width so the browser's own
   locale formatting is never shown. It must stay technically visible,
   otherwise showPicker() throws. */
.ysdate{position:relative;display:flex;align-items:center;width:100%;}
.ysdate .ysdate-text{flex:1;min-width:0;padding-right:34px;}
.ysdate .ysdate-text.bad{border-color:var(--danger);background:var(--danger-soft);}
.ysdate .ysdate-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;font-size:15px;line-height:1;padding:4px;border-radius:8px;opacity:.65;}
.ysdate .ysdate-btn:hover{opacity:1;background:var(--sand-2);}
.ysdate input.ysdate-native{position:absolute;right:8px;bottom:0;width:1px;height:1px;
  padding:0;margin:0;border:0;opacity:0;pointer-events:none;}


/* ---- YSDialog: themed replacement for window.alert / confirm -------- */
.ysdlg-bg{position:fixed;inset:0;background:rgba(15,79,58,.55);display:none;
  align-items:center;justify-content:center;z-index:3000;padding:20px;}
.ysdlg-bg.show{display:flex;}
.ysdlg{background:var(--paper);width:520px;max-width:100%;border-radius:18px;
  box-shadow:var(--shadow-lg);overflow:hidden;animation:ysdlgIn .16s ease-out;}
@keyframes ysdlgIn{from{opacity:0;transform:translateY(8px) scale(.985);}to{opacity:1;transform:none;}}

.ysdlg-head{display:flex;align-items:center;gap:11px;padding:15px 20px;border-bottom:1px solid var(--line);}
.ysdlg-head h3{font-size:16.5px;margin:0;}
.ysdlg-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;font-weight:800;flex-shrink:0;}

.ysdlg.tone-danger .ysdlg-head{background:var(--danger-soft);}
.ysdlg.tone-danger .ysdlg-head h3{color:var(--danger);}
.ysdlg.tone-danger .ysdlg-icon{background:var(--danger);color:#fff;}
.ysdlg.tone-warn   .ysdlg-head{background:var(--clay-soft);}
.ysdlg.tone-warn   .ysdlg-head h3{color:#a25a10;}
.ysdlg.tone-warn   .ysdlg-icon{background:var(--clay);color:#fff;}
.ysdlg.tone-ok     .ysdlg-head{background:#dff2e8;}
.ysdlg.tone-ok     .ysdlg-head h3{color:var(--evergreen);}
.ysdlg.tone-ok     .ysdlg-icon{background:var(--ok);color:#fff;}
.ysdlg.tone-info   .ysdlg-head{background:var(--sand-2);}
.ysdlg.tone-info   .ysdlg-head h3{color:var(--evergreen);}
.ysdlg.tone-info   .ysdlg-icon{background:var(--purple);color:#fff;}

.ysdlg-body{padding:18px 20px;max-height:60vh;overflow:auto;}
.ysdlg-msg{margin:0;font-size:14px;line-height:1.55;color:var(--ink);}
.ysdlg-items{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.ysdlg-item{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  padding:10px 13px;font-size:13px;border-bottom:1px solid var(--line);}
.ysdlg-item:last-child{border-bottom:none;}
.ysdlg-item:nth-child(odd){background:var(--sand);}
.ysdlg-item-meta{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);padding:3px 8px;border-radius:999px;
  white-space:nowrap;font-variant-numeric:tabular-nums;}
.ysdlg-item-label{font-weight:600;color:var(--ink);min-width:0;}
.ysdlg-item-sub{display:block;font-weight:500;font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
.ysdlg-item-value{font-weight:800;font-size:12.5px;color:var(--danger);white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.ysdlg.tone-ok .ysdlg-item-value,.ysdlg.tone-info .ysdlg-item-value{color:var(--evergreen);}
.ysdlg.tone-warn .ysdlg-item-value{color:#a25a10;}

.ysdlg-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;}

/* transient confirmation, bottom-right */
.ys-toast{position:fixed;right:20px;bottom:20px;z-index:3100;max-width:min(420px,90vw);
  padding:12px 17px;border-radius:13px;font-size:13.5px;font-weight:600;
  box-shadow:var(--shadow-lg);opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .18s,transform .18s;}
.ys-toast.show{opacity:1;transform:none;}
.ys-toast.tone-ok{background:var(--evergreen);color:#eafaf3;}
.ys-toast.tone-warn{background:var(--clay);color:#fff;}
.ys-toast.tone-danger{background:var(--danger);color:#fff;}

@media (max-width:520px){
  .ysdlg-item{grid-template-columns:1fr;gap:4px;}
  .ysdlg-item-meta{justify-self:start;}
}