/* ==========================================================================
   DairySync v2 look - "Pail & Pasture"
   One idea: the screen follows the farm day. The header sky changes with the clock
   (dawn milking, midday, evening milking, night). Everything else stays quiet:
   white surfaces, hairline borders, one type family for numbers and headings,
   big round icon buttons that can be read at arm's length in the sun.
   Loaded after style.css; the admin's own colors (Settings > Colors & Look) still win.
   ========================================================================== */
:root {
  --ds-bg: #F2F5F8;
  --ds-card-bg: #FFFFFF;
  --ds-text: #0D1B2A;
  --ds-muted: #54677A;
  --ds-border: #E1E8EF;
  --ds-ink: #0D1B2A;
  --ds-r-lg: 28px;   /* hero / next step */
  --ds-r-md: 20px;   /* cards, tiles */
  --ds-r-sm: 14px;   /* buttons, inputs */
  --ds-font-display: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
  --ds-glass: #FFFFFF;
}
html[data-theme="dark"] {
  --ds-bg: #0A121C; --ds-card-bg: #121D2A; --ds-text: #EAF1F8; --ds-muted: #96A8BA; --ds-border: #223244; --ds-ink: #060C14; --ds-glass: #121D2A;
}
body { background: var(--ds-bg); color: var(--ds-text); }
h1, h2, h3, h4, h5, .ds-stat-value, .ds-next-text, .ds-area-name, .ds-nav-link, .btn, .ds-quick span, .ds-sky-hello { font-family: var(--ds-font-display); }
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="ur"] h4, html[lang="ur"] .ds-stat-value, html[lang="ur"] .ds-next-text,
html[lang="ur"] .ds-area-name, html[lang="ur"] .ds-nav-link, html[lang="ur"] .btn, html[lang="ur"] .ds-quick span, html[lang="ur"] .ds-sky-hello { font-family: 'Noto Naskh Arabic', 'Jameel Noori Nastaleeq', serif; }

/* ---- one card style, no glass, no heavy shadow ---- */
html body .ds-card { background: var(--ds-card-bg); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); box-shadow: none; backdrop-filter: none; }

/* ---- sky header: the memorable bit ---- */
.ds-sky { --s1:#FFD58A; --s2:#FF9E6B; --s3:#C0507A; position: relative; border-radius: var(--ds-r-lg); padding: 22px 26px; margin-bottom: 18px; color: #fff; overflow: hidden;
  background: linear-gradient(120deg, var(--s1), var(--s2) 55%, var(--s3)); isolation: isolate; }
.ds-sky[data-time="day"]   { --s1:#7CC6F4; --s2:#3E8FE0; --s3:#2B63B8; }
.ds-sky[data-time="dusk"]  { --s1:#FFB86B; --s2:#E4577A; --s3:#5B3FA0; }
.ds-sky[data-time="night"] { --s1:#2A3F73; --s2:#16264A; --s3:#0B1530; }
.ds-sky::before { content:""; position:absolute; right:7%; top:-46px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.88); box-shadow:0 0 70px 24px rgba(255,255,255,.35); z-index:-1; }
.ds-sky[data-time="night"]::before { background:#E8EEFF; box-shadow:0 0 50px 14px rgba(160,190,255,.35); width:96px; height:96px; top:14px; }
.ds-sky::after { content:""; position:absolute; left:0; right:0; bottom:0; height:46px; z-index:-1;
  background:
    radial-gradient(60px 28px at 12% 100%, rgba(8,20,36,.26) 98%, transparent) ,
    radial-gradient(90px 36px at 36% 100%, rgba(8,20,36,.2) 98%, transparent),
    radial-gradient(70px 30px at 70% 100%, rgba(8,20,36,.26) 98%, transparent),
    radial-gradient(110px 40px at 92% 100%, rgba(8,20,36,.2) 98%, transparent); }
.ds-sky-hello { font-size: clamp(1.5rem, 4.4vw, 2.3rem); font-weight: 700; line-height: 1.15; margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,.18); }
.ds-sky-sub { margin-top: 6px; font-weight: 500; opacity: .95; }
.ds-sky-area { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: rgba(255,255,255,.2); backdrop-filter: blur(6px); padding: 7px 14px 7px 9px; border-radius: 999px; font-weight: 700; font-family: var(--ds-font-display); }
.ds-sky-area b { font-size: 1.25rem; line-height: 1; }

/* ---- area switcher: a segmented rail ---- */
html body .ds-areas { background: transparent; border: 0; padding: 14px 20px 6px; position: static; mask-image: none; gap: 8px; }
.ds-area { background: var(--ds-card-bg); border: 1px solid var(--ds-border); padding: 8px 16px 8px 8px; font-size: 1rem; }
.ds-area-ico { background: color-mix(in srgb, var(--a) 14%, transparent); }
.ds-area.on { background: var(--ds-ink); color: #fff; border-color: var(--ds-ink); box-shadow: none; }
.ds-area.on .ds-area-ico { background: var(--a); }
html[data-theme="dark"] .ds-area.on { background: #fff; color: #0D1B2A; border-color:#fff; }

/* ---- the one bold element: the next step ---- */
html body .ds-next { background: var(--ds-ink); color: #fff; border-radius: var(--ds-r-lg); box-shadow: none; padding: 26px 28px 20px; }
html body .ds-next::after { background: radial-gradient(circle, var(--ds-primary) 0%, transparent 70%); opacity: .55; width: 340px; height: 340px; right: -90px; top: -120px; }
.ds-next-tag { background: var(--ds-primary); color: #fff; letter-spacing: .4px; text-transform: none; font-size: .82rem; padding: 5px 14px; }
.ds-next-text { font-weight: 700; font-size: clamp(1.45rem, 4vw, 2.1rem); }
html body .ds-next-btn { background: var(--ds-accent, #fff); color: #06121F; font-size: 1.25rem; font-weight: 700; border-radius: 18px; padding: 16px 34px; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-accent, #fff) 55%, transparent); animation: dsPulse 2.6s ease-out 1s 3; }
@keyframes dsPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-accent, #fff) 60%, transparent); } 70% { box-shadow: 0 0 0 22px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { html body .ds-next-btn { animation: none; } }
.ds-next-all .btn-ds-outline { color: #06121F; }

/* ---- numbers: calm white cards, number first ---- */
html body .ds-stat { --t: var(--ds-primary); display: grid; grid-template-columns: 1fr auto; grid-template-areas: "v i" "l l"; align-items: center; gap: 4px 10px; background: var(--ds-card-bg); color: var(--ds-text);
  border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); padding: 16px 16px 14px; box-shadow: none; position: relative; }
html body .ds-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(13,27,42,.08); }
html body .ds-stat .bi { position: static; grid-area: i; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; opacity: 1; color: var(--t); background: color-mix(in srgb, var(--t) 14%, transparent); }
html body .ds-stat .ds-stat-value { grid-area: v; font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--ds-text); word-break: break-word; }
html body .ds-stat .ds-stat-label { grid-area: l; font-size: .9rem; color: var(--ds-muted); opacity: 1; margin: 0; font-weight: 500; }
.ds-stat.bg-1 { --t: var(--ds-primary); background: var(--ds-card-bg); }
.ds-stat.bg-2 { --t: #2E7BD6; background: var(--ds-card-bg); } .ds-stat.bg-3 { --t: #C58A12; background: var(--ds-card-bg); }
.ds-stat.bg-5 { --t: #7048C0; background: var(--ds-card-bg); } .ds-stat.bg-6 { --t: #5F7184; background: var(--ds-card-bg); }
html body .ds-stat.bg-4 { --t: #D43D2B; background: color-mix(in srgb, #D43D2B 7%, var(--ds-card-bg)); border-color: color-mix(in srgb, #D43D2B 35%, transparent); }
html body .ds-stat.bg-4 .ds-stat-value { color: #D43D2B; }

/* ---- quick buttons: round icon, then a word ---- */
.ds-quick-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
html body .ds-quick { --t: var(--ds-primary); background: var(--ds-card-bg); color: var(--ds-text); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); box-shadow: none; min-height: 124px; gap: 10px; font-size: 1rem; font-weight: 600; }
html body .ds-quick:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(13,27,42,.1); color: var(--ds-text); border-color: var(--t); }
html body .ds-quick .bi { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #fff; background: var(--t); }
.ds-quick.c-green { --t: var(--ds-primary); } .ds-quick.c-blue { --t: #2E7BD6; } .ds-quick.c-orange { --t: #E0832A; } .ds-quick.c-purple { --t: #7048C0; }
.ds-quick.c-teal { --t: #1F9C92; } .ds-quick.c-pink { --t: #D6417F; } .ds-quick.c-red { --t: #D43D2B; } .ds-quick.c-slate { --t: #5F7184; } .ds-quick.c-gold { --t: #C58A12; } .ds-quick.c-indigo { --t: #4A55B8; }
html body .ds-quick.c-green, html body .ds-quick.c-blue, html body .ds-quick.c-orange, html body .ds-quick.c-purple, html body .ds-quick.c-teal, html body .ds-quick.c-pink,
html body .ds-quick.c-red, html body .ds-quick.c-slate, html body .ds-quick.c-gold, html body .ds-quick.c-indigo { background: var(--ds-card-bg); }
.ds-quick small { color: var(--ds-muted); font-weight: 500; }

/* ---- buttons / inputs ---- */
html body .btn-ds-primary { background: var(--ds-primary); border: 0; color: #fff; border-radius: var(--ds-r-sm); font-weight: 600; box-shadow: none; }
html body .btn-ds-primary:hover { background: var(--ds-primary-dark); color: #fff; }
html body .btn-ds-outline { background: var(--ds-card-bg); border: 1px solid var(--ds-border); color: var(--ds-text); border-radius: var(--ds-r-sm); font-weight: 600; }
html body .btn-ds-outline:hover { border-color: var(--ds-primary); color: var(--ds-primary); }
.form-control, .form-select { border-radius: var(--ds-r-sm); border-color: var(--ds-border); background-color: var(--ds-card-bg); color: var(--ds-text); }
.form-control:focus, .form-select:focus { border-color: var(--ds-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-primary) 18%, transparent); }

/* ---- list rows ---- */
.ds-list-row { border-radius: 14px; }

/* ---- sidebar: a floating dark panel ---- */
@media (min-width: 992px) {
  .ds-app { padding: 12px; gap: 12px; }
  html body .ds-sidebar { width: 252px; height: calc(100vh - 24px); top: 12px; border-radius: 28px; background: linear-gradient(170deg, color-mix(in srgb, var(--ds-primary) 26%, #0B1622), #0B1622 62%) !important; border: 1px solid rgba(255,255,255,.06); }
  .ds-main { min-width: 0; }
}
html body .ds-brand { padding: 4px 8px 6px; }
html body .ds-ws-card { background: color-mix(in srgb, var(--ds-primary) 30%, transparent); border: 1px solid color-mix(in srgb, var(--ds-primary) 50%, transparent); border-radius: 20px; padding: 14px; margin: 12px 0 18px; }
html body .ds-ws-emoji { width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
html body .ds-ws-name { font-family: var(--ds-font-display); font-weight: 700; font-size: 1.05rem; }
html body .ds-nav-link { border-radius: 16px !important; color: #C6D3E0 !important; font-weight: 500; }
html body .ds-nav-link:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
html body .ds-nav-link.active { background: #fff !important; color: #0D1B2A !important; box-shadow: none !important; font-weight: 700; }
html body .ds-nav-link.active .bi { color: var(--ds-primary); }

/* ---- topbar ---- */
html body .ds-topbar { background: transparent; border: 0; backdrop-filter: none; padding: 10px 20px 0; position: static; }
@media (max-width: 991.98px) { html body .ds-topbar { padding: 10px 12px 0; } html body .ds-areas { padding: 12px 12px 4px; } }

/* ---- phone: floating island menu ---- */
@media (max-width: 991.98px) {
  html body .ds-bottom-nav { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 26px; background: color-mix(in srgb, var(--ds-card-bg) 88%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--ds-border); box-shadow: 0 14px 40px rgba(13,27,42,.2); padding-bottom: 0; overflow: hidden; }
  html body .ds-bottom-nav a, html body .ds-bottom-nav button { min-height: 62px; font-family: var(--ds-font-display); }
  html body .ds-bottom-nav .active { color: var(--ds-primary); }
  .ds-sky { padding: 18px 18px; border-radius: 24px; }
  .ds-sky::before { width: 110px; height: 110px; }
}
@media (max-width: 575.98px) { .ds-quick-grid { grid-template-columns: 1fr 1fr; } html body .ds-quick { min-height: 112px; } html body .ds-stat .ds-stat-value { font-size: 1.4rem; } }

/* ---- fold-away details ---- */
html body .ds-more > summary { border-radius: var(--ds-r-md); border: 1px solid var(--ds-border); background: var(--ds-card-bg); }

.ds-section-title { font-family: var(--ds-font-display); font-weight: 700; font-size: 1.15rem; margin: 6px 0 10px; text-transform: none; letter-spacing: 0; color: var(--ds-text); }

/* ---- fixes from visual review ---- */
.ds-sky { padding-bottom: 56px; }
.ds-sky-sub { text-shadow: 0 1px 10px rgba(60,20,0,.35); }
.ds-sky[data-time="day"] .ds-sky-sub, .ds-sky[data-time="night"] .ds-sky-sub { text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.ds-sky-area { position: relative; z-index: 1; background: rgba(13,27,42,.28); }
@media (max-width: 991.98px) {
  html body .ds-sidebar:not(.open) { box-shadow: none; }
  .ds-sky::before { right: -26px; top: -34px; width: 96px; height: 96px; }
  .ds-sky-hello { max-width: 72%; }
}
/* big "today" number card: white, not another colored block */
html body .ds-hero { background: var(--ds-card-bg); color: var(--ds-text); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); box-shadow: none; }
html body .ds-hero .ds-hero-label, html body .ds-hero .ds-hero-sub { color: var(--ds-muted); opacity: 1; }
html body .ds-hero .ds-hero-value { font-family: var(--ds-font-display); color: var(--ds-text); font-weight: 700; }
html body .ds-hero .ds-hero-icon { color: var(--ds-primary); opacity: .22; }

/* Master (Super Admin) login: same layout, darker door so nobody mixes it up with the farm login */
.ds-login-master { background:#0D1B2A; }
.ds-login-master .ds-login-side { background:linear-gradient(160deg,#0D1B2A,#1B2F47); }
.ds-login-master .ds-login-card { border-top:4px solid #4A55B8; }

/* ===== Add Milk: one card per cow, three milking times side by side ===== */
.ds-daybar input[type=date] { width:auto; border-radius:14px; }
.ds-milk-head, .ds-milk-row { display:grid; grid-template-columns:minmax(120px,1fr) repeat(3,minmax(150px,1.3fr)) 84px; gap:12px; align-items:start; }
.ds-milk-head { padding:0 18px 8px; font-weight:600; color:var(--ds-muted,#6b7a8a); font-size:.85rem; }
.ds-milk-row { background:#fff; border-radius:20px; padding:14px 18px; margin-bottom:10px; box-shadow:0 1px 2px rgba(13,27,42,.05); }
.ds-milk-row.ds-wd-hold { border:2px solid #E5484D; background:#FFF5F5; }
.ds-milk-lab { display:none; font-size:.78rem; color:#6b7a8a; margin-bottom:4px; font-weight:600; }
.ds-milk-inp { display:flex; gap:6px; }
.ds-qty { font-size:1.25rem; font-weight:700; text-align:center; border-radius:14px; min-height:48px; min-width:0; }
.ds-zero { flex:0 0 44px; border:2px dashed #C5CFD9; background:#fff; color:#6b7a8a; font-weight:700; border-radius:14px; }
.ds-zero:hover, .ds-milk-cell.is-zero .ds-zero { border-style:solid; border-color:#D9731A; color:#D9731A; background:#FFF4E8; }
.ds-milk-why { display:none; margin-top:6px; }
.ds-milk-cell.is-zero .ds-milk-why { display:block; }
.ds-milk-cell.is-zero .ds-qty { border-color:#D9731A; background:#FFF9F2; }
.ds-milk-total { font-weight:800; font-size:1.3rem; text-align:center; align-self:center; font-family:var(--ds-font-display,inherit); }
.ds-milk-total small { font-weight:600; color:#6b7a8a; }
.ds-milk-q { grid-column:1 / -1; font-size:.85rem; color:#6b7a8a; }
.ds-milk-q summary { cursor:pointer; }
.ds-milk-bar { position:sticky; bottom:12px; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:12px; background:#0D1B2A; color:#fff; border-radius:24px; padding:12px 16px 12px 22px; margin-top:14px; box-shadow:0 10px 30px rgba(13,27,42,.25); }
.ds-milk-bar .text-muted { color:#9db0c3 !important; }
.ds-milk-day { font-size:1.6rem; font-weight:800; line-height:1.1; font-family:var(--ds-font-display,inherit); }
.ds-milk-day small { font-size:.85rem; font-weight:600; opacity:.7; }
@media (max-width: 767.98px) {
  .ds-milk-row { grid-template-columns:repeat(3,1fr); gap:8px; padding:14px; }
  .ds-milk-cow { grid-column:1 / 3; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .ds-milk-total { grid-column:3; grid-row:1; text-align:right; align-self:start; font-size:1.1rem; }
  .ds-milk-lab { display:block; }
  .ds-milk-cell.is-zero { grid-column:1 / -1; }
  .ds-qty { font-size:1.1rem; min-height:46px; padding:4px; }
  .ds-zero { flex-basis:38px; }
  .ds-milk-bar { bottom:84px; }
}
@media (max-width: 767.98px) { .ds-milk-head { display:none !important; } }

/* ===== Simple guide ===== */
.ds-guide-tabs { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin-bottom:8px; scrollbar-width:none; }
.ds-guide-tabs::-webkit-scrollbar { display:none; }
.ds-guide-tabs a { flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; background:#fff; color:#0D1B2A; text-decoration:none; font-weight:600; box-shadow:0 1px 2px rgba(13,27,42,.06); }
.ds-guide-tabs a.on { background:#0D1B2A; color:#fff; }
.ds-guide-head { display:flex; gap:16px; align-items:center; background:#fff; border-radius:24px; padding:18px 20px; margin-bottom:14px; font-size:1.05rem; }
.ds-guide-head .em { font-size:2.6rem; line-height:1; }
.ds-guide-steps { list-style:none; margin:0 0 14px; padding:0; display:grid; gap:10px; }
.ds-guide-steps li { display:flex; align-items:center; gap:14px; background:#fff; border-radius:20px; padding:16px 18px; flex-wrap:wrap; }
.ds-guide-steps .no { flex:0 0 42px; height:42px; border-radius:50%; background:#0D1B2A; color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.1rem; }
.ds-guide-steps .tx { flex:1 1 240px; font-size:1.12rem; line-height:1.55; }
.ds-guide-tips { display:grid; gap:8px; margin-bottom:14px; }
.ds-guide-tips > div { display:flex; gap:10px; background:#FFF8E6; border-radius:16px; padding:12px 16px; font-size:1.02rem; }
.ds-guide-tips i { color:#D9A21A; }
.ds-guide-list { display:grid; gap:10px; }
.ds-guide-list > div { background:#fff; border-radius:18px; padding:14px 18px; display:grid; gap:4px; font-size:1.05rem; }
.ds-guide-list b { font-size:1.12rem; }
@media print { .ds-noprint, .ds-sidebar, .ds-topbar, .ds-bottom-nav, #dsSidebar { display:none !important; } .ds-guide-steps li, .ds-guide-head, .ds-guide-list > div { box-shadow:none; border:1px solid #ccc; break-inside:avoid; } .ds-guide-steps .no { background:#000 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } }

/* ===== Add animal and worker pickers ===== */
.ds-choice { display:flex; gap:8px; }
.ds-choice-wrap { flex-wrap:wrap; }
.ds-choice label { position:relative; flex:1 1 130px; margin:0; cursor:pointer; }
.ds-choice input, .ds-rolepick input { position:absolute; opacity:0; inset:0; }
.ds-choice span { display:block; text-align:center; padding:14px 12px; border-radius:16px; border:2px solid #DCE3EA; background:#fff; font-weight:600; font-size:1.05rem; }
.ds-choice input:checked + span { border-color:#0D1B2A; background:#0D1B2A; color:#fff; }
.ds-choice input:focus-visible + span, .ds-rolepick input:focus-visible + span { outline:3px solid #7aa7ff; outline-offset:2px; }
.ds-rolepick { display:grid; gap:8px; }
.ds-rolepick label { position:relative; margin:0; cursor:pointer; }
.ds-rolepick span { display:flex; flex-direction:column; padding:12px 16px; border-radius:16px; border:2px solid #DCE3EA; background:#fff; }
.ds-rolepick small { color:#6b7a8a; }
.ds-rolepick input:checked + span { border-color:#0D1B2A; background:#EEF3F8; box-shadow:inset 4px 0 0 #0D1B2A; }

/* ===== v1.11 Minimal: one calm accent, flat cards, no decoration, no motion =====
   Research notes (GSMA AgriTech UX guide, inclusive-design case studies): few things per screen, consistent places,
   colour only for meaning (green = good, red = bad), no animation, taps instead of typing. */
html body .ds-sky { background: transparent; color: var(--ds-ink, #0D1B2A); padding: 6px 4px 14px; border-radius: 0; margin-bottom: 4px; overflow: visible; }
html body .ds-sky::before, html body .ds-sky::after { display: none; }
html body .ds-sky .ds-sky-hello { color: var(--ds-ink, #0D1B2A); text-shadow: none; max-width: none; font-size: clamp(1.45rem, 4vw, 2rem); }
html body .ds-sky .ds-sky-sub { color: #5d6b7a; text-shadow: none; opacity: 1; }
html body .ds-sky .ds-sky-area { background: #fff; color: #0D1B2A; border: 1px solid #E3E9EF; backdrop-filter: none; margin-top: 10px; padding: 6px 14px; border-radius: 999px; font-weight: 600; }
html body .ds-next-btn { animation: none !important; }
/* Work-area rail: each area keeps its own colour picture */
html body .ds-area { box-shadow: none; border: 1px solid #E3E9EF; }
/* Flat cards */
html body .ds-card, html body .ds-stat, html body .ds-milk-row, html body .ds-guide-head, html body .ds-guide-steps li, html body .ds-guide-list > div, html body .ds-quick { box-shadow: none; border: 1px solid #E8EDF2; }
html body .ds-guide-tabs a { box-shadow: none; border: 1px solid #E3E9EF; }
html body .ds-guide-tabs a.on { border-color: #0D1B2A; }
html body .ds-milk-row.ds-wd-hold { border: 2px solid #E5484D; }
* { scroll-behavior: auto !important; }
/* ===== v1.11.1 Colour icons are back: clean flat cards, but every area and action keeps its own colour ===== */
html body .ds-quick .bi { background: linear-gradient(145deg, color-mix(in srgb, var(--t) 78%, #fff), var(--t)); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--t) 38%, transparent); }
html body .ds-quick:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13,27,42,.08); border-color: var(--t); }
html body .ds-area-ico { filter: none; opacity: 1; }
html body .ds-area:not(.on) .ds-area-ico { background: color-mix(in srgb, var(--a) 14%, #fff); }
html body .ds-area.on { background: var(--a); border-color: var(--a); color: #fff; }
html body .ds-area.on .ds-area-ico { background: rgba(255,255,255,.22); }
html body .ds-stat .ds-stat-ico, html body .ds-stat > .bi { color: var(--ds-primary); }
html body .ds-sky .ds-sky-area b { filter: none; }

/* ===== Picture icons (emoji): always visible, no font to download ===== */
.ds-emo { font-style: normal; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
html body .ds-quick .ds-emo { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; background: color-mix(in srgb, var(--t) 14%, #fff); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t) 30%, transparent); transition: transform .15s; }
html body .ds-quick:hover .ds-emo { transform: scale(1.06); }
html body .ds-stat .ds-emo { position: absolute; right: 14px; top: 14px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.45rem; background: #F1F5F9; opacity: 1; }
html body .ds-stat.bg-4 .ds-emo { background: #FDECEC; }
html body .ds-list-row .ds-emo-sm { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; background: #F1F5F9; flex: 0 0 36px; }
html body .ds-nav-link .ds-emo-nav { display: inline-block; width: 1.7em; text-align: center; font-size: 1.1rem; margin-right: .35rem; }

/* v1.13 language pill, comfort and screen fit */
.ds-langpill{display:inline-flex;background:var(--ds-bg);border:1px solid var(--ds-border);border-radius:999px;padding:2px;gap:2px;flex-shrink:0}
.ds-langpill a{padding:5px 10px;border-radius:999px;font-weight:700;font-size:.8rem;color:var(--ds-text);white-space:nowrap;text-decoration:none;line-height:1.3}
.ds-langpill a.on{background:var(--ds-primary);color:#fff}
@media(max-width:575.98px){.ds-langpill a{padding:5px 7px;font-size:.72rem}.ds-langpill a:last-child{display:none}.ds-langpill a:last-child.on{display:inline-block}}
.ds-side-lang{padding:12px 14px 16px}
@media(pointer:coarse){.btn,.form-control,.form-select{min-height:46px}.ds-sidebar .nav-link,.ds-nav a{min-height:46px}.ds-langpill a{padding:8px 12px}}
.ds-bottom-nav{padding-bottom:env(safe-area-inset-bottom)}
.ds-content{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
@media(max-width:991.98px){.ds-content{padding-bottom:calc(92px + env(safe-area-inset-bottom))}.table-responsive,.ds-content table{max-width:100%}}
@media(max-height:500px) and (orientation:landscape){.ds-bottom-nav{position:static}.ds-content{padding-bottom:16px}}
@media(min-width:1600px){html{font-size:17px}}

/* v1.13 simple home */
.ds-simple-home{max-width:640px;margin:0 auto}
.ds-simple-milk{display:flex;align-items:center;gap:14px;background:var(--ds-card-bg);border:1px solid var(--ds-border);border-radius:18px;padding:14px 18px;margin-bottom:16px}
.ds-simple-milk .ds-emo{font-size:2.4rem}
.ds-simple-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ds-simple-grid .ds-quick{min-height:130px;font-size:1.1rem}
@media(min-width:992px){.ds-simple-grid{grid-template-columns:repeat(3,1fr)}}

/* ===== v1.15 CLEAN & PROFESSIONAL: white, flat, thin borders, one blue, pill buttons ===== */
:root{--ds-primary:#2147E0;--ds-primary-dark:#1A38B5;--ds-accent:#2147E0;--ds-bg:#FFFFFF;--ds-card-bg:#FFFFFF;--ds-text:#1B2030;--ds-muted:#6B7280;--ds-border:#E6E8EC;--ds-sidebar-bg:#FFFFFF;--ds-sidebar-text:#2A3042;--ds-radius:14px;--ds-radius-sm:10px;--ds-shadow-sm:none;--ds-shadow:none;--ds-shadow-lg:0 6px 20px rgba(20,30,60,.08)}
html[data-theme="dark"]{--ds-bg:#12151C;--ds-card-bg:#1A1E27;--ds-text:#ECEFF5;--ds-muted:#9AA3B2;--ds-border:#2A3040;--ds-sidebar-bg:#161A22;--ds-sidebar-text:#D5DAE5;--ds-primary:#5B7BFF}
html body{background:var(--ds-bg);font-family:Inter,Roboto,system-ui,-apple-system,"Segoe UI","Noto Sans",Arial,sans-serif;color:var(--ds-text)}
html body .ds-main{background:var(--ds-bg)}
/* sidebar: white, thin divider, blue text when active */
html body .ds-sidebar{background:var(--ds-sidebar-bg);color:var(--ds-sidebar-text);border-right:1px solid var(--ds-border);box-shadow:none}
html body .ds-brand-name{color:var(--ds-text)}
html body .ds-brand-tag{color:var(--ds-muted)}
html body .ds-brand-badge{background:var(--ds-primary);color:#fff;box-shadow:none;border-radius:10px}
html body .ds-ws-card{background:#F5F7FB;border:1px solid var(--ds-border);color:var(--ds-text);border-radius:12px}
html[data-theme="dark"] body .ds-ws-card,html[data-theme="dark"] .ds-ws-card{background:#1F2430}
html body .ds-ws-card .ds-ws-for{color:var(--ds-muted)}
html body .ds-nav-section{color:var(--ds-muted);font-size:.7rem;letter-spacing:.06em}
html body .ds-nav-link{color:var(--ds-sidebar-text) !important;background:transparent !important;border-radius:10px !important;box-shadow:none !important;font-weight:500;padding:10px 12px !important;font-size:.95rem !important;transform:none !important}
html body .ds-nav-link:hover{background:#F3F5F9 !important;color:var(--ds-text) !important}
html[data-theme="dark"] body .ds-nav-link:hover{background:#222836 !important}
html body .ds-nav-link.active{background:color-mix(in srgb,var(--ds-primary) 9%,transparent) !important;color:var(--ds-primary) !important;font-weight:600;box-shadow:none !important}
html body .ds-nav-link .ds-emo-nav{filter:grayscale(1) opacity(.75)}
html body .ds-nav-link.active .ds-emo-nav,html body .ds-nav-link:hover .ds-emo-nav{filter:none}
/* top bar: flat white */
html body .ds-topbar{background:var(--ds-bg);backdrop-filter:none;border-bottom:1px solid var(--ds-border);box-shadow:none}
html body .btn-ds-outline,html body .ds-topbar .btn{border:1px solid var(--ds-border);border-radius:999px;background:var(--ds-card-bg);color:var(--ds-text);font-weight:500;box-shadow:none}
html body .btn-ds-outline:hover{background:#F3F5F9;border-color:#CBD0DA;color:var(--ds-text)}
html body .btn-ds-primary,html body .btn-primary{background:var(--ds-primary);border:1px solid var(--ds-primary);color:#fff;border-radius:999px;font-weight:600;padding:8px 20px;box-shadow:none;transform:none}
html body .btn-ds-primary:hover,html body .btn-primary:hover{background:var(--ds-primary-dark);border-color:var(--ds-primary-dark);color:#fff;box-shadow:none;transform:none;opacity:1}
html body .btn-outline-secondary,html body .btn-outline-primary,html body .btn-light{border-radius:999px}
html body .ds-langpill{background:var(--ds-card-bg);border-color:var(--ds-border)}
/* cards: white, 1px border, no shadow */
html body .ds-card,html body .card{background:var(--ds-card-bg);backdrop-filter:none;border:1px solid var(--ds-border);border-radius:14px;box-shadow:none}
html body .ds-stat{background:var(--ds-card-bg);color:var(--ds-text);border:1px solid var(--ds-border);border-radius:14px;box-shadow:none}
html body .ds-stat .ds-stat-label{color:var(--ds-muted);opacity:1}
html body .ds-stat:hover,html body .ds-quick:hover{transform:none;box-shadow:var(--ds-shadow-lg);border-color:#CBD0DA}
html body .ds-quick{background:var(--ds-card-bg) !important;color:var(--ds-text) !important;border:1px solid var(--ds-border);border-radius:14px;box-shadow:none}
html body .ds-quick span{color:var(--ds-text)}
html body .ds-hero{background:var(--ds-card-bg);border:1px solid var(--ds-border);box-shadow:none;border-radius:14px}
/* inputs */
html body .form-control,html body .form-select{border:1px solid var(--ds-border);border-radius:10px;background-color:var(--ds-card-bg);color:var(--ds-text);box-shadow:none}
html body .form-control:focus,html body .form-select:focus{border-color:var(--ds-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ds-primary) 16%,transparent)}
html body .form-label{font-weight:600;color:var(--ds-text);font-size:.88rem}
/* tables: airy, grey head */
html body .table{--bs-table-bg:transparent;border-color:var(--ds-border)}
html body .table thead th{background:#F7F8FA;color:var(--ds-muted);font-weight:600;font-size:.8rem;border-bottom:1px solid var(--ds-border)}
html[data-theme="dark"] body .table thead th{background:#1F2430}
/* tabs: blue underline like the reference */
html body .nav-tabs{border-bottom:1px solid var(--ds-border)}
html body .nav-tabs .nav-link{border:0;border-bottom:3px solid transparent;color:var(--ds-muted);font-weight:500;border-radius:0;background:none}
html body .nav-tabs .nav-link.active{color:var(--ds-primary);border-bottom-color:var(--ds-primary);background:none;font-weight:600}
/* badges: soft pills */
html body .badge{border-radius:999px;font-weight:600;padding:.4em .75em}
html body .badge.bg-success{background:#E7F6EC !important;color:#18794E}
html body .badge.bg-warning{background:#FFF1E0 !important;color:#B45309}
html body .badge.bg-danger{background:#FDE8E8 !important;color:#B42318}
html body .badge.bg-secondary{background:#EEF0F4 !important;color:#4B5565}
html body .badge.bg-primary,html body .badge.bg-info{background:#E8EDFF !important;color:var(--ds-primary)}
/* bottom nav + simple home */
html body .ds-bottom-nav{background:var(--ds-card-bg);border:1px solid var(--ds-border);box-shadow:0 6px 20px rgba(20,30,60,.08)}
html body .ds-bottom-nav .active{color:var(--ds-primary)}
html body .ds-simple-milk{border-radius:14px}
html body .ds-simple-grid .ds-quick{min-height:120px}
html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600;letter-spacing:-.01em}
/* v1.15 fixes: flat full-height white sidebar, blue area chips */
@media (min-width:992px){html body .ds-sidebar{width:250px;height:100vh;top:0;border-radius:0 !important;margin:0}}
html body .ds-sidebar,html body .ds-sidebar.open{background:var(--ds-sidebar-bg) !important;box-shadow:none;border-radius:0}
@media (max-width:991.98px){html body .ds-sidebar.open{box-shadow:0 0 40px rgba(20,30,60,.25)}}
html body .ds-area.on{background:var(--ds-primary);border-color:var(--ds-primary);color:#fff}
html body .ds-area:not(.on){background:var(--ds-card-bg);border-color:var(--ds-border)}
html body .ds-side-lang .ds-langpick{background:#F5F7FB;border-color:var(--ds-border)}
html body .ds-side-lang .ds-langpick a{color:var(--ds-text)}
html body .ds-side-lang .ds-langpick a.on{background:var(--ds-primary);color:#fff}
html body .ds-simple-home .btn{margin-top:4px}
html body .ds-side-lang .ds-langpick{gap:2px;padding:3px}
html body .ds-side-lang .ds-langpick a{flex:1 1 auto;padding:8px 4px;font-size:.76rem;overflow:hidden;text-overflow:ellipsis}
html body .ds-simple-home .text-center{margin-top:20px !important}
/* v1.16 declutter: light "do this next" card, blue choices, light save bar */
html body .ds-next{background:var(--ds-card-bg);color:var(--ds-text);border:1px solid var(--ds-border);border-left:4px solid var(--ds-primary);border-radius:14px}
html body .ds-next::after{display:none}
html body .ds-next .ds-next-tag{background:color-mix(in srgb,var(--ds-primary) 12%,transparent);color:var(--ds-primary);font-weight:600}
html body .ds-next-text{color:var(--ds-text);font-size:clamp(1.2rem,3.2vw,1.6rem);font-weight:600}
html body .ds-next-btn{background:var(--ds-primary);color:#fff;border-radius:999px;font-size:1rem;padding:11px 28px;font-weight:600}
html body .ds-next *{color:inherit}
html body .ds-next .ds-next-btn{color:#fff}
html body .ds-next .ds-next-tag{color:var(--ds-primary)}
html body .ds-next-all .btn-ds-outline,html body .ds-next a:not(.ds-next-btn){color:var(--ds-muted)}
html body .ds-choice span{border:1px solid var(--ds-border);border-radius:12px;padding:12px;font-weight:500;font-size:.98rem;background:var(--ds-card-bg)}
html body .ds-choice input:checked + span{background:color-mix(in srgb,var(--ds-primary) 10%,transparent);border-color:var(--ds-primary);color:var(--ds-primary);font-weight:600}
html body .ds-milk-bar{background:var(--ds-card-bg);color:var(--ds-text);border:1px solid var(--ds-border);box-shadow:0 8px 24px rgba(20,30,60,.10);border-radius:16px}
html body .ds-milk-bar .text-muted{color:var(--ds-muted) !important}
html body input[type=file]{padding:8px 10px;border-radius:10px;font-size:.9rem}
html body .ds-sky-hello{font-size:1.5rem;font-weight:600}
html body .ds-sky-sub{color:var(--ds-muted)}
html body .ds-footer,html body footer{color:var(--ds-muted);font-size:.78rem}
html body .ds-next-dots i{background:var(--ds-border)}
html body .ds-next-dots i.d{background:var(--ds-primary)}
html body .ds-next-dots i.n{background:color-mix(in srgb,var(--ds-primary) 45%,transparent)}
html body .ds-next summary,html body .ds-next-all{color:var(--ds-muted)}

/* ===== v1.17 calm, premium, low-effort: depth, whitespace, one action per screen ===== */
:root{--ds-bg:#F6F7FB;--ds-shadow-sm:0 1px 2px rgba(20,30,60,.04);--ds-r:16px}
html[data-theme="dark"]{--ds-bg:#12151C}
html body{font-size:1rem;line-height:1.55}
html body .ds-main{background:var(--ds-bg)}
html body .ds-topbar{background:#fff;padding:10px 24px}
html[data-theme="dark"] body .ds-topbar{background:var(--ds-card-bg)}
html body .ds-content{padding-top:26px}
/* cards: white on soft grey = depth without borders shouting */
html body .ds-card,html body .card,html body .ds-stat,html body .ds-quick,html body .ds-hero,html body .ds-simple-milk,html body .ds-next{border:1px solid #E9ECF2;border-radius:var(--ds-r);box-shadow:var(--ds-shadow-sm)}
html body .ds-quick,html body .ds-stat{transition:transform .15s ease,box-shadow .15s ease}
html body .ds-quick:hover,html body .ds-stat:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,30,60,.09);border-color:#DDE2EC}
html body .ds-quick:active{transform:scale(.98)}
/* quiet section headings = clear hierarchy */
html body .ds-section-title{font-size:.95rem;font-weight:600;color:var(--ds-muted);margin:28px 0 12px;letter-spacing:0}
html body .ds-sky-hello{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}
html body .ds-sky{margin-bottom:18px}
/* top bar: icon-only round buttons, nothing shouting */
html body .ds-tb-ico{font-size:1rem;line-height:1;font-weight:700}
html body .ds-topbar .btn-ds-outline{width:38px;height:38px;padding:0;display:inline-grid;place-items:center}
html body .ds-topbar .ds-bell{width:38px;height:38px;display:inline-grid;place-items:center;border-radius:50%}
html body .ds-topbar .ds-bell:hover{background:#F0F2F7}
/* work-area strip: smaller, calmer tabs */
html body .ds-areas{padding:10px 24px 0;gap:6px}
html body .ds-area{padding:5px 14px 5px 6px;font-size:.9rem;font-weight:500;border-radius:999px}
html body .ds-area-ico{width:28px;height:28px;font-size:.95rem}
/* icon circles: soft, same size everywhere */
html body .ds-quick .ds-emo{width:56px;height:56px;font-size:1.8rem;box-shadow:none}
html body .ds-quick span{font-weight:600;font-size:1rem}
html body .ds-quick small{color:var(--ds-muted);font-weight:500}
/* lists and tables breathe */
html body .table>:not(caption)>*>*{padding:.85rem .9rem}
html body .table tbody tr:hover{background:#FAFBFE}
/* forms: big, forgiving */
html body .form-control,html body .form-select{padding:.7rem .9rem;font-size:1rem}
html body .form-control-lg{padding:.85rem 1rem;font-size:1.1rem}
html body .btn{padding:.6rem 1.25rem;font-size:1rem}
html body .btn-sm{padding:.4rem .9rem;font-size:.9rem}
/* focus: always visible, never harsh */
html body :focus-visible{outline:3px solid color-mix(in srgb,var(--ds-primary) 40%,transparent);outline-offset:2px}
/* status colours: green = ok, amber = wait, red = problem only */
html body .alert-success{background:#ECF8F1;border-color:#CDEBD9;color:#14683F}
html body .alert-danger{background:#FDEEEE;border-color:#F6CFCF;color:#A12020}
html body .alert-warning{background:#FFF6E8;border-color:#F9E1B8;color:#8A5300}
html body .alert{border-radius:12px}
@media (max-width:991.98px){html body .ds-topbar{padding:8px 12px}html body .ds-sky-hello{font-size:1.45rem}html body .ds-section-title{margin-top:22px}}
html body .visually-hidden{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html body .ds-sky-sub,html body .ds-sky-hello{text-shadow:none !important;color:var(--ds-text)}
html body .ds-sky-sub{color:var(--ds-muted) !important;font-size:.95rem}
/* v1.18 safety: never a sideways page; guide tabs blue; PWA standalone comfort */
html body .ds-main{overflow-x:clip}
html body .ds-guide-tabs a.on{background:var(--ds-primary);color:#fff}
img,video,svg{max-width:100%}
@media (display-mode:standalone){html body{overscroll-behavior-y:contain}html body .ds-topbar{padding-top:max(10px,env(safe-area-inset-top))}}
@media (min-width:768px) and (max-width:991.98px){html body .ds-simple-grid{grid-template-columns:repeat(3,1fr)}html body .ds-quick-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}