/* V81 task UX update */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Vazirmatn,Tahoma,Arial,sans-serif;background:#020c1b;color:#f4f7ff}body{direction:rtl}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 45% 18%,rgba(27,73,140,.18),transparent 35%),radial-gradient(circle at 80% 70%,rgba(93,35,167,.12),transparent 30%)}
.app{max-width:1120px;margin:auto;padding:18px 18px 30px}.glass{background:linear-gradient(145deg,rgba(7,25,49,.94),rgba(3,14,29,.97));border:1px solid #16345a;box-shadow:0 16px 40px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.03);border-radius:18px}
.topbar{min-height:100px;display:grid;grid-template-columns:60px 1fr 2fr 60px 60px;align-items:center;gap:10px;padding:14px 18px;margin-bottom:14px}
.icon-btn{height:50px;border-radius:14px;border:1px solid #20466f;background:#071a31;color:white;font-size:25px;cursor:pointer}.date-block{padding:0 8px}.date-main{font-size:20px;font-weight:800}.date-sub{color:#a8b7c9;margin-top:2px}.title{text-align:center}.title h1{font-size:26px;margin:0 0 4px}.title span{color:#aebed2}
.hero-grid{display:grid;grid-template-columns:minmax(0,3.3fr) 270px;gap:14px;margin-bottom:14px}.podium{min-height:390px;position:relative;display:flex;align-items:flex-end;justify-content:center;gap:20px;overflow:hidden;padding:35px 25px 0}
.podium:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(18,87,157,.15),transparent 45%);pointer-events:none}
.podium-person{width:31%;position:relative;text-align:center;z-index:2}.avatar{width:112px;height:112px;margin:auto;border-radius:50%;padding:5px;background:#14283f;position:relative;z-index:3}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.avatar.gold{background:linear-gradient(135deg,#ffd44c,#7c5a10);box-shadow:0 0 30px rgba(255,198,35,.3)}.avatar.silver{background:linear-gradient(135deg,#e8f2ff,#455d76)}.avatar.bronze{background:linear-gradient(135deg,#e9a264,#653718)}.crown{font-size:40px;color:#ffd53b;line-height:1;margin-bottom:-2px}.stand{height:160px;margin-top:-8px;border:1px solid #234666;border-radius:12px 12px 0 0;background:linear-gradient(180deg,#102c48,#06182b);display:flex;flex-direction:column;justify-content:center;position:relative}.stand strong{font-size:20px}.stand b{font-size:30px;margin:7px 0;color:#dce8f7}.stand small{color:#9eb1c7}.gold-stand{border-color:#8b681e;background:linear-gradient(180deg,#102b45,#071629);box-shadow:0 -4px 25px rgba(255,190,32,.14)}.gold-stand b{color:#ffd13c}.bronze-stand b{color:#ef9a52}.number-one{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);width:130px;height:38px;border-radius:12px 12px 0 0;background:linear-gradient(180deg,#b98216,#5a3c09);font-size:24px;color:#fff}.rank-badge{position:absolute;top:78px;right:7%;width:42px;height:42px;border-radius:10px;background:#8fa0b4;color:#071322;display:grid;place-items:center;font-size:20px;font-weight:800;z-index:4;transform:rotate(0)}.bronze-badge{background:#a55f34;color:white}.thresholds{display:flex;flex-direction:column;gap:14px}.threshold{min-height:120px;border-radius:16px;padding:15px 20px;display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto auto;align-items:center;border:1px solid #1e3651;background:#081a30}.threshold span{grid-row:1/4;font-size:34px;text-align:center}.threshold label{font-size:15px;color:#f0c64b}.threshold b{font-size:27px}.threshold small{color:#a8b5c7}.threshold.reward{border-color:#512a88}.threshold.reward label{color:#bd78ff}.threshold.target{border-color:#155c4d}.threshold.target label{color:#6df09d}
.middle-grid{display:grid;grid-template-columns:360px 1fr;gap:14px;margin-bottom:14px}.best{overflow:hidden}.section-head{display:flex;justify-content:space-between;align-items:center;padding:17px 18px 10px}.section-head h2{font-size:20px;margin:0}.section-head select{background:#081b31;border:1px solid #21466c;color:#fff;border-radius:9px;padding:7px 12px;font-family:inherit}.best-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 12px 12px}.best-card{border:1px solid #173b62;border-radius:12px;padding:14px;text-align:center;background:rgba(5,21,39,.8)}.best-card i{display:block;font-style:normal;font-size:27px;margin-bottom:4px}.best-card span{font-size:13px;color:#b8c4d3}.best-card b{display:block;font-size:15px;margin:8px 0}.best-card strong{font-size:24px}.best-card small{display:block;color:#8ea0b5}.all-records{text-align:center;border-top:1px solid #17304c;padding:10px;color:#bc73ff}
.chart{min-height:360px}.legend{display:flex;gap:22px;justify-content:center;color:#b7c6d8;font-size:13px}.legend span{display:flex;gap:6px;align-items:center}.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.blue{background:#238dff}.purple{background:#9d47ff}.green{background:#2dd67b}.yellow{background:#ffb000}.chart-wrap{position:relative;height:285px;padding:5px 18px}.chart svg{width:100%;height:100%;overflow:visible}.gridlines line{stroke:#19314c;stroke-width:1;stroke-dasharray:3 4}.line{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.blue-line{stroke:#278cff}.purple-line{stroke:#a848ff}.green-line{stroke:#35d47a}.yellow-line{stroke:#ffb316}.marker{stroke:#71859b;stroke-dasharray:5 4}.point{fill:#2c8fff;stroke:#fff;stroke-width:2}.chart-tip{position:absolute;top:70px;right:16%;background:#0a2039;border:1px solid #294767;border-radius:12px;padding:10px 13px;display:flex;flex-direction:column;gap:4px;font-size:12px;box-shadow:0 10px 25px rgba(0,0,0,.3)}.chart-tip b{margin-bottom:4px}.xlabels{display:flex;justify-content:space-between;padding:0 25px 12px;color:#8da1b8;font-size:11px}
.table-card{overflow:hidden;margin-bottom:14px}.table-title{padding:14px 18px;border-bottom:1px solid #18334f;font-size:17px}.table-title b{color:#f1c63c}.table-scroll{overflow-x:auto}table{width:100%;min-width:1020px;border-collapse:collapse;font-size:12px}th,td{border-left:1px solid #1a3653;border-bottom:1px solid #1a3653;padding:9px 7px;text-align:center;white-space:nowrap}th{color:#a9bfd4;background:#07182b;font-weight:600}td{background:rgba(4,18,34,.85)}tbody tr:hover td{background:#0a233e}.name-col{text-align:right;min-width:125px}.person-name{display:flex;align-items:center;gap:8px}.mini-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid #375775}.rank{font-size:18px;font-weight:800}.today{color:#ffd037;font-size:15px;font-weight:800}.month{color:#a977ff;font-size:16px;font-weight:800}.level{padding:4px 9px;border-radius:7px;border:1px solid #2489ff;color:#58b1ff}.level.reward{border-color:#a84cff;color:#d08aff}.level.target{border-color:#24c27a;color:#59e69e}.negative{color:#ff5555}.progress{height:4px;border-radius:4px;background:#1a2f49;margin-top:5px;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,#8f4dff,#5b8cff)}
.totals{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px}.total-card{border:1px solid #173957;border-radius:14px;background:linear-gradient(145deg,#071a31,#041225);padding:13px;text-align:center}.total-card span{font-size:27px}.total-card label{display:block;color:#b6c5d5;font-size:12px}.total-card b{display:block;font-size:25px;margin:4px 0}.total-card small{color:#45df87}
.motivation{display:flex;align-items:center;justify-content:space-between;padding:18px 28px}.motivation strong{font-size:20px;color:#63f19b}.motivation p{margin:7px 0 0;color:#c1ccda}.rocket,.trophy{font-size:48px}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:50;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.calendar-panel{width:min(420px,100%);padding:18px}.cal-head{display:flex;justify-content:space-between;align-items:center}.cal-head button{width:40px;height:40px;border-radius:10px;background:#0b2340;color:#fff;border:1px solid #21496f;font-size:24px}.cal-head h3{margin:0}.weekdays,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:14px}.weekdays div{text-align:center;color:#9eb1c8;font-size:12px}.day{height:38px;border-radius:8px;border:1px solid transparent;background:#071b31;color:#eaf2fb;cursor:pointer}.day:hover,.day.selected{border-color:#ffcb35;background:#17355a;color:#ffd23c}.close-cal{width:100%;margin-top:15px;padding:10px;border-radius:10px;background:#142e4c;color:white;border:1px solid #2a4f72;font-family:inherit}
@media(max-width:900px){.app{padding:10px}.topbar{grid-template-columns:50px 1fr 50px 50px;grid-template-areas:"cal date filter menu" "title title title title";gap:7px}.topbar .icon-btn:first-child{grid-area:cal}.date-block{grid-area:date}.title{grid-area:title;padding:8px 0}.title h1{font-size:22px}.hero-grid,.middle-grid{grid-template-columns:1fr}.thresholds{display:grid;grid-template-columns:repeat(3,1fr)}.threshold{min-height:105px;padding:10px}.threshold span{font-size:25px}.threshold b{font-size:22px}.podium{min-height:340px}.avatar{width:88px;height:88px}.stand{height:135px}.stand strong{font-size:15px}.stand b{font-size:22px}.totals{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.podium{gap:6px;padding:35px 5px 0}.podium-person{width:33%}.avatar{width:70px;height:70px}.crown{font-size:28px}.stand{height:125px}.stand strong{font-size:13px}.stand b{font-size:18px}.stand small{font-size:9px}.rank-badge{top:57px;width:31px;height:31px;font-size:15px}.number-one{width:85px;height:29px;font-size:18px}.thresholds{grid-template-columns:1fr}.middle-grid{grid-template-columns:1fr}.best-grid{grid-template-columns:1fr 1fr}.chart-tip{right:5%;font-size:10px}.xlabels{font-size:9px}.motivation{padding:15px}.motivation strong{font-size:15px}.motivation p{font-size:11px}.rocket,.trophy{font-size:32px}}

.month-ribbon{padding:12px 14px;margin-bottom:14px;overflow:hidden}
.ribbon-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ribbon-head b{font-size:17px}.ribbon-head span{font-size:11px;color:#91a6bd;margin-right:10px}
.ribbon-legend{display:flex;gap:12px;color:#9fb1c5;font-size:10px}.ribbon-legend span{display:flex;gap:4px;align-items:center}
.ribbon-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}.work-dot{background:#2b9bff}.holiday-dot{background:#ff4f62}.friday-dot{background:#a65cff}.selected-dot{background:#ffd04a}
.ribbon-days{display:flex;flex-direction:column;gap:6px;overflow-x:auto;padding-bottom:3px;direction:rtl}.ribbon-row{display:flex;flex-direction:row-reverse;gap:5px;min-width:max-content;direction:ltr}
.ribbon-day{flex:0 0 52px;height:58px;border:1px solid #173958;border-radius:9px;background:#071b31;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:.15s}
.ribbon-day .num{font-size:16px;font-weight:800;color:#fff}.ribbon-day .wd{font-size:9px;color:#8ea2b9;margin-top:2px}.ribbon-day .mark{font-size:8px;max-width:40px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ribbon-day:hover{border-color:#3d78a9;transform:translateY(-1px)}.ribbon-day.selected{border:2px solid #ffd04a;box-shadow:0 0 0 2px rgba(255,208,74,.1)}
.ribbon-day.holiday{background:linear-gradient(180deg,#321522,#1a1020);border-color:#743044}.ribbon-day.holiday .wd,.ribbon-day.holiday .mark{color:#ff7b89}
.ribbon-day.friday{background:linear-gradient(180deg,#201538,#120e23);border-color:#513477}.ribbon-day.friday .wd{color:#bd8bff}
@media(max-width:600px){.ribbon-head{align-items:flex-start;gap:8px;flex-direction:column}.ribbon-day{flex-basis:42px}}

.ribbon-day.today{background:linear-gradient(145deg,#f5b700,#ff7a00)!important;color:#111!important;border-color:#ffd66b!important;box-shadow:0 8px 22px rgba(245,183,0,.35),inset 0 0 0 1px rgba(255,255,255,.35)!important;transform:translateY(-2px)}
.ribbon-day.today .num,.ribbon-day.today .wd{color:#111!important}

/* V89.1 — viewport-safe page scrolling.
   Content may grow beyond a short browser window; only open modal layers lock it. */
html{
  height:auto!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scroll-behavior:smooth;
}
html body[data-page]:not(.modal-open):not(.notification-open):not(.numeric-pad-open):not(.quick-activity-open):not(.entry-choice-open):not(.details-date-open):not(.details-person-open),
html body.profile-page:not(.modal-open):not(.notification-open):not(.numeric-pad-open):not(.quick-activity-open),
html body.details-page:not(.modal-open):not(.notification-open):not(.numeric-pad-open):not(.details-date-open):not(.details-person-open),
html body.entry-page:not(.modal-open):not(.notification-open):not(.numeric-pad-open):not(.entry-choice-open),
html body.messages-page:not(.modal-open):not(.notification-open):not(.numeric-pad-open){
  height:auto!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:touch;
}
html body[data-page="home"] .app,
html body.profile-page .profile-shell,
html body.details-page .details-shell,
html body.messages-page .messages-shell{
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  padding-bottom:max(122px,calc(104px + env(safe-area-inset-bottom)))!important;
}
@media (max-height:820px){
  html body.entry-page:not(.entry-choice-open) .entry-shell{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:max(122px,calc(104px + env(safe-area-inset-bottom)))!important;
  }
  html body.entry-page:not(.entry-choice-open) .entry-grid,
  html body.entry-page:not(.entry-choice-open) .entry-form,
  html body.entry-page:not(.entry-choice-open) .audit-panel{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  html body.entry-page:not(.entry-choice-open) .entry-form{
    grid-template-rows:auto!important;
  }
}

/* V1.2 CALENDAR RESTORE */
.month-ribbon{display:block!important;padding:12px 14px;margin-bottom:14px;overflow:hidden}
.ribbon-days{display:flex!important;flex-direction:column!important;direction:rtl!important;gap:6px!important}
.ribbon-row{display:flex!important;flex-direction:row!important;direction:rtl!important;gap:5px!important;min-width:max-content!important}
.ribbon-day{flex:0 0 52px!important;height:58px;border:1px solid #173958;border-radius:9px;background:#071b31;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:#fff}
.ribbon-day .num{font-size:16px;font-weight:800;color:#fff!important}.ribbon-day .wd{font-size:9px;color:#a8b8c9;margin-top:2px}
.ribbon-day.holiday{background:#5a1e2d!important;border-color:#b3425d!important}.ribbon-day.friday{background:#35205a!important;border-color:#6944a0!important}
.ribbon-day.today{background:linear-gradient(145deg,#f6b900,#ff6f00)!important;color:#111!important;border-color:#ffd66b!important;box-shadow:0 8px 22px rgba(245,183,0,.35)!important}
.ribbon-day.today .num,.ribbon-day.today .wd{color:#111!important}

/* V13 final responsive calendar + interactive trend */
.ribbon-days{width:100%!important;overflow:visible!important;display:flex!important;flex-direction:column!important;gap:6px!important}
.ribbon-row{width:100%!important;display:grid!important;grid-template-columns:repeat(15,minmax(0,1fr))!important;gap:5px!important;direction:rtl!important;min-width:0!important}
.ribbon-day{width:100%!important;min-width:0!important;flex:none!important;box-sizing:border-box}
.trend-summary{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:8px 0 12px;padding:10px 14px;border-radius:10px;background:rgba(8,24,42,.78);border:1px solid rgba(75,118,156,.28);font-size:12px;color:#dbe8f5}.trend-summary span{white-space:nowrap;color:#b7c9db}
.trend-hover-layer{position:absolute;inset:0;display:grid;grid-auto-flow:column;z-index:4}.trend-hover-layer button{border:0;background:transparent;cursor:crosshair;padding:0}.trend-hover-layer button:hover{background:rgba(255,255,255,.025)}
.chart-tip{z-index:8;pointer-events:none}
.xlabels{gap:4px;overflow:hidden}.xlabels span{white-space:nowrap}
@media(max-width:900px){.ribbon-row{grid-template-columns:repeat(8,minmax(0,1fr))!important}.ribbon-day{height:50px!important}.ribbon-day .num{font-size:14px!important}.ribbon-day .wd{font-size:8px!important}.xlabels{font-size:8px}}
@media(max-width:520px){.ribbon-row{grid-template-columns:repeat(5,minmax(0,1fr))!important}.ribbon-day{height:46px!important}.xlabels span{font-size:7px}}
@media(max-width:340px){.ribbon-row{grid-template-columns:repeat(4,minmax(0,1fr))!important}}

/* V14 */
.header-date-card{position:absolute;top:16px;right:20px;min-width:150px;padding:10px 14px;border-radius:12px;text-align:right;background:linear-gradient(145deg,#f6c344,#e99d16);color:#17120a;box-shadow:0 10px 25px rgba(238,169,35,.25);z-index:10}
.header-date-card #headerClock{font-size:18px;font-weight:900;direction:ltr}
.header-date-card #headerDate{font-size:14px;font-weight:800;margin-top:3px}
.header-date-card #headerWeekday{font-size:12px;font-weight:600;margin-top:2px}
.ribbon-days{width:100%!important;overflow:visible!important;display:block!important;direction:ltr!important}
.ribbon-row{width:100%!important;display:flex!important;flex-direction:row!important;gap:3px!important;direction:ltr!important;justify-content:space-between!important}
.ribbon-day{flex:1 1 0!important;min-width:0!important;width:auto!important;height:42px!important;border-radius:7px!important}
.ribbon-day .num{font-size:13px!important}.ribbon-day .wd{font-size:7px!important}
.trend-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}
.trend-controls select{background:#0b2138;color:#dbe8f5;border:1px solid #254b6a;border-radius:8px;padding:7px 10px}
#trendPeriodLabel{font-size:11px;color:#91a6bd}
.trend-summary{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:6px 0 10px;padding:8px 12px;border-radius:9px;background:rgba(8,24,42,.78);border:1px solid rgba(75,118,156,.25);font-size:12px}
.trend-summary span{white-space:nowrap;color:#b7c9db}
.performance-extra{margin-top:8px;border-top:1px solid rgba(100,130,160,.2)}
.extra-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 10px;border-bottom:1px solid rgba(100,130,160,.12);font-size:11px}
.extra-row.negative{color:#ff8b8b}.extra-row.description{color:#aebfd0}
.code-cloud{display:flex;gap:6px;flex-wrap:wrap}.code-cloud span{cursor:help;padding:3px 7px;border-radius:999px;background:rgba(210,60,70,.13);border:1px solid rgba(210,60,70,.25)}
@media(max-width:1050px){.ribbon-day{height:38px!important}.ribbon-day .wd{font-size:6px!important}.ribbon-day .num{font-size:12px!important}}
@media(max-width:700px){.ribbon-row{flex-wrap:wrap!important}.ribbon-day{flex:0 0 calc(7.14% - 3px)!important}}
@media(max-width:430px){.ribbon-day{flex-basis:calc(14.28% - 3px)!important;height:40px!important}}

/* ===== V15 corrections ===== */
.topbar{position:relative}
.topbar .date-block{
  background:linear-gradient(145deg,#f6c344,#e99d16);
  color:#17120a;border-radius:12px;padding:9px 13px;
  box-shadow:0 8px 20px rgba(238,169,35,.22);
  min-width:150px;justify-self:start;
}
.topbar .date-main{font-size:18px;font-weight:900}
.topbar .date-sub{color:#33270c;font-size:12px;font-weight:800}
.topbar .date-clock{font-size:16px;font-weight:900;direction:ltr;margin-top:3px;letter-spacing:.5px}
.header-date-card{display:none!important}

.trend-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}
.trend-controls select{background:#0b2138;color:#dbe8f5;border:1px solid #254b6a;border-radius:8px;padding:7px 10px}
#trendPeriodLabel{font-size:11px;color:#91a6bd}
.trend-summary{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:6px 0 10px;padding:8px 12px;border-radius:9px;background:rgba(8,24,42,.78);border:1px solid rgba(75,118,156,.25);font-size:12px}
.trend-summary b{color:#fff}.trend-summary span{white-space:nowrap;color:#b7c9db}
.chart{min-width:0;overflow:hidden}
.chart-wrap{height:285px;min-width:0;overflow:hidden}
.chart svg{display:block;width:100%;height:100%;overflow:hidden}
.line{filter:drop-shadow(0 9px 7px rgba(39,140,255,.22))}
.blue-line{filter:drop-shadow(0 10px 8px rgba(39,140,255,.28))}
.purple-line{filter:drop-shadow(0 10px 8px rgba(168,72,255,.25))}
.green-line{filter:drop-shadow(0 10px 8px rgba(53,212,122,.25))}
.yellow-line{filter:drop-shadow(0 10px 8px rgba(255,179,22,.25))}
.trend-hover-layer{position:absolute;inset:0;display:grid;z-index:4}
.trend-hover-layer button{border:0;background:transparent;cursor:crosshair;padding:0;min-width:0}
.trend-hover-layer button:hover{background:rgba(255,255,255,.035)}
.chart-tip{z-index:8;pointer-events:none;min-width:145px}
.xlabels{direction:ltr;display:flex;justify-content:space-between;gap:4px;overflow:hidden;padding:0 25px 12px;color:#8da1b8;font-size:11px}
.xlabels span{flex:1;text-align:center;white-space:nowrap}

.table-card{overflow:hidden}
.table-scroll{overflow-x:auto}
table{min-width:1320px}
.table-meta-row td{background:linear-gradient(90deg,rgba(11,31,52,.95),rgba(7,24,42,.95));padding:9px 12px}
.meta-flex{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;color:#b7c9db}
.meta-flex b{color:#f0c43d}
.meta-flex .reward-label{color:#d08aff}
.code-cloud{display:flex;gap:6px;flex-wrap:wrap}
.code-cloud span{cursor:help;padding:3px 8px;border-radius:999px;background:rgba(210,60,70,.13);border:1px solid rgba(210,60,70,.3);color:#ff8585}
.reward-cell{color:#d08aff;font-weight:800}.note-cell{color:#9eb1c7;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.negative{color:#ff6262;font-weight:800}

@media(max-width:800px){
 .topbar{grid-template-columns:50px 1fr 1fr 50px 50px}
 .topbar .date-block{min-width:0;padding:7px 9px}
 .topbar .date-main{font-size:15px}.topbar .date-clock{font-size:13px}
}

/* ===== V16 final design corrections ===== */
.app{max-width:1240px;width:calc(100% - 36px);margin:18px auto 30px;padding:0}
.topbar{grid-template-columns:58px 58px minmax(190px,1fr) minmax(360px,2fr) 52px 52px;min-height:106px;margin-bottom:14px;padding:12px 16px;gap:10px}
.brand{width:48px;height:58px;display:flex;align-items:center;justify-content:center;overflow:hidden}.brand img{width:54px;height:56px;object-fit:contain;display:block;filter:drop-shadow(0 4px 8px rgba(255,191,25,.2))}
.calendar-btn{font-size:23px!important;line-height:1}
.date-wrap{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.date-block{background:linear-gradient(145deg,#f6c344,#e99d16);color:#17120a;border-radius:12px;padding:8px 12px;box-shadow:0 8px 20px rgba(238,169,35,.22);min-width:175px}.date-main{font-size:18px;font-weight:900;white-space:nowrap}.date-sub{color:#33270c;font-size:12px;font-weight:800;margin-top:2px}.outside-clock{font-size:15px;font-weight:900;direction:ltr;color:#d9e6f3;margin-top:5px;padding-right:3px;letter-spacing:.5px}
.title h1{font-size:25px}.title span{font-size:13px}
.hero-grid{grid-template-columns:190px minmax(0,1fr) 245px;align-items:stretch;gap:14px}.daily-min{padding:12px;display:flex;flex-direction:column;justify-content:center;gap:10px}.daily-min .threshold{min-height:135px;margin:0}.mini-goal{display:flex;justify-content:space-between;align-items:center;padding:12px 10px;border:1px solid #173b62;border-radius:12px;background:#071a30;color:#9db1c8}.mini-goal b{font-size:20px;color:#65eaa0}.mini-goal.reward-goal{border-color:#512a88}.mini-goal.reward-goal b{color:#d08aff}.podium{min-height:390px}.hero-stats{padding:18px;display:flex;flex-direction:column;justify-content:center;gap:10px}.hero-stats h2{font-size:17px;margin:0 0 4px;color:#dfe9f4}.hero-stat{padding:15px 14px;border:1px solid #173957;border-radius:12px;background:rgba(5,21,39,.78);display:flex;align-items:center;justify-content:space-between;gap:10px}.hero-stat span{font-size:12px;color:#aebfd1}.hero-stat b{font-size:22px;color:#ffd03c}
.chart .section-head{padding-bottom:7px}.chart-month{color:#7fc4ff;font-size:.8em;margin-right:5px}.chart-wrap{height:285px;overflow:hidden!important}.chart-tip{top:15px;right:auto;left:18px;min-width:150px;transition:left .08s ease,top .08s ease;direction:rtl}.dynamic-marker{stroke:#7f93a8;stroke-width:1.5;stroke-dasharray:4 4;pointer-events:none}.hover-point{stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 5px currentColor)}.hover-point.blue-line{fill:#278cff}.hover-point.purple-line{fill:#a848ff}.hover-point.green-line{fill:#35d47a}.hover-point.yellow-line{fill:#ffb316}
.table-card{margin-bottom:14px}.order-count{color:#4da5ff!important;font-weight:900}.task-codes{min-width:105px}.task-codes span{display:inline-block;margin:2px;padding:3px 6px;border-radius:999px;background:#0b2b4b;border:1px solid #236da7;color:#7fc5ff;font-size:10px;cursor:help}.task-codes span:hover{background:#123e63;color:#fff}.reward-cell{color:#d08aff!important}.note-cell{color:#aebfd0!important}
.challenges{margin-bottom:14px;padding-bottom:8px}.challenges .section-head{padding-bottom:12px}.section-note{display:block;font-size:11px;color:#8299b2;margin-top:3px}.challenge-badge{font-size:11px;color:#63e9a0;border:1px solid #1d6c53;padding:6px 9px;border-radius:999px;background:rgba(24,91,70,.16)}.challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 12px 12px}.challenge-card{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:14px;border-radius:14px;background:#071a30;border:1px solid #183a5a}.challenge-card.weekly{border-color:#2d5b86}.challenge-card.clean{border-color:#27604d}.challenge-card.monthly{border-color:#5d3d7c}.challenge-icon{font-size:28px;text-align:center}.challenge-card b{font-size:14px}.challenge-card p{margin:5px 0 0;color:#9fb2c7;font-size:11px;line-height:1.8}.challenge-card p strong{color:#ffd04a}.challenge-card em{font-style:normal;font-weight:900;color:#ffd04a;font-size:16px;white-space:nowrap}
.month-ribbon{margin-bottom:14px}.ribbon-days{direction:ltr!important}.ribbon-row{direction:ltr!important}.ribbon-day{direction:rtl}.ribbon-day .num{color:#fff!important}.ribbon-day .wd{color:#c0ccda!important}.ribbon-day.holiday .num,.ribbon-day.friday .num{color:#fff!important}
.calendar-panel{font-family:Vazirmatn,Tahoma,Arial,sans-serif}.weekdays,.days{direction:ltr!important}.weekdays div{font-weight:800;color:#d6e1ec;font-size:13px}.day{font-family:inherit;font-size:14px;color:#fff;background:#071b31}.day.holiday{background:#5b1e2e!important;border-color:#9d3e56!important;color:#fff}.day.friday{background:#332050!important;border-color:#68459c!important}.day.selected{background:linear-gradient(145deg,#f6b900,#ff7a00)!important;color:#111!important;border-color:#ffd66b!important;font-weight:900}
@media(max-width:1000px){.app{width:calc(100% - 24px)}.topbar{grid-template-columns:52px 52px minmax(180px,1fr) minmax(280px,2fr) 48px 48px}.hero-grid{grid-template-columns:160px minmax(0,1fr) 210px}.podium{gap:10px}.avatar{width:90px;height:90px}.stand{height:140px}.stand strong{font-size:16px}.stand b{font-size:24px}.hero-stat b{font-size:19px}.challenge-grid{grid-template-columns:1fr}}
@media(max-width:760px){.app{width:calc(100% - 16px);margin:8px auto 20px}.topbar{grid-template-columns:48px minmax(0,1fr) 48px 48px;grid-template-areas:"brand date menu more" "title title title title";min-height:0}.brand{grid-area:brand}.calendar-btn{grid-area:menu}.date-wrap{grid-area:date;align-items:flex-start}.topbar .title{grid-area:title;padding-top:5px}.topbar .icon-btn:last-child{grid-area:more}.outside-clock{font-size:13px}.date-block{min-width:0}.date-main{font-size:15px}.hero-grid{grid-template-columns:1fr}.daily-min{display:grid;grid-template-columns:1.2fr 1fr 1fr}.daily-min .threshold{min-height:110px}.podium{min-height:330px}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr)}.hero-stats h2{grid-column:1/-1}.hero-stat{display:block;text-align:center}.hero-stat b{display:block;margin-top:4px}.middle-grid{grid-template-columns:1fr}.best{order:2}.chart{order:1}.challenge-grid{grid-template-columns:1fr}.table-scroll{overflow-x:auto}}
@media(max-width:500px){.app{width:calc(100% - 10px)}.daily-min{grid-template-columns:1fr}.hero-stats{grid-template-columns:1fr}.topbar{grid-template-columns:44px minmax(0,1fr) 44px 44px}.brand img{width:44px}.podium{gap:5px;padding-left:8px;padding-right:8px}.avatar{width:68px;height:68px}.stand{height:118px}.stand strong{font-size:13px}.stand b{font-size:19px}.rank-badge{top:55px;width:34px;height:34px;font-size:16px}.number-one{width:90px;font-size:19px}.chart-wrap{height:240px}.trend-summary{gap:7px;font-size:10px}.table-card table{font-size:11px}}

/* ===== V17 visual fixes ===== */
.app{width:calc(100% - 44px);max-width:1240px;margin-left:auto;margin-right:auto}
.date-sub{font-family:Vazirmatn,Tahoma,Arial,sans-serif;font-weight:700}
.calendar-panel,.calendar-panel *{font-family:Vazirmatn,Tahoma,Arial,sans-serif}
.calendar-panel .day{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.calendar-panel .weekdays div{font-size:13px;font-weight:700}
.chart-wrap{position:relative;overflow:hidden!important}
.chart-wrap svg{overflow:hidden}
.chart .line{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.chart .area{stroke:none;pointer-events:none}
.chart .blue-area{fill:url(#blueFade)}.chart .purple-area{fill:url(#purpleFade)}.chart .green-area{fill:url(#greenFade)}.chart .yellow-area{fill:url(#yellowFade)}
.chart .blue-line{stroke:#278cff}.chart .purple-line{stroke:#a848ff}.chart .green-line{stroke:#35d47a}.chart .yellow-line{stroke:#ffb316}
.dynamic-marker,.marker{display:none!important}
.hover-point{stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 5px currentColor)}
.hover-point.blue-line{fill:#278cff}.hover-point.purple-line{fill:#a848ff}.hover-point.green-line{fill:#35d47a}.hover-point.yellow-line{fill:#ffb316}
.hero-stat span{display:flex;align-items:center;gap:5px}
@media(max-width:760px){.app{width:calc(100% - 20px)}}

/* V18 verification fixes */
.calendar-panel .day{font-family:Vazirmatn,Tahoma,Arial,sans-serif!important;font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;font-size:18px!important}
.calendar-panel .weekdays div{font-family:Vazirmatn,Tahoma,Arial,sans-serif!important}
.trend-hover-layer{position:absolute;inset:0;z-index:6;display:block;pointer-events:auto;background:transparent}
.trend-hover-layer button{display:none!important}
.chart-tip{z-index:8;pointer-events:none}
.chart-wrap svg{z-index:1;position:relative}
.chart .area{opacity:.16}

/* final responsive fixes */
.month-ribbon,.month-ribbon *{font-family:Vazirmatn,Tahoma,sans-serif}
.table-scroll{overflow-x:hidden!important;width:100%}
.table-scroll table{width:100%;table-layout:auto}
.table-card{overflow:hidden}
.first .stand,.gold-stand{min-height:180px;height:180px}
#bestFilter{font-family:Vazirmatn}
.today-cal{margin:8px auto;padding:10px 24px;border-radius:10px;border:1px solid #234666;background:#0b2848;color:white;font-family:Vazirmatn;cursor:pointer}
@media(max-width:900px){.table-scroll{overflow-x:hidden!important}.table-scroll table{font-size:12px}.podium-person{width:33%}.avatar{width:80px;height:80px}}

.filter-box{padding:14px;display:flex;gap:15px;align-items:center;margin-bottom:14px}.filter-box select{background:#081b31;color:white;border:1px solid #21466c;border-radius:8px;padding:8px;font-family:inherit}.group-results{display:flex;gap:12px;padding:14px}.group-card{flex:1;background:#071a30;border:1px solid #173b62;border-radius:12px;padding:15px;text-align:center}.group-card b{display:block;color:#ffd037;margin-top:8px}.group-tag{display:block;font-size:10px;color:#58b1ff;margin-top:3px}


/* v20 group filter + responsive */
.filter-box{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;margin-bottom:14px}
.group-picker{display:flex;align-items:center;gap:12px}
.group-picker select,.section-head select{background:#081a30;color:#fff;border:1px solid #234666;border-radius:10px;padding:8px 14px;font-family:Vazirmatn}

body.team-one .glass{border-color:#245fa3}
body.team-two .glass{border-color:#207d55}
body.team-three .glass{border-color:#6940a5}

.group-board .group-results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:15px}
.group-card{background:#091d34;border:1px solid #234666;border-radius:14px;padding:16px;text-align:center;display:flex;flex-direction:column;gap:8px}
.group-card b{font-size:20px}

@media(max-width:900px){
 .app{padding:10px}
 .topbar{grid-template-columns:1fr;min-height:auto;text-align:center}
 .hero-grid,.middle-grid{grid-template-columns:1fr}
 .podium{min-height:330px;gap:8px;padding:20px 8px 0}
 .avatar{width:80px;height:80px}
 .stand{height:120px}
 .group-results{grid-template-columns:1fr!important}
 .filter-box{flex-direction:column;gap:12px;align-items:stretch}
 .group-picker{justify-content:space-between}
 .table-card{overflow:hidden}
}
@media(max-width:520px){
 .title h1{font-size:20px}
 .podium-person{width:33%}
 .stand strong{font-size:14px}
 .stand b{font-size:20px}
}

body.team-one{background:#332900} body.team-two{background:#003b25} .group-picker{display:inline-flex;gap:8px;align-items:center}


body.group-one { background:#fff9dc; }
body.group-two { background:#e9f8e9; }

.merged-group {
 margin-top:10px;
}

.team-groups-mini {
 margin-top:12px;
 font-size:12px;
 line-height:2;
 opacity:.9;
}


/* =====================================================================
   V36 MASTER LAYOUT
   Desktop geometry rebuilt to match the supplied reference screenshot.
   One owner for layout rules; no stacked experimental overrides.
   ===================================================================== */

:root{
  --page-gap:10px;
  --card-radius:17px;
  --dock-h:70px;
}

html,body{
  width:100%;
  margin:0;
  overflow-x:hidden;
}

body{
  background:#020c1b;
}

/* Team themes: dark page tint, cards remain readable. */
body.team-one{
  background:#03101f!important;
}
body.team-two{
  background:#18070d!important;
}
body.team-one .glass{
  border-color:#245f96!important;
}
body.team-two .glass{
  border-color:#7c3046!important;
}

/* ---------- DESKTOP: matches the reference image ---------- */
@media (min-width:1200px){

  html,body{
    height:100%;
    min-height:100%;
    overflow:hidden!important;
  }

  .app{
    direction:rtl;
    width:calc(100vw - 20px)!important;
    max-width:none!important;
    height:calc(100vh - 10px)!important;
    margin:5px 10px!important;
    padding:0!important;

    display:grid!important;

    /* Right -> left because the page is RTL:
       summary | podium | daily target | chart | best today */
    grid-template-columns:
      minmax(175px,1.15fr)
      minmax(500px,3.50fr)
      minmax(150px,1fr)
      minmax(390px,2.72fr)
      minmax(210px,1.45fr)!important;

    /*
      Screenshot proportions:
      header ~15vh
      calendar ~10.5vh
      main row ~40vh
      challenges row ~20vh
      motivation row ~7vh
      + four gaps ~4vh
      = about 96.5vh
    */
    grid-template-rows:
      15vh
      10.5vh
      40vh
      20vh
      7vh!important;

    gap:1vh 10px!important;
    align-content:start!important;
    overflow:hidden!important;
  }

  .glass{
    min-width:0!important;
    min-height:0!important;
    border-radius:var(--card-radius)!important;
    margin:0!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  .hero-grid,
  .middle-grid{
    display:contents!important;
  }

  /* ===== Header ===== */
  .topbar{
    direction:ltr!important;
    grid-column:1/-1!important;
    grid-row:1!important;
    width:92.5vw!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    justify-self:center!important;
    align-self:stretch!important;
    margin:0!important;
    padding:9px 14px!important;

    display:grid!important;
    grid-template-columns:
      96px
      205px
      minmax(360px,1fr)
      190px
      50px
      60px!important;
    grid-template-areas:"tools group title date calendar brand"!important;
    align-items:center!important;
    gap:10px!important;
    overflow:hidden!important;
  }

  .topbar > *{
    direction:rtl;
    min-width:0;
  }

  .brand{
    grid-area:brand!important;
    width:56px!important;
    height:64px!important;
    justify-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .brand img{
    width:56px!important;
    height:64px!important;
    object-fit:contain!important;
  }

  .calendar-btn{
    grid-area:calendar!important;
    width:46px!important;
    height:46px!important;
    padding:0!important;
    font-size:22px!important;
    border-radius:11px!important;
    justify-self:center!important;
  }

  .date-wrap{
    grid-area:date!important;
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .date-block{
    width:100%!important;
    min-width:0!important;
    padding:8px 10px!important;
    border-radius:11px!important;
    text-align:center!important;
  }

  .date-main{
    font-size:17px!important;
    line-height:1.35!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  .date-sub{
    font-size:12px!important;
    line-height:1.25!important;
    font-weight:800!important;
  }

  .outside-clock{
    margin-top:3px!important;
    font-size:14px!important;
    line-height:1.15!important;
    font-weight:900!important;
  }

  .title{
    grid-area:title!important;
    text-align:center!important;
    min-width:0!important;
    padding:0 14px!important;
    overflow:hidden!important;
  }

  .title h1{
    margin:0!important;
    font-size:25px!important;
    line-height:1.35!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .title span{
    display:block!important;
    margin-top:4px!important;
    font-size:14px!important;
    line-height:1.35!important;
  }

  .header-group{
    grid-area:group!important;
    width:100%!important;
    height:52px!important;
    padding:6px 8px!important;
    display:grid!important;
    grid-template-columns:auto minmax(100px,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    white-space:nowrap!important;
    border-radius:11px!important;
    overflow:hidden!important;
  }

  .header-group span{
    font-size:14px!important;
    line-height:1.3!important;
    font-weight:900!important;
  }

  .header-group select{
    width:100%!important;
    min-width:0!important;
    height:37px!important;
    padding:4px 8px!important;
    font-size:14px!important;
    font-weight:800!important;
    border-radius:8px!important;
  }

  .header-tools{
    grid-area:tools!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
  }

  .header-tools .icon-btn{
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
    padding:0!important;
    font-size:21px!important;
    border-radius:10px!important;
  }

  /* ===== Calendar ribbon — independent, never behind another card ===== */
  .month-ribbon{
    grid-column:1/-1!important;
    grid-row:2!important;
    width:92.5vw!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    justify-self:center!important;
    align-self:stretch!important;
    margin:0!important;
    padding:7px 10px!important;
    overflow:hidden!important;
    position:relative!important;
    z-index:2!important;
  }

  .ribbon-head{
    height:24px!important;
    min-height:24px!important;
    margin:0 0 4px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }

  .ribbon-head > div{
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
  }

  .ribbon-head b{
    font-size:16px!important;
    line-height:24px!important;
  }

  .ribbon-head span{
    margin-right:8px!important;
    font-size:10px!important;
    line-height:24px!important;
  }

  .ribbon-days{
    width:100%!important;
    height:calc(100% - 28px)!important;
    min-height:0!important;
    display:block!important;
    overflow:hidden!important;
    padding:0!important;
    direction:ltr!important;
  }

  .ribbon-row{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(31,minmax(0,1fr))!important;
    gap:3px!important;
    direction:ltr!important;
    align-items:stretch!important;
  }

  .ribbon-day{
    width:100%!important;
    min-width:0!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:2px 1px!important;
    border-radius:7px!important;
    transform:none!important;
    overflow:hidden!important;
    direction:rtl!important;
  }

  .ribbon-day.today{
    transform:none!important;
  }

  .ribbon-day .num{
    font-size:11px!important;
    line-height:16px!important;
  }

  .ribbon-day .wd{
    margin-top:0!important;
    font-size:7px!important;
    line-height:10px!important;
  }

  /* ===== Main 5-column row ===== */
  .hero-stats{
    grid-column:1!important;
    grid-row:3!important;
    height:100%!important;
    padding:11px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    overflow:hidden!important;
  }

  .hero-stats h2{
    margin:0 0 2px!important;
    font-size:16px!important;
  }

  .hero-stat{
    min-height:0!important;
    padding:10px 9px!important;
    border-radius:11px!important;
  }

  .hero-stat span{
    font-size:11px!important;
  }

  .hero-stat b{
    font-size:21px!important;
    font-weight:900!important;
  }

  .team-groups-mini{
    margin-top:auto!important;
    padding-top:5px!important;
    font-size:10px!important;
    line-height:1.7!important;
  }

  .podium{
    grid-column:2!important;
    grid-row:3!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:12px 10px 0!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    gap:10px!important;
    overflow:hidden!important;
  }

  .podium-person{
    width:31%!important;
    max-width:31%!important;
    min-width:0!important;
  }

  .avatar{
    width:88px!important;
    height:88px!important;
  }

  .first .avatar{
    width:102px!important;
    height:102px!important;
  }

  .crown{
    font-size:26px!important;
    margin-bottom:-1px!important;
  }

  .stand{
    height:116px!important;
    min-height:116px!important;
    margin-top:-8px!important;
    padding:27px 6px 7px!important;
    border-radius:10px 10px 0 0!important;
  }

  .first .stand,
  .gold-stand{
    height:145px!important;
    min-height:145px!important;
    padding-top:33px!important;
  }

  .stand strong{
    font-size:15px!important;
  }

  .stand .name-group,
  .name-group{
    display:block!important;
    margin:3px 0!important;
    font-size:10px!important;
    color:#71b8ff!important;
  }

  .stand b{
    margin:3px 0!important;
    font-size:24px!important;
    line-height:1.25!important;
    font-weight:900!important;
  }

  .stand small{
    font-size:10px!important;
  }

  .rank-badge{
    top:68px!important;
    width:30px!important;
    height:30px!important;
    font-size:13px!important;
    border-radius:8px!important;
  }

  .number-one{
    width:76px!important;
    height:26px!important;
    bottom:-24px!important;
    font-size:14px!important;
  }

  .daily-min{
    grid-column:3!important;
    grid-row:3!important;
    height:100%!important;
    min-height:0!important;
    padding:10px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:8px!important;
    overflow:hidden!important;
  }

  .daily-min .threshold{
    min-height:108px!important;
    margin:0!important;
    padding:9px 5px!important;
    border-radius:11px!important;
  }

  .threshold span{
    font-size:23px!important;
  }

  .threshold label{
    font-size:14px!important;
    font-weight:900!important;
  }

  .threshold b{
    font-size:24px!important;
    font-weight:900!important;
  }

  .threshold small{
    font-size:9px!important;
  }

  .mini-goal{
    min-height:48px!important;
    padding:9px 7px!important;
    font-size:12px!important;
  }

  .mini-goal b{
    font-size:18px!important;
  }

  .chart{
    grid-column:4!important;
    grid-row:3!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding-bottom:5px!important;
    overflow:hidden!important;
  }

  .chart .section-head{
    padding:7px 8px 3px!important;
    gap:5px!important;
  }

  .chart .section-head h2{
    font-size:14px!important;
    white-space:nowrap!important;
  }

  .chart .section-head select{
    padding:4px 5px!important;
    font-size:10px!important;
  }

  .chart #trendPeriodLabel{
    font-size:9px!important;
  }

  .legend{
    min-height:22px!important;
    padding:0 7px!important;
    gap:8px!important;
    font-size:10px!important;
    flex-wrap:wrap!important;
  }

  .dot{
    width:7px!important;
    height:7px!important;
  }

  .trend-summary{
    margin:3px 7px!important;
    padding:4px 6px!important;
    gap:5px!important;
    font-size:9px!important;
  }

  .trend-summary span{
    font-size:9px!important;
  }

  .chart-wrap{
    height:calc(100% - 94px)!important;
    min-height:150px!important;
    padding:2px 8px!important;
    overflow:hidden!important;
  }

  .chart-wrap svg{
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }

  .chart-tip{
    min-width:110px!important;
    padding:6px!important;
    font-size:8px!important;
  }

  .xlabels{
    padding:0 8px 3px!important;
    font-size:8px!important;
  }

  .best{
    grid-column:5!important;
    grid-row:3!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding-bottom:4px!important;
    overflow:hidden!important;
  }

  .best .section-head{
    padding:7px!important;
  }

  .best .section-head h2{
    font-size:14px!important;
    white-space:nowrap!important;
  }

  .best .section-head select{
    padding:4px!important;
    font-size:10px!important;
  }

  .best-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:5px!important;
    padding:0 5px!important;
  }

  .best-card{
    min-height:92px!important;
    padding:6px 3px!important;
    border-radius:9px!important;
  }

  .best-card i{
    font-size:18px!important;
  }

  .best-card span{
    font-size:9px!important;
  }

  .best-card b{
    margin:4px 0 1px!important;
    font-size:11px!important;
  }

  .best-card .name-group{
    font-size:8px!important;
  }

  .best-card strong{
    font-size:18px!important;
  }

  .best-card small{
    font-size:8px!important;
  }

  .all-records{
    margin-top:3px!important;
    padding:4px!important;
    font-size:9px!important;
  }

  /* ===== Bottom section — exactly like reference ===== */
  .table-card{
    grid-column:1/4!important;
    grid-row:4/6!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    overflow:hidden!important;
  }

  .table-title{
    height:34px!important;
    padding:6px 10px!important;
    font-size:12px!important;
  }

  .table-scroll{
    width:100%!important;
    height:calc(100% - 34px)!important;
    overflow:hidden!important;
  }

  .table-scroll table{
    width:100%!important;
    min-width:0!important;
    height:100%!important;
    table-layout:fixed!important;
    font-size:10px!important;
  }

  .table-scroll th,
  .table-scroll td{
    padding:4px 2px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .table-scroll th{
    font-size:9px!important;
  }

  .table-scroll .name-col{
    width:104px!important;
  }

  .mini-avatar{
    width:24px!important;
    height:24px!important;
  }

  .person-name{
    gap:4px!important;
  }

  .group-tag{
    font-size:8px!important;
    line-height:1.1!important;
  }

  .rank{
    font-size:14px!important;
  }

  .today,
  .month{
    font-size:12px!important;
  }

  .level{
    padding:3px 4px!important;
    font-size:8px!important;
  }

  .task-codes{
    min-width:0!important;
  }

  .task-codes span{
    margin:1px!important;
    padding:2px 3px!important;
    font-size:7px!important;
  }

  .challenges{
    grid-column:4/6!important;
    grid-row:4!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .challenges .section-head{
    padding:6px 8px!important;
  }

  .challenges .section-head h2{
    font-size:12px!important;
  }

  .section-note{
    font-size:8px!important;
  }

  .challenge-badge{
    padding:3px 5px!important;
    font-size:8px!important;
  }

  .challenge-grid{
    height:calc(100% - 42px)!important;
    padding:0 6px 6px!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }

  .challenge-card{
    min-width:0!important;
    padding:6px!important;
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr) auto!important;
    gap:4px!important;
    align-content:center!important;
    border-radius:8px!important;
  }

  .challenge-icon{
    font-size:15px!important;
  }

  .challenge-card b{
    font-size:8px!important;
  }

  .challenge-card p{
    margin-top:1px!important;
    font-size:6.8px!important;
    line-height:1.35!important;
  }

  .challenge-card em{
    font-size:8px!important;
  }

  .motivation{
    grid-column:4/6!important;
    grid-row:5!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:6px 12px!important;
    overflow:hidden!important;
  }

  .motivation strong{
    font-size:11px!important;
  }

  .motivation p{
    margin:1px 0!important;
    font-size:8px!important;
  }

  .rocket,
  .trophy{
    font-size:19px!important;
  }

  /* The 5-icon dock stays available on mobile/tablet; hidden on wide desktop
     so the desktop can match the supplied reference exactly. */
  .bottom-dock{
    display:none!important;
  }
}


/* ---------- TABLET / SMALL BROWSER ---------- */
@media (min-width:761px) and (max-width:1199px){

  html,body{
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  body{
    padding-bottom:76px!important;
  }

  .app{
    width:calc(100% - 16px)!important;
    max-width:none!important;
    margin:8px auto 20px!important;
    padding:0!important;
    display:block!important;
  }

  .topbar{
    direction:ltr!important;
    width:100%!important;
    min-height:112px!important;
    margin:0 0 8px!important;
    padding:9px!important;
    display:grid!important;
    grid-template-columns:82px 170px minmax(250px,1fr) 158px 44px 52px!important;
    grid-template-areas:"tools group title date calendar brand"!important;
    gap:7px!important;
    align-items:center!important;
  }

  .topbar > *{direction:rtl}

  .title h1{
    font-size:20px!important;
    white-space:nowrap!important;
  }

  .title span{font-size:12px!important}
  .header-group span,
  .header-group select{font-size:12px!important}
  .date-main{font-size:15px!important}
  .outside-clock{font-size:12px!important}

  .month-ribbon{
    width:100%!important;
    height:auto!important;
    margin:0 0 8px!important;
    padding:7px 8px!important;
    overflow:hidden!important;
  }

  .ribbon-row{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(16,minmax(0,1fr))!important;
    gap:3px!important;
    min-width:0!important;
  }

  .ribbon-day{
    height:40px!important;
    min-width:0!important;
    width:100%!important;
    flex:none!important;
  }

  .hero-grid,
  .middle-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin-bottom:8px!important;
  }

  .hero-stats,
  .podium,
  .daily-min,
  .chart,
  .best,
  .table-card,
  .challenges,
  .motivation{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 8px!important;
  }

  .table-scroll{
    overflow-x:hidden!important;
  }

  .table-scroll table{
    width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
    font-size:9px!important;
  }

  .bottom-dock{
    display:grid!important;
    position:fixed;
    z-index:900;
    left:50%;
    bottom:6px;
    transform:translateX(-50%);
    width:min(650px,calc(100vw - 20px));
    height:64px;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:end;
    gap:2px;
    padding:5px 10px 4px;
    border-radius:22px;
    background:rgba(250,252,255,.98);
    border:1px solid rgba(200,209,220,.9);
    box-shadow:0 10px 32px rgba(0,0,0,.28);
    direction:ltr;
  }
}


/* ---------- MOBILE ---------- */
@media (max-width:760px){

  html,body{
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  body{
    padding-bottom:76px!important;
  }

  .app{
    width:calc(100% - 10px)!important;
    max-width:none!important;
    margin:5px auto 16px!important;
    padding:0!important;
    display:block!important;
  }

  .glass{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 8px!important;
    border-radius:13px!important;
  }

  .topbar{
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr) 52px!important;
    grid-template-areas:
      "brand date calendar"
      "title title title"
      "group group tools"!important;
    gap:8px!important;
    min-height:0!important;
    padding:9px!important;
  }

  .brand{grid-area:brand!important}
  .calendar-btn{grid-area:calendar!important}
  .date-wrap{grid-area:date!important}
  .title{grid-area:title!important}
  .header-group{grid-area:group!important}
  .header-tools{grid-area:tools!important}

  .title h1{
    font-size:19px!important;
    white-space:normal!important;
    line-height:1.45!important;
  }

  .title span{font-size:12px!important}

  .header-group{
    min-width:0!important;
    min-height:44px!important;
    padding:6px 8px!important;
    display:grid!important;
    grid-template-columns:auto minmax(90px,1fr)!important;
    gap:7px!important;
  }

  .header-group span,
  .header-group select{
    font-size:12px!important;
  }

  .header-group select{
    width:100%!important;
    min-width:0!important;
    height:34px!important;
  }

  .header-tools{
    display:flex!important;
    justify-content:flex-end!important;
    gap:5px!important;
  }

  .header-tools .icon-btn{
    width:36px!important;
    height:36px!important;
    font-size:18px!important;
  }

  .month-ribbon{
    overflow:hidden!important;
  }

  .ribbon-row{
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:3px!important;
    min-width:0!important;
    width:100%!important;
  }

  .ribbon-day{
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    flex:none!important;
  }

  .hero-grid,
  .middle-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .daily-min{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .hero-stats{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .podium{
    min-height:330px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .table-scroll{
    overflow-x:hidden!important;
  }

  .table-scroll table{
    width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
    font-size:8px!important;
  }

  .table-scroll th,
  .table-scroll td{
    padding:4px 1px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .challenge-grid{
    grid-template-columns:1fr!important;
  }

  .bottom-dock{
    display:grid!important;
    position:fixed;
    z-index:900;
    left:50%;
    bottom:4px;
    transform:translateX(-50%);
    width:calc(100vw - 10px);
    height:66px;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:end;
    gap:2px;
    padding:5px 4px 4px;
    border-radius:18px;
    background:rgba(250,252,255,.98);
    border:1px solid rgba(200,209,220,.9);
    box-shadow:0 10px 32px rgba(0,0,0,.28);
    direction:ltr;
  }
}


/* ---------- Shared bottom-dock controls ---------- */
.bottom-dock .dock-item{
  direction:rtl;
  appearance:none;
  border:0;
  background:transparent;
  color:#17191d;
  font-family:Vazirmatn,Tahoma,sans-serif;
  min-width:0;
  height:54px;
  padding:0 3px 2px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  cursor:pointer;
}

.dock-icon{
  width:31px;
  height:31px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111317;
  color:#fff;
}

.dock-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dock-label{
  display:block;
  max-width:100%;
  font-size:10px;
  line-height:1.1;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dock-item.active .dock-label{
  color:#174bbb;
}

.dock-plus{
  width:52px;
  height:52px;
  margin-top:-20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#5e77e8,#2946c8);
  color:#fff;
  font-size:38px;
  line-height:1;
  font-family:Arial,sans-serif;
  font-weight:300;
  border:4px solid #fff;
  box-shadow:0 7px 18px rgba(39,72,204,.30);
}


/* =====================================================================
   V37 — readability pass
   ===================================================================== */
@media (min-width:1200px){

  /* Give less vertical space to the ranking row and more to performance. */
  .app{
    grid-template-rows:
      15vh
      9vh
      36vh
      22vh
      8vh!important;
  }

  /* Calendar: cells are a little smaller, text is larger. */
  .month-ribbon{
    padding:6px 10px!important;
  }

  .ribbon-head{
    height:22px!important;
    min-height:22px!important;
    margin-bottom:3px!important;
  }

  .ribbon-head b{
    font-size:17px!important;
    line-height:22px!important;
  }

  .ribbon-head span{
    font-size:11px!important;
    line-height:22px!important;
  }

  .ribbon-days{
    height:calc(100% - 25px)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .ribbon-row{
    width:96%!important;
    height:38px!important;
    margin:0 auto!important;
    grid-template-columns:repeat(31,minmax(0,1fr))!important;
    gap:4px!important;
    align-items:center!important;
  }

  .ribbon-day{
    height:35px!important;
    min-height:35px!important;
    max-height:35px!important;
    padding:1px!important;
    border-radius:6px!important;
  }

  .ribbon-day .num{
    font-size:13px!important;
    line-height:17px!important;
    font-weight:900!important;
  }

  .ribbon-day .wd{
    font-size:8.5px!important;
    line-height:11px!important;
    font-weight:700!important;
  }

  /* Ranking/podium: slightly shorter and more compact. */
  .podium{
    padding-top:8px!important;
  }

  .avatar{
    width:78px!important;
    height:78px!important;
  }

  .first .avatar{
    width:90px!important;
    height:90px!important;
  }

  .stand{
    height:101px!important;
    min-height:101px!important;
    padding-top:24px!important;
  }

  .first .stand,
  .gold-stand{
    height:126px!important;
    min-height:126px!important;
    padding-top:29px!important;
  }

  .stand strong{
    font-size:15px!important;
  }

  .stand .name-group{
    font-size:10.5px!important;
  }

  .stand b{
    font-size:23px!important;
  }

  .stand small{
    font-size:10px!important;
  }

  .rank-badge{
    top:60px!important;
  }

  /* Performance table: more vertical room + much larger readable numbers. */
  .table-title{
    height:36px!important;
    padding:7px 11px!important;
    font-size:14px!important;
    font-weight:800!important;
  }

  .table-scroll{
    height:calc(100% - 36px)!important;
  }

  .table-scroll table{
    font-size:11.5px!important;
  }

  .table-scroll th{
    font-size:10.5px!important;
    font-weight:900!important;
  }

  .table-scroll th,
  .table-scroll td{
    padding:5px 2px!important;
    line-height:1.32!important;
  }

  .table-scroll .name-col{
    width:118px!important;
  }

  .mini-avatar{
    width:27px!important;
    height:27px!important;
  }

  .person-name{
    gap:5px!important;
    font-size:11px!important;
  }

  .group-tag{
    font-size:9.5px!important;
    margin-top:2px!important;
  }

  .rank{
    font-size:16px!important;
    font-weight:900!important;
  }

  .today{
    font-size:14px!important;
    font-weight:900!important;
  }

  .month{
    font-size:14px!important;
    font-weight:900!important;
  }

  .level{
    font-size:9.5px!important;
    padding:3px 5px!important;
  }

  .task-codes span{
    font-size:8.5px!important;
  }

  /* Best today: larger labels, names and metrics. */
  .best .section-head h2{
    font-size:16px!important;
  }

  .best .section-head select{
    font-size:11.5px!important;
  }

  .best-card{
    min-height:88px!important;
    padding:6px 4px!important;
  }

  .best-card i{
    font-size:20px!important;
  }

  .best-card span{
    font-size:10.5px!important;
  }

  .best-card b{
    font-size:13px!important;
    line-height:1.35!important;
  }

  .best-card .name-group{
    font-size:9.5px!important;
  }

  .best-card strong{
    font-size:21px!important;
    font-weight:900!important;
  }

  .best-card small{
    font-size:9.5px!important;
  }

  .all-records{
    font-size:10.5px!important;
  }

  /* Weekly/monthly challenges: increase all meaningful typography. */
  .challenges .section-head{
    padding:7px 9px!important;
  }

  .challenges .section-head h2{
    font-size:15px!important;
  }

  .section-note{
    font-size:9.5px!important;
  }

  .challenge-badge{
    font-size:9.5px!important;
    padding:4px 6px!important;
  }

  .challenge-grid{
    height:calc(100% - 48px)!important;
    gap:6px!important;
    padding:0 7px 7px!important;
  }

  .challenge-card{
    grid-template-columns:26px minmax(0,1fr) auto!important;
    gap:6px!important;
    padding:8px!important;
  }

  .challenge-icon{
    font-size:19px!important;
  }

  .challenge-card b{
    font-size:11.5px!important;
    line-height:1.4!important;
  }

  .challenge-card p{
    font-size:9.5px!important;
    line-height:1.55!important;
  }

  .challenge-card em{
    font-size:10.5px!important;
    font-weight:900!important;
  }

  /* Motivation: bigger and easier to read. */
  .motivation{
    padding:8px 18px!important;
  }

  .motivation-copy{
    min-width:0;
    flex:1;
    text-align:center;
    padding:0 10px;
  }

  .motivation strong{
    display:block;
    font-size:16px!important;
    line-height:1.55!important;
    font-weight:900!important;
    color:#63f19b;
    transition:opacity .35s ease, transform .35s ease;
  }

  .motivation p{
    margin:3px 0 0!important;
    font-size:11px!important;
    line-height:1.45!important;
    transition:opacity .35s ease;
  }

  .motivation.is-changing strong,
  .motivation.is-changing p{
    opacity:.15;
    transform:translateY(2px);
  }

  .rocket,
  .trophy{
    font-size:25px!important;
  }
}

/* Keep the improved typography on smaller screens too. */
@media (max-width:1199px){
  .best .section-head h2{font-size:16px!important}
  .best-card span{font-size:11px!important}
  .best-card b{font-size:14px!important}
  .best-card strong{font-size:21px!important}
  .challenge-card b{font-size:12px!important}
  .challenge-card p{font-size:10.5px!important;line-height:1.55!important}
  .motivation strong{font-size:16px!important;line-height:1.55!important}
  .motivation p{font-size:11px!important}
}


/* =====================================================================
   V38 — tighter header, stronger readability, dock restored with emojis
   ===================================================================== */

@media (min-width:1200px){
  /* Make the title/header row shorter vertically and give the saved space
     to the data sections below. */
  .app{
    grid-template-rows:
      12.8vh
      8.8vh
      35.2vh
      24vh
      8.2vh!important;
    height:calc(100vh - 6px)!important;
  }

  .topbar{
    height:100%!important;
    min-height:0!important;
    padding:7px 14px!important;
  }

  .title h1{
    font-size:24px!important;
    line-height:1.28!important;
  }

  .title span{
    font-size:13px!important;
    margin-top:2px!important;
  }

  .date-main{font-size:16px!important}
  .date-sub{font-size:11px!important}
  .outside-clock{font-size:13px!important}
  .header-group{
    height:48px!important;
    padding:5px 8px!important;
  }
  .header-group span,
  .header-group select{
    font-size:13px!important;
  }

  /* Make the "performance on date..." title more prominent. */
  .table-title{
    height:38px!important;
    padding:7px 12px!important;
    font-size:15px!important;
    font-weight:900!important;
  }

  /* Shorten the ranking area a bit further to free space. */
  .podium{
    padding-top:6px!important;
  }
  .stand{
    height:96px!important;
    min-height:96px!important;
  }
  .first .stand,
  .gold-stand{
    height:120px!important;
    min-height:120px!important;
  }
  .avatar{
    width:74px!important;
    height:74px!important;
  }
  .first .avatar{
    width:86px!important;
    height:86px!important;
  }
  .stand strong{font-size:14px!important}
  .stand b{font-size:22px!important}
  .stand small{font-size:10px!important}
  .stand .name-group{font-size:10px!important}
  .rank-badge{top:58px!important}

  /* Give the marketing-performance table more room and larger numbers. */
  .table-card{
    grid-column:1/4!important;
    grid-row:4/6!important;
  }
  .table-scroll{
    height:calc(100% - 38px)!important;
  }
  .table-scroll table{
    font-size:12.5px!important;
  }
  .table-scroll th{
    font-size:11px!important;
    font-weight:900!important;
  }
  .table-scroll th,
  .table-scroll td{
    padding:5px 3px!important;
    line-height:1.35!important;
  }
  .table-scroll .name-col{
    width:128px!important;
  }
  .person-name{
    font-size:12px!important;
    gap:6px!important;
  }
  .mini-avatar{
    width:28px!important;
    height:28px!important;
  }
  .group-tag{
    font-size:10px!important;
  }
  .rank{
    font-size:17px!important;
  }
  .today,
  .month{
    font-size:15px!important;
  }
  .level{
    font-size:10px!important;
    padding:3px 6px!important;
  }

  /* Enlarge the "same day summary" in the chart box. */
  .trend-summary{
    margin:4px 8px!important;
    padding:6px 8px!important;
    font-size:10.5px!important;
    gap:7px!important;
  }
  .trend-summary span{
    font-size:10.5px!important;
    line-height:1.4!important;
  }
  .chart-tip{
    font-size:9px!important;
  }

  /* Larger best-today fonts. */
  .best .section-head h2{
    font-size:17px!important;
  }
  .best-card span{
    font-size:11px!important;
  }
  .best-card b{
    font-size:14px!important;
  }
  .best-card .name-group{
    font-size:10px!important;
  }
  .best-card strong{
    font-size:22px!important;
  }
  .best-card small{
    font-size:10px!important;
  }

  /* Weekly/monthly challenges: larger fonts, cards touch the sides more. */
  .challenges .section-head{
    padding:7px 6px 6px!important;
  }
  .challenges .section-head h2{
    font-size:16px!important;
  }
  .section-note{
    font-size:10px!important;
  }
  .challenge-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    padding:0 2px 4px!important;
    height:calc(100% - 44px)!important;
  }
  .challenge-card{
    padding:9px 8px!important;
    gap:7px!important;
    border-radius:9px!important;
  }
  .challenge-icon{
    font-size:20px!important;
  }
  .challenge-card b{
    font-size:12.5px!important;
    line-height:1.45!important;
  }
  .challenge-card p{
    font-size:10.2px!important;
    line-height:1.58!important;
  }
  .challenge-card em{
    font-size:11px!important;
  }

  /* Motivation remains prominent. */
  .motivation strong{
    font-size:17px!important;
  }
  .motivation p{
    font-size:11.5px!important;
  }

  /* Restore the 5 bottom buttons in desktop too. */
  body{
    padding-bottom:78px!important;
  }

  .bottom-dock{
    display:grid!important;
    position:fixed;
    z-index:900;
    left:50%;
    bottom:6px;
    transform:translateX(-50%);
    width:min(720px,calc(100vw - 26px));
    height:66px;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:end;
    gap:2px;
    padding:5px 10px 4px;
    border-radius:22px;
    background:rgba(250,252,255,.98);
    border:1px solid rgba(200,209,220,.9);
    box-shadow:0 10px 32px rgba(0,0,0,.28);
    direction:ltr;
  }
}

/* Shared emoji dock styling */
.dock-item{
  direction:rtl;
}
.dock-emoji{
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111317;
  color:#fff;
  font-size:19px;
  line-height:1;
}
.dock-item.active .dock-emoji{
  background:#174bbb;
}
.dock-add .dock-plus{
  width:52px;
  height:52px;
  margin-top:-20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#5e77e8,#2946c8);
  color:#fff;
  font-size:27px;
  line-height:1;
  border:4px solid #fff;
  box-shadow:0 7px 18px rgba(39,72,204,.30);
}
@media (max-width:1199px){
  .dock-emoji{font-size:18px}
  .best-card span{font-size:11px!important}
  .best-card b{font-size:14px!important}
  .best-card strong{font-size:22px!important}
  .challenge-card b{font-size:12px!important}
  .challenge-card p{font-size:10.5px!important}
  .motivation strong{font-size:17px!important}
}


/* ================= V40 stable correction =================
   برگشت به چیدمان پایدار V38 + اصلاحات محدود
   ======================================================== */

@media (min-width:1200px){

  /* Keep original balanced dashboard proportions */
  .app{
    grid-template-rows:
      12.8vh
      8.8vh
      35.2vh
      24vh
      8.2vh!important;
    gap:.9vh 10px!important;
  }

  /* Header compact but not broken */
  .topbar{
    padding:7px 14px!important;
  }

  .title h1{
    font-size:24px!important;
  }

  .title span{
    font-size:13px!important;
  }

  /* Calendar: only remove subtitle, keep original layout */
  .ribbon-head span{
    display:none!important;
  }

  .ribbon-day{
    height:34px!important;
    min-height:34px!important;
  }

  .ribbon-day .num{
    font-size:13px!important;
  }

  .ribbon-day .wd{
    font-size:8px!important;
  }

  /* Best today: smaller cards to create room */
  .best-card{
    min-height:82px!important;
    padding:5px!important;
  }

  .best-card span{
    font-size:10px!important;
  }

  .best-card strong{
    font-size:19px!important;
  }

  /* Performance table gets more readable space */
  .table-title{
    font-size:15px!important;
  }

  .table-scroll table{
    font-size:12px!important;
  }

  .table-scroll th{
    font-size:11px!important;
  }

  .table-scroll td,
  .table-scroll th{
    padding:5px 3px!important;
  }

  /* Chart summary */
  .trend-summary{
    padding:6px 8px!important;
  }

  .trend-summary span{
    font-size:11px!important;
  }

  /* Challenges readable without overflowing */
  .challenge-card{
    padding:8px!important;
  }

  .challenge-card b{
    font-size:12.5px!important;
  }

  .challenge-card p{
    font-size:10px!important;
  }

  /* Bottom emoji circles */
  .dock-emoji{
    background:#d9dde3!important;
    color:#333!important;
  }
}


/* ================= V41 requested refinements ================= */

@media (min-width:1200px){

/* Header title month */
.title-month{
  display:block!important;
  margin-top:2px!important;
  font-size:12px!important;
  font-weight:800!important;
}

/* Calendar only: no extra labels, bigger numbers */
.month-ribbon .ribbon-head span{
  display:none!important;
}

.month-ribbon .ribbon-day{
  height:35px!important;
  min-height:35px!important;
}

.month-ribbon .ribbon-day .num{
  font-size:14px!important;
  font-weight:900!important;
}

.month-ribbon .ribbon-day .wd{
  font-size:8.5px!important;
}

/* Podium: slightly taller stands and more readable names */
.podium{
  padding-bottom:4px!important;
}

.stand{
  height:104px!important;
  min-height:104px!important;
}

.first .stand,
.gold-stand{
  height:130px!important;
  min-height:130px!important;
}

.stand .name-group{
  font-size:10.5px!important;
}

.stand strong{
  font-size:14px!important;
}

.stand b{
  font-size:22px!important;
}

/* Make podium box a little narrower */
.podium{
  transform:scaleX(.97);
}

/* Best today slightly smaller */
.best-card span{
  font-size:9px!important;
}

.best-card b{
  font-size:11.5px!important;
}

.best-card strong{
  font-size:17px!important;
}

/* Challenges larger typography */
.challenge-card b{
  font-size:13.5px!important;
}

.challenge-card p{
  font-size:11px!important;
}

.challenge-card em{
  font-size:12px!important;
}

/* Bottom add button same gray as others */
.dock-add .dock-plus{
  background:#d9dde3!important;
  color:#333!important;
  box-shadow:none!important;
}
}



/* =====================================================================
   V43 — stable rebuild from V41
   هدف: حفظ چیدمان سالم + اعمال درخواست‌ها بدون به‌هم‌ریختگی
   ===================================================================== */

@media (min-width:1200px){

  /* منوی پایین دیگر روی محتوا نمی‌افتد:
     خود داشبورد واقعاً بالای Dock تمام می‌شود. */
  body{
    padding-bottom:0!important;
    overflow:hidden!important;
  }

  .app{
    height:calc(100vh - 78px)!important;
    grid-template-rows:
      11%
      8%
      37%
      28%
      12%!important;
    gap:7px 10px!important;
    align-content:stretch!important;
    overflow:hidden!important;
  }

  /* باکس بالایی کمی کوتاه‌تر، بدون دستکاری خطرناک */
  .topbar{
    height:100%!important;
    min-height:0!important;
    padding:5px 14px!important;
  }

  .title h1{
    font-size:23px!important;
    line-height:1.25!important;
  }

  .title span{
    font-size:12.5px!important;
    margin-top:1px!important;
  }

  .title-month{
    display:block!important;
    margin-top:2px!important;
    font-size:12px!important;
    line-height:1.15!important;
    font-weight:800!important;
    color:#d5e4f6!important;
  }

  .date-main{font-size:15.5px!important}
  .date-sub{font-size:10.5px!important}
  .outside-clock{font-size:12.5px!important}

  .header-group{
    height:45px!important;
    padding:5px 7px!important;
  }

  .header-group span,
  .header-group select{
    font-size:12.5px!important;
  }

  .header-tools .icon-btn,
  .calendar-btn{
    width:40px!important;
    height:40px!important;
    font-size:20px!important;
  }

  /* تقویم:
     عنوان مرداد/سال در DOM می‌ماند ولی دیده نمی‌شود تا renderRibbon خراب نشود. */
  .month-ribbon{
    height:100%!important;
    min-height:0!important;
    padding:5px 10px!important;
    overflow:hidden!important;
  }

  .month-ribbon .ribbon-head{
    display:none!important;
  }

  .month-ribbon .ribbon-days{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  .month-ribbon .ribbon-row{
    width:96%!important;
    height:38px!important;
    margin:0 auto!important;
    grid-template-columns:repeat(31,minmax(0,1fr))!important;
    gap:4px!important;
    align-items:center!important;
  }

  .month-ribbon .ribbon-day{
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    margin:0!important;
    padding:1px!important;
    border-radius:6px!important;
  }

  .month-ribbon .ribbon-day .num{
    font-size:15px!important;
    line-height:18px!important;
    font-weight:900!important;
  }

  .month-ribbon .ribbon-day .wd{
    font-size:9px!important;
    line-height:11px!important;
    font-weight:800!important;
  }

  /* رتبه‌بندی:
     عرض داخلی جمع‌تر می‌شود اما ستون Grid دست‌نخورده می‌ماند،
     بنابراین جدول عملکرد قربانی نمی‌شود. */
  .podium{
    padding:5px 24px 0!important;
    gap:8px!important;
    transform:none!important;
  }

  .podium-person{
    width:29%!important;
    max-width:29%!important;
  }

  .avatar{
    width:74px!important;
    height:74px!important;
  }

  .first .avatar{
    width:86px!important;
    height:86px!important;
  }

  .stand{
    height:108px!important;
    min-height:108px!important;
    padding:24px 5px 7px!important;
  }

  .first .stand,
  .gold-stand{
    height:136px!important;
    min-height:136px!important;
    padding-top:29px!important;
  }

  .stand strong{
    font-size:14px!important;
    line-height:1.3!important;
  }

  .stand .name-group{
    font-size:10.5px!important;
    line-height:1.25!important;
    margin:2px 0!important;
  }

  .stand b{
    font-size:22px!important;
    line-height:1.2!important;
    margin:3px 0!important;
  }

  .stand small{
    font-size:9.5px!important;
    line-height:1.25!important;
  }

  .rank-badge{
    top:58px!important;
  }

  /* بهترین‌های امروز فقط کمی کوچک‌تر؛ نه بیش از حد */
  .best .section-head h2{
    font-size:15px!important;
  }

  .best-card{
    min-height:78px!important;
    padding:5px 3px!important;
  }

  .best-card i{font-size:17px!important}
  .best-card span{font-size:9.2px!important}
  .best-card b{font-size:11.5px!important}
  .best-card .name-group{font-size:8.8px!important}
  .best-card strong{font-size:17.5px!important}
  .best-card small{font-size:8.8px!important}
  .all-records{font-size:9.5px!important}

  /* عملکرد بازاریابان خواناتر */
  .table-title{
    height:38px!important;
    padding:7px 11px!important;
    font-size:15.5px!important;
    font-weight:900!important;
  }

  .table-scroll{
    height:calc(100% - 38px)!important;
  }

  .table-scroll table{
    font-size:12.5px!important;
  }

  .table-scroll th{
    font-size:11px!important;
  }

  .table-scroll th,
  .table-scroll td{
    padding:5px 3px!important;
    line-height:1.3!important;
  }

  .rank{font-size:17px!important}
  .today,.month{font-size:15px!important}
  .person-name{font-size:12px!important}
  .group-tag{font-size:9.5px!important}

  /* چالش‌ها:
     Grid اصلی سه‌ستونه حفظ می‌شود؛ فقط تایپوگرافی و فضا بهتر می‌شود. */
  .challenges .section-head{
    padding:6px 6px 5px!important;
  }

  .challenges .section-head h2{
    font-size:16px!important;
  }

  .section-note{
    font-size:9.5px!important;
  }

  .challenge-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    padding:0 3px 5px!important;
    height:calc(100% - 42px)!important;
  }

  .challenge-card{
    display:grid!important;
    grid-template-columns:24px minmax(0,1fr) auto!important;
    align-items:center!important;
    text-align:right!important;
    gap:5px!important;
    padding:7px 6px!important;
    border-radius:8px!important;
    min-width:0!important;
  }

  .challenge-icon{
    font-size:19px!important;
  }

  .challenge-card b{
    font-size:12.5px!important;
    line-height:1.4!important;
  }

  .challenge-card p{
    font-size:10px!important;
    line-height:1.5!important;
    margin:2px 0!important;
  }

  .challenge-card em{
    font-size:11px!important;
    font-weight:900!important;
  }

  /* Dock: کاملاً خارج از محدوده محتوا و همیشه روی لایه خودش */
  .bottom-dock{
    display:grid!important;
    z-index:9999!important;
    bottom:6px!important;
  }

  .dock-emoji{
    background:#d9dde3!important;
    color:#333!important;
  }

  .dock-item.active .dock-emoji{
    background:#cfd4da!important;
    color:#20242a!important;
  }

  .dock-add .dock-plus{
    background:#d9dde3!important;
    color:#333!important;
    box-shadow:none!important;
  }
}

/* موبایل و تبلت: منو روی محتوا نیفتد، ولی صفحه اجازه اسکرول طبیعی دارد */
@media (max-width:1199px){
  body{
    padding-bottom:82px!important;
  }

  .bottom-dock{
    z-index:9999!important;
  }

  .dock-emoji,
  .dock-add .dock-plus{
    background:#d9dde3!important;
    color:#333!important;
  }
}


/* =====================================================================
   V44 — swap Team Summary and Best Today + larger challenge typography
   ===================================================================== */

@media (min-width:1200px){

  /* جای دو باکس عوض شد */
  .hero-stats{
    grid-column:5!important;
    grid-row:3!important;
  }

  .best{
    grid-column:1!important;
    grid-row:3!important;
  }

  /* خلاصه تیم در جای جدید کمی جمع‌وجورتر تا کامل دیده شود */
  .hero-stats{
    padding:9px!important;
    gap:7px!important;
  }

  .hero-stats h2{
    font-size:15px!important;
  }

  .hero-stat{
    padding:9px 7px!important;
  }

  .hero-stat span{
    font-size:10.5px!important;
  }

  .hero-stat b{
    font-size:19px!important;
  }

  .team-groups-mini{
    font-size:9.5px!important;
    line-height:1.65!important;
  }

  /* بهترین‌های امروز در جای خلاصه تیم فشرده و خوانا */
  .best{
    padding-bottom:4px!important;
  }

  .best .section-head{
    padding:6px 6px 5px!important;
  }

  .best .section-head h2{
    font-size:14px!important;
  }

  .best .section-head select{
    font-size:9px!important;
    padding:3px 4px!important;
  }

  .best-grid{
    gap:4px!important;
    padding:0 4px!important;
  }

  .best-card{
    min-height:72px!important;
    padding:4px 2px!important;
  }

  .best-card i{
    font-size:15px!important;
  }

  .best-card span{
    font-size:8.5px!important;
  }

  .best-card b{
    font-size:10.5px!important;
    margin:2px 0!important;
  }

  .best-card .name-group{
    font-size:8px!important;
  }

  .best-card strong{
    font-size:16px!important;
  }

  .best-card small{
    font-size:8px!important;
  }

  .all-records{
    font-size:9px!important;
    padding:3px!important;
  }

  /* چالش‌های هفتگی و ماهانه:
     متن‌ها بزرگ‌تر و با استفاده بهتر از کل چهارچوب */
  .challenges .section-head{
    padding:6px 5px 5px!important;
  }

  .challenges .section-head h2{
    font-size:17px!important;
  }

  .section-note{
    font-size:10px!important;
  }

  .challenge-badge{
    font-size:10.5px!important;
    padding:4px 6px!important;
  }

  .challenge-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    padding:0 2px 5px!important;
    height:calc(100% - 43px)!important;
  }

  .challenge-card{
    min-width:0!important;
    padding:9px 7px!important;
    gap:6px!important;
    grid-template-columns:26px minmax(0,1fr) auto!important;
    align-items:center!important;
  }

  .challenge-icon{
    font-size:21px!important;
  }

  .challenge-card b{
    font-size:13.5px!important;
    line-height:1.45!important;
  }

  .challenge-card p{
    font-size:11px!important;
    line-height:1.55!important;
    margin:2px 0!important;
  }

  .challenge-card em{
    font-size:12px!important;
    font-weight:900!important;
  }
}

/* در صفحه‌های کوچک هم ترتیب دیداری جابه‌جا می‌شود */
@media (max-width:1199px){
  .hero-stats{order:5!important}
  .best{order:1!important}

  .challenge-card b{
    font-size:13px!important;
  }

  .challenge-card p{
    font-size:11px!important;
    line-height:1.55!important;
  }
}


/* =====================================================================
   V45 — mobile flow + content-aware performance-table widths
   Desktop layout intentionally left unchanged.
   ===================================================================== */

@media (max-width:760px){

  /* Mobile reading order:
     1 header
     2 calendar
     3 podium
     4 marketing-performance table
     5 best today
     6 minimum/target/reward
     then remaining secondary boxes
  */
  .app{
    display:flex!important;
    flex-direction:column!important;
    width:calc(100% - 10px)!important;
    max-width:none!important;
    margin:5px auto 16px!important;
    padding:0!important;
    gap:8px!important;
    overflow:visible!important;
  }

  .hero-grid,
  .middle-grid{
    display:contents!important;
  }

  .topbar{order:1!important}
  .month-ribbon{order:2!important}
  .podium{order:3!important}
  .table-card{order:4!important}
  .best{order:5!important}
  .daily-min{order:6!important}
  .hero-stats{order:7!important}
  .chart{order:8!important}
  .challenges{order:9!important}
  .motivation{order:10!important}

  /* Podium directly beneath calendar, full width and readable */
  .podium{
    width:100%!important;
    max-width:100%!important;
    min-height:320px!important;
    margin:0!important;
    padding:12px 7px 0!important;
    gap:5px!important;
  }

  .podium-person{
    width:31%!important;
    max-width:31%!important;
    min-width:0!important;
  }

  .avatar{
    width:66px!important;
    height:66px!important;
  }

  .first .avatar{
    width:76px!important;
    height:76px!important;
  }

  .stand{
    height:108px!important;
    min-height:108px!important;
    padding:23px 3px 6px!important;
  }

  .first .stand,
  .gold-stand{
    height:132px!important;
    min-height:132px!important;
    padding-top:27px!important;
  }

  .stand strong{
    font-size:12px!important;
  }

  .stand .name-group{
    font-size:9px!important;
  }

  .stand b{
    font-size:18px!important;
  }

  .stand small{
    font-size:8.5px!important;
  }

  /* Performance table directly after podium */
  .table-card{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    overflow:hidden!important;
  }

  .table-title{
    font-size:13px!important;
    padding:7px 8px!important;
    min-height:36px!important;
  }

  .table-scroll{
    width:100%!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
  }

  .table-scroll table{
    width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
    font-size:7.2px!important;
  }

  /*
    Variable column widths for small screens:
    long text/value columns are wider;
    single-digit / short-count columns are narrower.
    Percentages total 100%.
  */
  .mobile-col-layout .c-rank{width:3%!important}
  .mobile-col-layout .c-name{width:12%!important}
  .mobile-col-layout .c-short{width:4%!important}
  .mobile-col-layout .c-order{width:3%!important}
  .mobile-col-layout .c-code{width:8%!important}
  .mobile-col-layout .c-medium{width:5%!important}
  .mobile-col-layout .c-today{width:7%!important}
  .mobile-col-layout .c-month{width:8%!important}
  .mobile-col-layout .c-level{width:6%!important}
  .mobile-col-layout .c-reward{width:8%!important}
  .mobile-col-layout .c-note{width:11%!important}

  .table-scroll th,
  .table-scroll td{
    padding:4px 1px!important;
    white-space:normal!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    word-break:break-word!important;
    overflow-wrap:anywhere!important;
    line-height:1.3!important;
    vertical-align:middle!important;
  }

  .table-scroll th{
    font-size:6.9px!important;
    font-weight:900!important;
  }

  .table-scroll .name-col{
    width:auto!important;
  }

  .person-name{
    display:flex!important;
    align-items:center!important;
    gap:2px!important;
    min-width:0!important;
    font-size:7.5px!important;
  }

  .person-name > span{
    min-width:0!important;
    overflow:hidden!important;
  }

  .mini-avatar{
    width:18px!important;
    height:18px!important;
    flex:0 0 18px!important;
  }

  .group-tag{
    display:block!important;
    font-size:6.4px!important;
    line-height:1.2!important;
    margin-top:1px!important;
  }

  .rank{
    font-size:9px!important;
  }

  .today,
  .month{
    font-size:8.5px!important;
    font-weight:900!important;
  }

  .progress{
    height:3px!important;
    margin-top:2px!important;
  }

  .level{
    display:inline-block!important;
    max-width:100%!important;
    padding:2px 2px!important;
    font-size:6px!important;
    white-space:normal!important;
    line-height:1.15!important;
  }

  .task-codes{
    white-space:normal!important;
  }

  .task-codes span{
    display:block!important;
    margin:1px 0!important;
    padding:1px!important;
    font-size:5.8px!important;
    line-height:1.15!important;
  }

  /* Requested order peers are full width */
  .best,
  .daily-min,
  .hero-stats,
  .chart,
  .challenges,
  .motivation{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
}

/* Very narrow phones: preserve the same order and relative width logic */
@media (max-width:420px){
  .table-scroll table{
    font-size:6.7px!important;
  }

  .table-scroll th{
    font-size:6.4px!important;
  }

  .mini-avatar{
    width:16px!important;
    height:16px!important;
    flex-basis:16px!important;
  }

  .person-name{
    font-size:7px!important;
  }

  .group-tag{
    font-size:6px!important;
  }
}


/* ================= V46 real Excel data ================= */
.ribbon-day.no-data{
  opacity:.42!important;
  filter:saturate(.55);
}
.ribbon-day.no-data:hover{
  opacity:.72!important;
}
.avatar img,
.mini-avatar{
  object-position:center!important;
}
.order-count{
  font-weight:800;
}
@media (max-width:760px){
  /* V46 table has one fewer short column after removing visit */
  .mobile-col-layout .c-rank{width:3%!important}
  .mobile-col-layout .c-name{width:13%!important}
  .mobile-col-layout .c-short{width:4.4%!important}
  .mobile-col-layout .c-order{width:5%!important}
  .mobile-col-layout .c-code{width:9%!important}
  .mobile-col-layout .c-medium{width:5.5%!important}
  .mobile-col-layout .c-today{width:7.5%!important}
  .mobile-col-layout .c-month{width:9%!important}
  .mobile-col-layout .c-level{width:7%!important}
  .mobile-col-layout .c-reward{width:7%!important}
  .mobile-col-layout .c-note{width:8%!important}
}


/* =====================================================================
   V47 — real 7-person roster, supervisor title, visible 7-row table
   ===================================================================== */

.role-tag{
  color:#ffd56a!important;
  font-weight:900!important;
}

/* Medal-style ranking rows */
.table-scroll tbody tr.rank-1 td{
  background:
    linear-gradient(90deg,rgba(168,118,18,.28),rgba(56,42,15,.42))!important;
  border-bottom-color:rgba(255,211,82,.50)!important;
}
.table-scroll tbody tr.rank-2 td{
  background:
    linear-gradient(90deg,rgba(150,165,181,.23),rgba(47,58,70,.42))!important;
  border-bottom-color:rgba(220,231,243,.45)!important;
}
.table-scroll tbody tr.rank-3 td{
  background:
    linear-gradient(90deg,rgba(173,91,40,.25),rgba(62,35,24,.43))!important;
  border-bottom-color:rgba(224,143,88,.48)!important;
}

.table-scroll tbody tr.rank-1 .rank{
  color:#ffd54a!important;
  text-shadow:0 0 10px rgba(255,208,56,.28);
}
.table-scroll tbody tr.rank-2 .rank{
  color:#e0e8f0!important;
}
.table-scroll tbody tr.rank-3 .rank{
  color:#e99a62!important;
}

.table-scroll tbody tr.rank-1:hover td{
  background:linear-gradient(90deg,rgba(190,137,27,.36),rgba(71,53,18,.50))!important;
}
.table-scroll tbody tr.rank-2:hover td{
  background:linear-gradient(90deg,rgba(167,181,196,.30),rgba(54,66,79,.50))!important;
}
.table-scroll tbody tr.rank-3:hover td{
  background:linear-gradient(90deg,rgba(191,103,48,.32),rgba(75,42,29,.51))!important;
}

@media (min-width:1200px){
  /* All 7 people must be visible without an internal vertical scroll. */
  .table-card{
    min-height:272px!important;
  }

  .table-scroll{
    height:calc(100% - 38px)!important;
    overflow-y:hidden!important;
  }

  .table-scroll table{
    height:100%!important;
  }

  .table-scroll thead tr{
    height:30px!important;
  }

  .table-scroll tbody tr{
    height:29px!important;
  }

  .table-scroll th{
    padding:3px 2px!important;
    line-height:1.2!important;
  }

  .table-scroll td{
    padding:3px 2px!important;
    line-height:1.18!important;
  }

  .mini-avatar{
    width:24px!important;
    height:24px!important;
  }

  .person-name{
    gap:4px!important;
    font-size:11.5px!important;
  }

  .group-tag{
    margin-top:1px!important;
    font-size:8.8px!important;
    line-height:1.1!important;
  }

  .rank{
    font-size:16px!important;
  }

  .today,
  .month{
    font-size:14px!important;
  }

  .level{
    font-size:9px!important;
    padding:2px 4px!important;
  }

  .task-codes span{
    padding:1px 3px!important;
    margin:1px!important;
    font-size:7.8px!important;
  }
}

/* Mobile already grows vertically; preserve all 7 rows and medal colors. */
@media (max-width:760px){
  .table-scroll tbody tr{
    min-height:30px!important;
  }

  .role-tag{
    font-size:6.3px!important;
  }
}


/* =====================================================================
   V48 — wider trend chart + team summary beside challenges/motivation
   ===================================================================== */

@media (min-width:1200px){

  /* Free the whole left side of the main row for the trend chart. */
  .chart{
    grid-column:4/6!important;
    grid-row:3!important;
    width:100%!important;
  }

  /* Lower-left stack:
     challenges + motivation on the wider column,
     team summary beside both on the outer column. */
  .challenges{
    grid-column:4!important;
    grid-row:4!important;
  }

  .motivation{
    grid-column:4!important;
    grid-row:5!important;
  }

  .hero-stats{
    grid-column:5!important;
    grid-row:4/6!important;
    width:100%!important;
    height:100%!important;
    align-self:stretch!important;
  }

  .hero-stats h2{
    font-size:16px!important;
  }

  .hero-stat{
    padding:9px 7px!important;
  }

  .hero-stat span{
    font-size:10.5px!important;
  }

  .hero-stat b{
    font-size:19px!important;
  }

  /* Bigger chart typography after gaining horizontal room. */
  .chart .section-head{
    padding:7px 10px 3px!important;
  }

  .chart .section-head h2{
    font-size:16px!important;
  }

  .chart .section-head select{
    font-size:10.5px!important;
  }

  .legend{
    padding:0 10px!important;
    font-size:10.5px!important;
    gap:12px!important;
  }

  .trend-summary{
    margin:3px 10px!important;
    padding:5px 8px!important;
    font-size:10.5px!important;
  }

  .trend-summary b,
  .trend-summary span{
    font-size:10.5px!important;
  }

  .chart-wrap{
    height:calc(100% - 100px)!important;
    min-height:160px!important;
    padding:1px 6px 0!important;
  }

  .chart-tip{
    min-width:170px!important;
    padding:7px 9px!important;
    font-size:9.5px!important;
    gap:3px!important;
  }

  .chart-tip b{
    font-size:10px!important;
    white-space:nowrap!important;
  }

  /* Hover area starts after the Y-axis labels. */
  .trend-hover-layer{
    left:8%!important;
    right:2.2%!important;
    top:0!important;
    bottom:0!important;
  }

  /* Friday/week labels align with the plotting area. */
  .xlabels{
    display:grid!important;
    direction:ltr!important;
    width:100%!important;
    padding:0 2.2% 3px 8%!important;
    align-items:start!important;
    color:#a6b8ca!important;
    font-size:8px!important;
    line-height:1.1!important;
  }

  .xlabels > span{
    min-width:0!important;
    text-align:center!important;
  }

  .friday-label{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:1px!important;
    transform:translateX(-50%)!important;
    white-space:nowrap!important;
  }

  .friday-label b{
    color:#d9e5f2!important;
    font-size:8.5px!important;
    font-weight:900!important;
  }

  .friday-label small{
    color:#7289a1!important;
    font-size:7px!important;
  }
}

/* SVG axis + Friday separator styling */
.v48-y-grid{
  stroke:#1b3855;
  stroke-width:1;
  stroke-dasharray:3 4;
  opacity:.9;
}

.v48-y-label{
  fill:#9fb4c9;
  font-family:Vazirmatn,Tahoma,Arial,sans-serif;
  font-size:11px;
  font-weight:800;
}

.v48-axis-line{
  stroke:#49627a;
  stroke-width:1.2;
  opacity:.8;
}

.v48-week-line{
  stroke:#71869b;
  stroke-width:1;
  stroke-dasharray:2 6;
  opacity:.36;
}

.v48-week-tick{
  stroke:#a5b8c9;
  stroke-width:1.5;
  opacity:.9;
}

/* On tablet/mobile the weekday remains visible in tooltip/summary;
   desktop grid placement is intentionally not forced. */
@media (max-width:1199px){
  .v48-y-label{font-size:10px}
  .xlabels{
    direction:ltr!important;
  }
}


/* =====================================================================
   V49 — drilldown page link, dynamic chart scale, cleaner challenges
   ===================================================================== */

.table-title{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}
.table-title-main{
  min-width:0;
}
.all-details-btn{
  margin-right:auto;
  font-size:10.5px;
  line-height:1;
  padding:6px 9px;
  border-radius:8px;
  flex:0 0 auto;
}
.all-details-btn:hover{
  background:#174067;
  border-color:#4978a6;
}

@media (min-width:1200px){
  /* Summary gets slightly narrower; challenges get the freed width. */
  .app{
    grid-template-columns:
      minmax(175px,1.15fr)
      minmax(500px,3.50fr)
      minmax(150px,1fr)
      minmax(470px,3.08fr)
      minmax(175px,1.10fr)!important;
  }

  .hero-stats{
    padding:8px!important;
  }
  .hero-stats h2{
    font-size:15px!important;
  }
  .hero-stat{
    padding:8px 6px!important;
  }
  .hero-stat span{
    font-size:10px!important;
  }
  .hero-stat b{
    font-size:18px!important;
  }

  /* Challenge cards: title/score on one clear line, description below. */
  .challenge-grid{
    gap:7px!important;
    padding:0 4px 6px!important;
  }
  .challenge-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    text-align:right!important;
    gap:7px!important;
    padding:9px 10px!important;
    min-width:0!important;
  }
  .challenge-top{
    display:grid!important;
    grid-template-columns:25px minmax(0,1fr) auto!important;
    gap:6px!important;
    align-items:center!important;
    width:100%!important;
  }
  .challenge-icon{
    font-size:19px!important;
    line-height:1!important;
  }
  .challenge-top b{
    font-size:12.5px!important;
    line-height:1.35!important;
    min-width:0!important;
  }
  .challenge-top em{
    font-size:10.5px!important;
    font-style:normal!important;
    font-weight:900!important;
    padding:3px 5px!important;
    border-radius:7px!important;
    white-space:nowrap!important;
    background:rgba(255,255,255,.06)!important;
  }
  .challenge-card p{
    width:100%!important;
    margin:0!important;
    font-size:10.8px!important;
    line-height:1.75!important;
    text-align:right!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
  .challenge-card p strong{
    color:#f8d875!important;
    font-weight:900!important;
  }
}

/* Dynamic vertical-axis labels need enough room. */
.v48-y-label{
  font-size:10.5px!important;
}

/* Mobile/tablet challenge cards remain orderly too. */
@media (max-width:1199px){
  .challenge-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:7px!important;
  }
  .challenge-top{
    display:grid!important;
    grid-template-columns:26px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:7px!important;
  }
  .challenge-top em{
    font-style:normal!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }
  .challenge-card p{
    margin:0!important;
    line-height:1.7!important;
    text-align:right!important;
  }
}

@media (max-width:760px){
  .table-title{
    align-items:flex-start!important;
  }
  .all-details-btn{
    font-size:9px!important;
    padding:6px 7px!important;
  }
}


/* =====================================================================
   V50 — light gray faded page background + final six-person roster
   ===================================================================== */

html,
body{
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.96) 0%, rgba(245,247,250,.93) 26%, transparent 48%),
    radial-gradient(circle at 82% 18%, rgba(222,228,236,.88) 0%, rgba(234,238,243,.68) 30%, transparent 53%),
    linear-gradient(135deg,#eef1f4 0%,#dfe4e9 46%,#f7f8fa 100%)!important;
  background-attachment:fixed!important;
}

/* Replace the old dark full-screen glow with a soft neutral fade. */
body:before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.34),rgba(208,215,223,.16))!important;
  opacity:1!important;
}

/* Give the dashboard a subtle shadow separation from the bright background. */
.glass{
  box-shadow:
    0 12px 30px rgba(40,48,58,.18),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* Modal overlay tuned for the lighter page background. */
.modal{
  background:rgba(70,78,88,.32)!important;
  backdrop-filter:blur(5px);
}

/* Details page uses the same soft gray fade. */
.details-page{
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.96) 0%,rgba(245,247,250,.92) 28%,transparent 50%),
    radial-gradient(circle at 82% 18%,rgba(222,228,236,.86) 0%,rgba(234,238,243,.66) 32%,transparent 54%),
    linear-gradient(135deg,#eef1f4 0%,#dfe4e9 46%,#f7f8fa 100%)!important;
  background-attachment:fixed!important;
}


/* =====================================================================
   V51 — dark gray faded background
   ===================================================================== */

html,
body{
  background:
    radial-gradient(circle at 18% 12%, rgba(92,98,106,.34) 0%, rgba(54,59,66,.18) 28%, transparent 52%),
    radial-gradient(circle at 82% 18%, rgba(39,43,49,.52) 0%, rgba(24,28,33,.38) 34%, transparent 58%),
    radial-gradient(circle at 50% 100%, rgba(77,83,91,.24) 0%, transparent 46%),
    linear-gradient(135deg,#363b42 0%,#252a30 42%,#171b20 100%)!important;
  background-attachment:fixed!important;
}

body:before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.12)),
    radial-gradient(circle at 50% 20%,rgba(130,138,148,.08),transparent 42%)!important;
  opacity:1!important;
}

/* Keep panels clearly separated from the new dark gray background */
.glass{
  box-shadow:
    0 14px 34px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}

.modal{
  background:rgba(17,20,24,.58)!important;
  backdrop-filter:blur(6px);
}

/* Same background for the details page */
.details-page{
  background:
    radial-gradient(circle at 18% 12%, rgba(92,98,106,.34) 0%, rgba(54,59,66,.18) 28%, transparent 52%),
    radial-gradient(circle at 82% 18%, rgba(39,43,49,.52) 0%, rgba(24,28,33,.38) 34%, transparent 58%),
    radial-gradient(circle at 50% 100%, rgba(77,83,91,.24) 0%, transparent 46%),
    linear-gradient(135deg,#363b42 0%,#252a30 42%,#171b20 100%)!important;
  background-attachment:fixed!important;
}

/* V57 Apple-like liquid glass bottom toolbar */
.bottom-dock,.details-bottom-dock{background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.075))!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:0 18px 48px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(255,255,255,.06)!important;backdrop-filter:blur(24px) saturate(170%)!important;-webkit-backdrop-filter:blur(24px) saturate(170%)!important;border-radius:24px!important;overflow:hidden!important}
.bottom-dock:before,.details-bottom-dock:before{content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;border-radius:inherit!important;background:radial-gradient(circle at 18% 0%,rgba(255,255,255,.26),transparent 31%),linear-gradient(180deg,rgba(255,255,255,.13),transparent 45%)!important;opacity:.9!important}
.bottom-dock .dock-item,.details-bottom-dock .dock-item{position:relative!important;z-index:2!important;background:transparent!important;border:0!important;color:#f7fbff!important;text-shadow:0 1px 5px rgba(0,0,0,.62)!important}
.bottom-dock .dock-emoji,.bottom-dock .dock-plus,.details-bottom-dock .dock-emoji,.details-bottom-dock .dock-plus{display:grid!important;place-items:center!important;min-width:34px!important;min-height:34px!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.10))!important;border:1px solid rgba(255,255,255,.30)!important;color:#fff!important;filter:drop-shadow(0 4px 8px rgba(0,0,0,.30)) drop-shadow(0 0 1px rgba(255,255,255,.72))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 5px 14px rgba(0,0,0,.26)!important}
.bottom-dock .dock-item:hover .dock-emoji,.bottom-dock .dock-item:hover .dock-plus,.bottom-dock .dock-item.active .dock-emoji,.bottom-dock .dock-item.active .dock-plus,.details-bottom-dock .dock-item:hover .dock-emoji,.details-bottom-dock .dock-item:hover .dock-plus,.details-bottom-dock .dock-item.active .dock-emoji,.details-bottom-dock .dock-item.active .dock-plus{background:linear-gradient(145deg,rgba(255,255,255,.36),rgba(104,153,255,.20))!important;border-color:rgba(255,255,255,.44)!important;transform:translateY(-1px)!important}
.bottom-dock .dock-label,.details-bottom-dock .dock-label{color:#f7fbff!important;font-weight:800!important;opacity:.96!important;text-shadow:0 1px 5px rgba(0,0,0,.72)!important}.bottom-dock .dock-add,.details-bottom-dock .dock-add{background:transparent!important}
@media(max-width:760px){.bottom-dock,.details-bottom-dock{border-radius:20px!important;backdrop-filter:blur(20px) saturate(165%)!important;-webkit-backdrop-filter:blur(20px) saturate(165%)!important}.bottom-dock .dock-emoji,.bottom-dock .dock-plus,.details-bottom-dock .dock-emoji,.details-bottom-dock .dock-plus{min-width:31px!important;min-height:31px!important}}


/* =====================================================================
   V58 — refined Liquid Glass dock
   ===================================================================== */
.bottom-dock,.details-bottom-dock{
  overflow:visible!important;
  isolation:isolate!important;
  padding:7px 10px 6px!important;
}
.bottom-dock::after,.details-bottom-dock::after{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(24px) saturate(175%);-webkit-backdrop-filter:blur(24px) saturate(175%);
}
.bottom-dock .dock-item,.details-bottom-dock .dock-item{z-index:3!important;overflow:visible!important;transition:transform .2s ease,color .2s ease!important}
.dock-icon-shell,.dock-profile-shell,.dock-plus-shell{
  width:38px!important;height:38px!important;display:grid!important;place-items:center!important;border-radius:14px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.075))!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.27),0 5px 14px rgba(0,0,0,.24)!important;
  transition:all .22s ease!important;
}
.dock-symbol{
  display:block!important;font-size:20px!important;line-height:1!important;color:#fff!important;
  filter:grayscale(1) brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.38))!important;
}
.dock-plus-shell{
  width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;border-radius:13px!important;
  margin-top:-8px!important;overflow:visible!important;box-sizing:border-box!important;
  background:linear-gradient(145deg,rgba(255,255,255,.27),rgba(255,255,255,.10))!important;
}
.dock-plus-symbol{font:900 29px/1 Arial,sans-serif!important;color:#fff!important;transform:translateY(-1px)!important;text-shadow:0 2px 6px rgba(0,0,0,.34)!important}
.dock-profile-shell{overflow:hidden!important;border-radius:50%!important}
.dock-profile-img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;border-radius:50%!important;filter:none!important}
.bottom-dock .dock-item.active .dock-icon-shell,
.bottom-dock .dock-item.active .dock-plus-shell,
.bottom-dock .dock-item.active .dock-profile-shell,
.details-bottom-dock .dock-item.active .dock-icon-shell,
.details-bottom-dock .dock-item.active .dock-plus-shell,
.details-bottom-dock .dock-item.active .dock-profile-shell{
  background:linear-gradient(145deg,rgba(67,135,255,.80),rgba(132,70,232,.76))!important;
  border-color:rgba(209,224,255,.82)!important;
  box-shadow:0 0 0 2px rgba(112,130,255,.18),0 7px 20px rgba(71,67,194,.43),inset 0 1px 0 rgba(255,255,255,.45)!important;
  transform:translateY(-2px)!important;
}
.bottom-dock .dock-item.active .dock-label,.details-bottom-dock .dock-item.active .dock-label{color:#dfe9ff!important;text-shadow:0 0 9px rgba(111,148,255,.72)!important}
.bottom-dock .dock-item:hover .dock-icon-shell,.bottom-dock .dock-item:hover .dock-profile-shell,
.details-bottom-dock .dock-item:hover .dock-icon-shell,.details-bottom-dock .dock-item:hover .dock-profile-shell{border-color:rgba(255,255,255,.42)!important;transform:translateY(-1px)!important}
@media(max-width:760px){
  .dock-icon-shell,.dock-profile-shell{width:34px!important;height:34px!important}
  .dock-plus-shell{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;margin-top:-6px!important}
  .dock-plus-symbol{font-size:26px!important}
}

/* =====================================================================
   V60 — global quick-add, notifications, splash, dock state
   ===================================================================== */
body.modal-open{overflow:hidden!important}
.liquid-card{
  background:linear-gradient(145deg,rgba(30,38,50,.78),rgba(13,18,27,.86))!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.18)!important;
  backdrop-filter:blur(28px) saturate(170%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(170%)!important;
}
.quick-add-modal{position:fixed;inset:0;z-index:12000;display:none;place-items:center;padding:18px}
.quick-add-modal.open{display:grid}
.quick-add-backdrop{position:absolute;inset:0;background:rgba(7,10,15,.54);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.quick-add-panel{position:relative;width:min(720px,94vw);border-radius:28px;padding:18px;animation:qaIn .24s ease both;overflow:hidden}
.quick-add-panel:before{content:"";position:absolute;inset:-40% auto auto -15%;width:55%;height:120%;background:radial-gradient(circle,rgba(108,154,255,.26),transparent 62%);pointer-events:none}
.quick-add-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.quick-add-head small{color:#91a6bd;font-size:10px}.quick-add-head h2{margin:2px 0 0;font-size:20px;color:#fff}
.quick-add-close{width:36px;height:36px;border-radius:13px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:24px;cursor:pointer}
.quick-add-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.quick-add-option{min-height:135px;border-radius:19px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035));color:#fff;padding:14px 12px;text-align:right;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:.2s ease;font-family:inherit}
.quick-add-option:hover{transform:translateY(-3px);border-color:rgba(151,181,255,.42);background:linear-gradient(145deg,rgba(72,120,220,.19),rgba(114,67,184,.14))}
.quick-add-option.primary{border-color:rgba(119,161,255,.38);background:linear-gradient(145deg,rgba(47,110,225,.25),rgba(113,61,193,.21))}
.qa-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.11);font-size:21px}.quick-add-option b{font-size:13px}.quick-add-option small{color:#a8b6c6;font-size:9.5px;line-height:1.7}
.threshold-editor{position:relative;margin-top:12px;padding:11px;border-radius:17px;background:rgba(6,16,28,.48);border:1px solid rgba(255,255,255,.10)}
.threshold-editor-title{font-weight:900;font-size:12px;margin-bottom:8px}.threshold-editor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.threshold-editor-grid label{font-size:9px;color:#aebdca;display:flex;flex-direction:column;gap:4px}.threshold-editor-grid input{height:38px;border-radius:9px;border:1px solid #36526e;background:#071725;color:#ffd95a;font-weight:900;padding:0 9px;font-family:inherit}.threshold-actions{display:flex;align-items:center;gap:10px;margin-top:8px}.threshold-actions button{border:0;border-radius:9px;background:linear-gradient(135deg,#286ee8,#713ec6);color:#fff;padding:8px 16px;font-family:inherit;font-weight:900;cursor:pointer}.threshold-actions span{font-size:10px;color:#84e1b3}
@keyframes qaIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.notification-btn{position:relative!important;overflow:visible!important}.notification-badge{position:absolute;top:-4px;left:-5px;min-width:16px;height:16px;padding:0 3px;border-radius:999px;background:#ff4d64;color:#fff;font:800 9px/16px Arial;text-align:center;box-shadow:0 0 0 2px #16202c}
.header-tools{position:relative}.notification-popover{position:absolute;left:0;top:calc(100% + 8px);width:min(340px,78vw);border-radius:18px;padding:10px;display:none;z-index:8000}.notification-popover.open{display:block;animation:qaIn .18s ease both}.notification-head{display:flex;align-items:center;justify-content:space-between;padding:3px 4px 8px;border-bottom:1px solid rgba(255,255,255,.09)}.notification-head b{font-size:13px}.notification-head span{font-size:9px;color:#9eb0c2}.notification-list{max-height:320px;overflow:auto}.notification-item{padding:9px 5px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:2px}.notification-item b{font-size:10.5px;color:#f0f6ff}.notification-item span{font-size:9px;color:#afbdcc;line-height:1.6}.notification-item small{font-size:8px;color:#778b9f}.notification-empty{padding:20px 8px;text-align:center;color:#899bad;font-size:10px}

.motivation-splash{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;background:radial-gradient(circle at 30% 15%,rgba(92,113,255,.40),transparent 35%),radial-gradient(circle at 70% 80%,rgba(177,67,232,.34),transparent 38%),linear-gradient(135deg,#101624,#1c2131 45%,#151323);opacity:0;transition:opacity .35s ease;overflow:hidden}.motivation-splash.show{opacity:1}.motivation-splash.hide{opacity:0}.motivation-aura{position:absolute;width:480px;height:480px;border-radius:50%;background:conic-gradient(from 0deg,rgba(79,145,255,.28),rgba(204,77,255,.25),rgba(56,229,198,.18),rgba(79,145,255,.28));filter:blur(45px);animation:auraSpin 5s linear infinite}.motivation-splash-card{position:relative;max-width:min(680px,85vw);text-align:center;padding:28px 34px;border-radius:30px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);backdrop-filter:blur(22px);box-shadow:0 30px 90px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.24);display:flex;flex-direction:column;gap:10px}.motivation-splash-card>span{font-size:30px;color:#dfe9ff}.motivation-splash-card strong{font-size:24px;line-height:1.8;color:#fff}.motivation-splash-card small{color:#a9bbcf;font-size:11px}@keyframes auraSpin{to{transform:rotate(360deg)}}

.global-toast{position:fixed;z-index:15000;left:50%;bottom:96px;transform:translate(-50%,12px);opacity:0;pointer-events:none;padding:9px 14px;border-radius:12px;background:rgba(12,19,29,.92);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:10.5px;transition:.2s ease;box-shadow:0 10px 30px rgba(0,0,0,.35)}.global-toast.show{opacity:1;transform:translate(-50%,0)}

/* Home must be the active item on dashboard load; add is active only inside add flows. */
body[data-page="home"] .bottom-dock .dock-item[data-section="home"] .dock-icon-shell,
body[data-page="details"] .bottom-dock .dock-item[data-section="home"] .dock-icon-shell,
body[data-page="performance-entry"] .bottom-dock .dock-item[data-section="add"] .dock-plus-shell{
  box-shadow:0 0 0 2px rgba(114,145,255,.22),0 8px 22px rgba(62,70,190,.42),inset 0 1px 0 rgba(255,255,255,.45)!important;
}

@media(max-width:760px){
  .quick-add-grid{grid-template-columns:1fr}.quick-add-option{min-height:95px}.quick-add-panel{padding:14px;border-radius:22px}.quick-add-head h2{font-size:17px}.threshold-editor-grid{grid-template-columns:1fr}.notification-popover{left:-8px}.motivation-splash-card strong{font-size:19px}.motivation-splash-card{padding:22px 20px}
}


/* =====================================================================
   V61 — liquid notification + emoji-first quick add
   ===================================================================== */

body.notification-open{
  overflow:hidden!important;
}

/* Liquid glass notification icon */
.liquid-notification-btn{
  position:relative!important;
  width:44px!important;
  height:44px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  overflow:visible!important;
  border-radius:15px!important;
  border:1px solid rgba(255,255,255,.25)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.19),rgba(255,255,255,.07))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 7px 22px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(18px) saturate(165%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(165%)!important;
}

.notification-icon-shell{
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:11px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.055))!important;
  border:1px solid rgba(255,255,255,.18)!important;
}

.notification-bell-svg{
  width:18px!important;
  height:18px!important;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))!important;
}

.liquid-notification-btn:hover .notification-icon-shell{
  background:linear-gradient(145deg,rgba(72,134,255,.40),rgba(126,70,225,.27))!important;
  border-color:rgba(211,225,255,.48)!important;
}

.notification-badge{
  z-index:4!important;
  top:-5px!important;
  left:-5px!important;
}

/* Notifications now open over the PAGE, not under the topbar. */
.notification-layer{
  position:fixed!important;
  inset:0!important;
  z-index:25000!important;
  display:none!important;
  place-items:start center!important;
  padding:72px 14px 90px!important;
}

.notification-layer.open{
  display:grid!important;
}

.notification-page-backdrop{
  position:absolute!important;
  inset:0!important;
  background:rgba(7,10,15,.62)!important;
  backdrop-filter:blur(9px)!important;
  -webkit-backdrop-filter:blur(9px)!important;
}

.notification-page-panel{
  position:relative!important;
  z-index:2!important;
  width:min(620px,94vw)!important;
  max-height:calc(100vh - 150px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:26px!important;
  padding:14px!important;
  animation:qaIn .2s ease both!important;
}

.notification-page-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:2px 2px 11px!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
}

.notification-page-head small{
  color:#93a8bd!important;
  font-size:9px!important;
}

.notification-page-head h2{
  margin:2px 0 0!important;
  color:#fff!important;
  font-size:20px!important;
}

.notification-page-close{
  width:38px!important;
  height:38px!important;
  border-radius:13px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  font-size:24px!important;
  cursor:pointer!important;
}

.notification-page-panel .notification-list{
  max-height:none!important;
  overflow:auto!important;
  padding-top:4px!important;
}

.notification-page-panel .notification-item{
  padding:12px 8px!important;
}

.notification-page-panel .notification-item b{
  font-size:12px!important;
}

.notification-page-panel .notification-item span{
  font-size:10px!important;
  line-height:1.8!important;
}

/* The old header-bound popover must never be used. */
.notification-popover{
  display:none!important;
}

/* Quick add: make the emoji the visual focus. */
.quick-add-panel{
  width:min(670px,94vw)!important;
}

.quick-add-grid{
  gap:12px!important;
}

.quick-add-option{
  min-height:150px!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:12px!important;
  padding:14px 10px!important;
}

.quick-add-option .qa-icon{
  width:72px!important;
  height:72px!important;
  border-radius:22px!important;
  font-size:38px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.07))!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 10px 25px rgba(0,0,0,.24)!important;
}

.quick-add-option b{
  font-size:11.5px!important;
  line-height:1.6!important;
}

.quick-add-option small{
  display:none!important;
}

.quick-add-option.primary .qa-icon{
  box-shadow:
    0 0 0 2px rgba(124,151,255,.13),
    0 10px 28px rgba(60,65,188,.30),
    inset 0 1px 0 rgba(255,255,255,.30)!important;
}

@media(max-width:760px){
  .notification-layer{
    padding:52px 8px 88px!important;
  }

  .notification-page-panel{
    width:calc(100vw - 16px)!important;
    max-height:calc(100vh - 130px)!important;
    border-radius:22px!important;
  }

  .quick-add-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .quick-add-option{
    min-height:120px!important;
  }

  .quick-add-option .qa-icon{
    width:58px!important;
    height:58px!important;
    font-size:31px!important;
  }

  .quick-add-option b{
    font-size:9px!important;
  }
}

@media(max-width:500px){
  .quick-add-grid{
    grid-template-columns:1fr!important;
  }

  .quick-add-option{
    min-height:92px!important;
    display:grid!important;
    grid-template-columns:64px 1fr!important;
    text-align:right!important;
  }

  .quick-add-option .qa-icon{
    width:58px!important;
    height:58px!important;
  }
}


/* =====================================================================
   V62 — messages/notifications swap + universal touch numeric keypad
   ===================================================================== */

.dock-svg-icon{
  width:20px!important;
  height:20px!important;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.32))!important;
}

.dock-item.active .dock-svg-icon{
  stroke:#fff!important;
  filter:drop-shadow(0 0 7px rgba(132,166,255,.88))!important;
}

.dock-notification-badge{
  position:absolute!important;
  z-index:8!important;
  top:-3px!important;
  left:4px!important;
  min-width:16px!important;
  height:16px!important;
  padding:0 3px!important;
  border-radius:999px!important;
  background:#ff4e68!important;
  color:#fff!important;
  font:900 9px/16px Arial,sans-serif!important;
  box-shadow:0 0 0 2px rgba(21,28,38,.85)!important;
}

/* Top-left message button takes the old notification position */
.liquid-message-btn{
  width:44px!important;
  height:44px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border-radius:15px!important;
  border:1px solid rgba(255,255,255,.25)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.19),rgba(255,255,255,.07))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 7px 22px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(18px) saturate(165%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(165%)!important;
}
.header-message-icon-shell{
  width:30px!important;height:30px!important;
  display:grid!important;place-items:center!important;
  border-radius:11px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.055))!important;
  border:1px solid rgba(255,255,255,.18)!important;
}
.header-message-svg{
  width:18px!important;height:18px!important;
  fill:none!important;stroke:#fff!important;stroke-width:1.9!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}
.liquid-message-btn:hover .header-message-icon-shell{
  background:linear-gradient(145deg,rgba(72,134,255,.40),rgba(126,70,225,.27))!important;
}

/* Numeric fields */
.numeric-touch-trigger{
  width:100%!important;
  display:block!important;
  border:0!important;
  padding:0!important;
  background:transparent!important;
  cursor:pointer!important;
  font-family:inherit!important;
  text-align:inherit!important;
  touch-action:manipulation!important;
}

[data-numeric-input]{
  width:100%!important;
  height:62px!important;
  border-radius:15px!important;
  border:1px solid rgba(255,219,87,.26)!important;
  background:linear-gradient(145deg,#0b1928,#07131f)!important;
  color:#ffe06a!important;
  font-family:inherit!important;
  font-size:21px!important;
  font-weight:900!important;
  text-align:center!important;
  direction:ltr!important;
  caret-color:transparent!important;
  user-select:none!important;
  cursor:pointer!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}

.numeric-touch-hint{
  display:block!important;
  margin-top:5px!important;
  color:#72879b!important;
  font-size:8.5px!important;
  text-align:center!important;
}

.numeric-input-active[data-numeric-input],
.numeric-input-active [data-numeric-input],
.tap-metric.numeric-input-active [data-numeric-input],
.threshold-editor-grid label.numeric-input-active input{
  border-color:#ffd950!important;
  box-shadow:
    0 0 0 3px rgba(255,217,80,.12),
    0 0 24px rgba(100,87,225,.14),
    inset 0 1px 0 rgba(255,255,255,.06)!important;
}

/* Bottom sheet numeric keypad */
body.numeric-pad-open{
  overflow:hidden!important;
}

.numeric-pad-layer{
  position:fixed!important;
  inset:0!important;
  z-index:30000!important;
  display:none!important;
  align-items:flex-end!important;
  justify-content:center!important;
}

.numeric-pad-layer.open{
  display:flex!important;
}

.numeric-pad-backdrop{
  position:absolute!important;
  inset:0!important;
  background:rgba(3,7,12,.64)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}

.numeric-pad-sheet{
  position:relative!important;
  z-index:2!important;
  width:min(450px,calc(100vw - 18px))!important;
  margin:0 auto 10px!important;
  padding:10px 12px 13px!important;
  border-radius:28px!important;
  animation:numericSheetIn .18s ease both!important;
}

@keyframes numericSheetIn{
  from{opacity:0;transform:translateY(26px) scale(.98)}
  to{opacity:1;transform:none}
}

.numeric-pad-handle{
  width:42px!important;height:4px!important;border-radius:99px!important;
  background:rgba(255,255,255,.28)!important;margin:0 auto 8px!important;
}

.numeric-pad-head{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:10px!important;padding:0 2px 8px!important;
}

.numeric-pad-head small{
  color:#8398ad!important;font-size:9px!important;
}
.numeric-pad-head h2{
  margin:2px 0 0!important;color:#f7fbff!important;font-size:16px!important;
}
.numeric-pad-close{
  width:35px!important;height:35px!important;border-radius:12px!important;
  border:1px solid rgba(255,255,255,.17)!important;
  background:rgba(255,255,255,.07)!important;color:#fff!important;
  font-size:22px!important;cursor:pointer!important;
}

.numeric-pad-display{
  min-height:72px!important;border-radius:17px!important;padding:9px 12px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  background:linear-gradient(145deg,rgba(10,28,46,.93),rgba(8,18,31,.96))!important;
  border:1px solid rgba(86,123,160,.28)!important;
}

.numeric-pad-display span{
  color:#7f94a8!important;font-size:8.5px!important;
}
.numeric-pad-display strong{
  margin-top:3px!important;color:#ffe163!important;
  font:900 28px/1.25 Vazirmatn,Tahoma,Arial,sans-serif!important;
  direction:ltr!important;
}

.numeric-pad-shortcuts{
  min-height:0!important;
  display:flex!important;gap:5px!important;overflow-x:auto!important;
  padding:7px 0 5px!important;scrollbar-width:none!important;
}
.numeric-pad-shortcuts::-webkit-scrollbar{display:none!important}
.numeric-pad-shortcuts button{
  flex:0 0 auto!important;
  min-height:34px!important;padding:0 10px!important;border-radius:10px!important;
  border:1px solid rgba(111,143,180,.25)!important;
  background:rgba(28,52,77,.55)!important;color:#cbd9e8!important;
  font-family:inherit!important;font-size:10px!important;font-weight:900!important;
  cursor:pointer!important;touch-action:manipulation!important;
}

.numeric-pad-grid{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:7px!important;
}

.numeric-pad-grid button{
  min-height:55px!important;
  border-radius:15px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.045))!important;
  color:#fff!important;
  font-family:Vazirmatn,Tahoma,Arial,sans-serif!important;
  font-size:20px!important;
  font-weight:900!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.17)!important;
  transition:transform .08s ease,background .12s ease!important;
}
.numeric-pad-grid button:active{
  transform:scale(.95)!important;
}
.numeric-pad-grid .numeric-key-action{
  font-size:10.5px!important;
}
.numeric-pad-grid .backspace{font-size:20px!important}
.numeric-pad-grid .clear{color:#ffd769!important}
.numeric-pad-grid .cancel{color:#ff9a9a!important}
.numeric-pad-grid .confirm{
  color:#fff!important;
  background:linear-gradient(145deg,#2676e9,#7340c8)!important;
  border-color:rgba(183,199,255,.34)!important;
}

.threshold-editor-grid input[data-numeric-input]{
  height:46px!important;
  font-size:15px!important;
}

@media(min-width:900px){
  .numeric-pad-sheet{
    margin-bottom:20px!important;
    box-shadow:0 26px 70px rgba(0,0,0,.48)!important;
  }
}

@media(max-width:600px){
  .numeric-pad-sheet{
    width:100%!important;
    margin:0!important;
    border-radius:27px 27px 0 0!important;
    padding:9px 10px max(12px,env(safe-area-inset-bottom))!important;
  }
  .numeric-pad-grid{
    gap:6px!important;
  }
  .numeric-pad-grid button{
    min-height:58px!important;
    font-size:21px!important;
  }
  .numeric-pad-display strong{
    font-size:27px!important;
  }
}


/* =====================================================================
   V63 — home desktop proportions, header sides, new-content badges
   ===================================================================== */

.section-new-badge{
  position:absolute!important;
  z-index:12!important;
  top:-3px!important;
  left:2px!important;
  min-width:16px!important;
  height:16px!important;
  padding:0 3px!important;
  border-radius:999px!important;
  background:#ff405b!important;
  color:#fff!important;
  font:900 9px/16px Arial,sans-serif!important;
  text-align:center!important;
  box-shadow:0 0 0 2px rgba(16,23,32,.92),0 3px 9px rgba(255,55,79,.35)!important;
}
.header-message-badge{top:-5px!important;left:-5px!important}
.bottom-dock .dock-item{position:relative!important}

@media(min-width:1200px){
  body[data-page="home"] .app{
    width:calc(100vw - 64px)!important;
    max-width:1500px!important;
    margin:10px auto!important;
  }

  body[data-page="home"] .topbar{
    width:100%!important;
    max-width:none!important;
    justify-self:stretch!important;
    direction:ltr!important;
    grid-template-columns:58px 50px minmax(180px,1fr) minmax(330px,2fr) minmax(150px,210px) 52px!important;
    grid-template-areas:"brand calendar date title group tools"!important;
  }

  body[data-page="home"] .topbar > *{direction:rtl!important}
  body[data-page="home"] .brand{grid-area:brand!important}
  body[data-page="home"] .calendar-btn{grid-area:calendar!important}
  body[data-page="home"] .date-wrap{grid-area:date!important}
  body[data-page="home"] .title{grid-area:title!important}
  body[data-page="home"] .header-group{grid-area:group!important}
  body[data-page="home"] .header-tools{
    grid-area:tools!important;
    justify-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
  }

  body[data-page="home"] .title h1{
    font-size:26px!important;
  }

  body[data-page="home"] .month-ribbon{
    width:100%!important;
    max-width:none!important;
  }
}

@media(min-width:1400px){
  body[data-page="home"] .app{
    grid-template-columns:
      minmax(160px,1.35fr)
      minmax(500px,4.4fr)
      minmax(140px,1.25fr)
      minmax(260px,2.1fr)
      minmax(120px,.9fr)!important;
  }

  body[data-page="home"] .hero-stats{
    padding:6px!important;
    gap:5px!important;
  }
  body[data-page="home"] .hero-stats h2{font-size:13px!important}
  body[data-page="home"] .hero-stat{padding:7px 5px!important}
  body[data-page="home"] .hero-stat span{font-size:9px!important}
  body[data-page="home"] .hero-stat b{font-size:16px!important}
  body[data-page="home"] .team-groups-mini{font-size:8.5px!important}

  body[data-page="home"] .challenges .section-head{
    padding-left:7px!important;
    padding-right:7px!important;
  }
  body[data-page="home"] .challenge-card{padding:7px 8px!important}
  body[data-page="home"] .challenge-card p{
    font-size:9.4px!important;
    line-height:1.55!important;
  }
  body[data-page="home"] .challenge-top b{font-size:10.5px!important}
}

@media(max-width:1199px){
  body[data-page="home"] .app{
    width:calc(100% - 18px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* =====================================================================
   V64 — themes, notification wins, compact date box
   ===================================================================== */

.theme-picker{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-width:0!important;
}
.theme-picker span{
  color:#9eafc1!important;
  font-size:10px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.theme-picker select{
  min-width:116px!important;
  height:38px!important;
  padding:0 9px!important;
  border-radius:11px!important;
  border:1px solid rgba(82,112,145,.52)!important;
  background:#081a2b!important;
  color:#f3f7fc!important;
  font-family:Vazirmatn,Tahoma,Arial,sans-serif!important;
  font-size:10px!important;
  font-weight:900!important;
  cursor:pointer!important;
}

/* Compact yellow date/day area */
body[data-page="home"] .date-wrap{
  width:max-content!important;
  max-width:150px!important;
}
body[data-page="home"] .date-block{
  min-width:132px!important;
  width:max-content!important;
  max-width:145px!important;
  padding:7px 9px!important;
}
body[data-page="home"] .date-main{
  font-size:15.5px!important;
}
body[data-page="home"] .date-sub{
  font-size:10.5px!important;
}
body[data-page="home"] .outside-clock{
  font-size:11.5px!important;
}

/* Home desktop header now includes theme picker */
@media(min-width:1200px){
  body[data-page="home"] .topbar{
    grid-template-columns:
      58px
      48px
      145px
      minmax(260px,1.8fr)
      126px
      150px
      52px!important;
    grid-template-areas:"brand calendar date title theme group tools"!important;
  }
  body[data-page="home"] .header-theme{grid-area:theme!important}
}

@media(max-width:1199px) and (min-width:761px){
  body[data-page="home"] .header-theme{
    min-width:115px!important;
  }
}

@media(max-width:760px){
  body[data-page="home"] .theme-picker{
    width:100%!important;
    justify-content:center!important;
    margin-top:6px!important;
  }
  body[data-page="home"] .theme-picker select{
    min-width:150px!important;
  }
}

/* Notification rows: one-line performance summary, fully clickable */
.notification-link{
  display:block!important;
  text-decoration:none!important;
  color:inherit!important;
  cursor:pointer!important;
  border-radius:14px!important;
  margin:5px 0!important;
  padding:10px 11px!important;
  border:1px solid rgba(88,118,151,.20)!important;
  background:linear-gradient(110deg,rgba(17,37,58,.60),rgba(14,26,42,.52))!important;
  transition:.16s ease!important;
}
.notification-link:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(115,150,235,.40)!important;
  background:linear-gradient(110deg,rgba(34,72,129,.48),rgba(79,42,122,.35))!important;
}
.notification-row-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}
.notification-row-head b{
  color:#f8fbff!important;
  font-size:11.5px!important;
  font-weight:900!important;
}
.notification-row-head small{
  flex:0 0 auto!important;
  color:#758ca3!important;
  font-size:8px!important;
}
.notification-summary-line{
  margin-top:6px!important;
  padding:7px 8px!important;
  border-radius:9px!important;
  background:rgba(4,14,24,.38)!important;
  color:#c8d6e5!important;
  font-size:9px!important;
  font-weight:700!important;
  white-space:nowrap!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:thin!important;
  direction:rtl!important;
}
.notification-open-hint{
  display:block!important;
  margin-top:5px!important;
  color:#82aaf8!important;
  font-size:8.5px!important;
  font-weight:800!important;
}
.milestone-notification{
  border-color:rgba(255,205,65,.34)!important;
  background:
    radial-gradient(circle at 90% 0%,rgba(255,207,70,.16),transparent 35%),
    linear-gradient(110deg,rgba(68,51,14,.50),rgba(52,34,67,.45))!important;
}
.milestone-notification .notification-row-head b{
  color:#ffe36b!important;
}
.milestone-notification .notification-summary-line{
  color:#f8eabb!important;
}

/* ---------- Night theme: current visual ---------- */
html[data-theme="night"]{
  color-scheme:dark;
}

/* ---------- Day theme ---------- */
html[data-theme="day"]{
  color-scheme:light;
}
html[data-theme="day"] body,
html[data-theme="day"] body.entry-page,
html[data-theme="day"] body.details-page,
html[data-theme="day"] body.messages-page{
  background:
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.98),rgba(238,244,250,.86) 34%,transparent 55%),
    radial-gradient(circle at 86% 14%,rgba(208,226,247,.72),transparent 47%),
    linear-gradient(135deg,#e7edf3,#f7f9fb 48%,#dfe8f1)!important;
  color:#203142!important;
}
html[data-theme="day"] body:before{
  background:linear-gradient(180deg,rgba(255,255,255,.54),rgba(196,210,225,.10))!important;
}
html[data-theme="day"] .glass,
html[data-theme="day"] .liquid-card{
  background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(235,242,249,.90))!important;
  border-color:rgba(79,111,144,.24)!important;
  box-shadow:0 13px 34px rgba(56,77,99,.15),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
html[data-theme="day"] .glass h1,
html[data-theme="day"] .glass h2,
html[data-theme="day"] .glass h3,
html[data-theme="day"] .glass b,
html[data-theme="day"] .glass strong,
html[data-theme="day"] .section-head h2,
html[data-theme="day"] .title h1,
html[data-theme="day"] .messages-card,
html[data-theme="day"] .entry-form,
html[data-theme="day"] .audit-panel{
  color:#1d3247!important;
}
html[data-theme="day"] .title span,
html[data-theme="day"] .section-head span,
html[data-theme="day"] .section-head small,
html[data-theme="day"] .trend-summary,
html[data-theme="day"] .team-groups-mini,
html[data-theme="day"] .entry-section-title span{
  color:#65798d!important;
}
html[data-theme="day"] table{
  color:#25384b!important;
}
html[data-theme="day"] thead th{
  color:#f7fbff!important;
}
html[data-theme="day"] tbody tr{
  background:rgba(255,255,255,.34)!important;
}
html[data-theme="day"] .group-picker select,
html[data-theme="day"] .theme-picker select,
html[data-theme="day"] .section-head select{
  background:#eef4fa!important;
  color:#20364d!important;
  border-color:#afc2d5!important;
}
html[data-theme="day"] .bottom-dock,
html[data-theme="day"] .details-bottom-dock{
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(224,235,246,.58))!important;
  border-color:rgba(255,255,255,.86)!important;
  box-shadow:0 17px 45px rgba(70,88,108,.20),inset 0 1px 0 #fff!important;
}
html[data-theme="day"] .bottom-dock .dock-label,
html[data-theme="day"] .details-bottom-dock .dock-label{
  color:#24405e!important;
  text-shadow:none!important;
}

/* ---------- Liquid Glass theme ---------- */
html[data-theme="glass"]{
  color-scheme:dark;
}
html[data-theme="glass"] body,
html[data-theme="glass"] body.entry-page,
html[data-theme="glass"] body.details-page,
html[data-theme="glass"] body.messages-page{
  background:
    radial-gradient(circle at 12% 12%,rgba(56,123,255,.46),transparent 35%),
    radial-gradient(circle at 88% 16%,rgba(146,62,224,.42),transparent 38%),
    radial-gradient(circle at 52% 92%,rgba(33,188,179,.24),transparent 36%),
    linear-gradient(135deg,#101b2c,#171426 47%,#0c1822)!important;
  background-attachment:fixed!important;
}
html[data-theme="glass"] .glass,
html[data-theme="glass"] .liquid-card{
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.055))!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.28)!important;
  backdrop-filter:blur(28px) saturate(185%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(185%)!important;
}
html[data-theme="glass"] .bottom-dock,
html[data-theme="glass"] .details-bottom-dock{
  background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.075))!important;
  border-color:rgba(255,255,255,.30)!important;
  backdrop-filter:blur(28px) saturate(190%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(190%)!important;
}
html[data-theme="glass"] .group-picker select,
html[data-theme="glass"] .theme-picker select,
html[data-theme="glass"] .section-head select{
  background:rgba(8,20,36,.62)!important;
  border-color:rgba(199,216,255,.30)!important;
}

/* V82 universal status + immutable five-key dock */
.site-update-status{position:fixed;top:10px;left:12px;z-index:99990;display:flex;gap:6px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(4,20,35,.72);border:1px solid rgba(135,177,210,.18);backdrop-filter:blur(12px);font-size:10px;color:#9db4c9;pointer-events:none}.site-update-status span:first-child{color:#54e49a}.bottom-dock{position:fixed!important;z-index:99999!important;bottom:6px!important;left:50%!important;transform:translateX(-50%)!important;width:min(620px,calc(100vw - 20px))!important}.bottom-dock .dock-item{flex:1!important}.app,.tasks-shell,.entry-shell,.details-shell,.messages-shell,.profile-shell{padding-bottom:88px!important}
/* V91 — lightweight desktop conversations, inspired by familiar social chat patterns */
.conversation-desktop{position:fixed;inset:0;z-index:1850;pointer-events:none;font-family:inherit}.conversation-sidebar{position:absolute;right:14px;bottom:94px;width:266px;height:min(620px,calc(100vh - 118px));display:flex;flex-direction:column;padding:10px;border-radius:20px;transform:translateX(calc(100% + 24px));opacity:0;visibility:hidden;transition:transform .2s ease,opacity .18s ease;pointer-events:auto;box-shadow:0 18px 48px rgba(0,0,0,.28);overflow:hidden}.conversation-desktop.open .conversation-sidebar{transform:none;opacity:1;visibility:visible}.conversation-sidebar>header{display:flex;align-items:center;justify-content:space-between;padding:3px 4px 10px}.conversation-sidebar>header small,.conversation-sidebar>header strong{display:block}.conversation-sidebar>header small{font-size:9px;color:#7f96aa}.conversation-sidebar>header strong{margin-top:2px;font-size:17px}.conversation-sidebar>header button{width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.07);color:#dce8f4;font:22px/1 inherit;cursor:pointer}.conversation-search{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:3px;height:40px;padding:0 9px;border-radius:12px;background:rgba(112,142,174,.10);border:1px solid rgba(112,142,174,.16)}.conversation-search span{font-size:20px;color:#7891a8}.conversation-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#e6eef6;font:11px inherit}.conversation-search input::placeholder{color:#7690a6}.conversation-kinds{display:grid;grid-template-columns:1fr 1fr auto;gap:5px;padding:9px 0}.conversation-kinds button,.conversation-kinds a{height:34px;display:grid;place-items:center;border-radius:10px;border:0;background:transparent;color:#8399ad;font:900 10px inherit;text-decoration:none;cursor:pointer}.conversation-kinds button.active{background:rgba(94,89,238,.17);color:#b9b8ff}.conversation-kinds a{padding-inline:7px;color:#67b6ff}.conversation-contact-list{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}.conversation-contact{width:100%;display:grid;grid-template-columns:42px 1fr 8px;align-items:center;gap:8px;min-height:54px;padding:6px;border:0;border-radius:13px;background:transparent;color:#e9f1f8;text-align:right;font-family:inherit;cursor:pointer;transition:background .14s ease}.conversation-contact:hover{background:rgba(112,142,174,.11)}.contact-avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#477af4,#7a4bde);font-size:18px;color:#fff}.contact-avatar img{width:100%;height:100%;object-fit:cover}.conversation-contact b,.conversation-contact small{display:block}.conversation-contact b{font-size:11px}.conversation-contact small{margin-top:3px;color:#7992a8;font-size:8px}.conversation-contact i{width:7px;height:7px;border-radius:50%;background:#2ed79b;box-shadow:0 0 0 3px rgba(46,215,155,.1)}.chat-list-loading,.chat-list-empty{padding:28px 8px;text-align:center;color:#7e96ab;font-size:10px}.chat-window-host{position:absolute;right:294px;bottom:94px;display:flex;direction:ltr;align-items:flex-end;gap:10px;pointer-events:none;transition:right .2s ease}.conversation-desktop:not(.open) .chat-window-host{right:14px}.chat-window{direction:rtl;width:min(310px,calc(100vw - 28px));height:390px;display:grid;grid-template-rows:54px 1fr 55px;border-radius:18px 18px 10px 10px;overflow:hidden;pointer-events:auto;box-shadow:0 18px 48px rgba(0,0,0,.33);transform-origin:bottom;transition:height .18s ease}.chat-window.minimized{height:54px}.chat-window-head{display:grid;grid-template-columns:38px 1fr 32px 32px;align-items:center;gap:5px;padding:7px 8px;border-bottom:1px solid rgba(122,151,181,.14);background:linear-gradient(110deg,rgba(57,94,208,.22),rgba(105,68,207,.16))}.chat-window-head .contact-avatar{width:36px;height:36px;font-size:16px}.chat-window-title{min-width:0;border:0;background:transparent;color:#eef5fa;text-align:right;font-family:inherit;cursor:pointer}.chat-window-title b,.chat-window-title small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-window-title b{font-size:11px}.chat-window-title small{margin-top:2px;color:#86a2b9;font-size:8px}.chat-window-head>button:not(.chat-window-title){width:31px;height:31px;border:0;border-radius:9px;background:rgba(255,255,255,.06);color:#c9d8e5;font:18px/1 Arial;cursor:pointer}.chat-window-messages{min-height:0;overflow:auto;padding:10px;background:rgba(4,17,30,.72);scrollbar-width:thin}.chat-thread-empty{display:grid;place-items:center;min-height:100%;padding:20px;color:#7891a7;text-align:center;font-size:10px}.chat-bubble-row{display:flex;margin:5px 0}.chat-bubble-row.mine{justify-content:flex-start}.chat-bubble-row.theirs{justify-content:flex-end}.chat-bubble{max-width:82%;padding:8px 10px;border-radius:14px 14px 4px;background:#17344e;color:#eaf3fa;box-shadow:0 2px 8px rgba(0,0,0,.08)}.chat-bubble-row.mine .chat-bubble{border-radius:14px 14px 14px 4px;background:linear-gradient(135deg,#4168e9,#7351d6);color:#fff}.chat-bubble b{display:block;margin-bottom:3px;color:#8ccaff;font-size:8px}.chat-bubble p{margin:0;font-size:10.5px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.chat-bubble time{display:block;margin-top:3px;font-size:7px;opacity:.65;text-align:left}.chat-compose{display:grid;grid-template-columns:1fr 38px;gap:6px;align-items:center;padding:7px;background:rgba(7,24,39,.96);border-top:1px solid rgba(122,151,181,.14)}.chat-compose textarea{height:39px;max-height:80px;resize:none;padding:10px;border:1px solid rgba(119,151,180,.18);border-radius:12px;background:rgba(255,255,255,.055);color:#edf5fb;outline:0;font:10px/1.7 inherit}.chat-compose textarea:focus{border-color:#716ce9;box-shadow:0 0 0 3px rgba(113,108,233,.12)}.chat-compose button{width:38px;height:38px;border:0;border-radius:12px;background:linear-gradient(145deg,#3c75f2,#794bda);color:white;font-size:17px;cursor:pointer}.chat-peek-host{position:absolute;right:14px;bottom:94px;display:flex;flex-direction:column;gap:7px;pointer-events:none}.chat-peek{width:220px;min-height:54px;display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr 1fr;column-gap:8px;align-items:center;padding:7px;border:1px solid rgba(116,112,238,.45);border-radius:15px;background:linear-gradient(115deg,#173f7f,#57399f);color:#fff;text-align:right;font-family:inherit;cursor:pointer;pointer-events:auto;box-shadow:0 12px 32px rgba(0,0,0,.3);opacity:0;transform:translateX(20px);transition:.18s ease}.chat-peek.show{opacity:1;transform:none}.chat-peek>span{grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.15)}.chat-peek img{width:100%;height:100%;object-fit:cover}.chat-peek b{align-self:end;font-size:10px}.chat-peek small{align-self:start;margin-top:1px;color:#c8d5ff;font-size:8px}
html[data-theme="day"] .conversation-sidebar,html[data-theme="day"] .chat-window{background:rgba(255,255,255,.97)!important;border-color:#cbd8e4!important;color:#152536!important}html[data-theme="day"] .conversation-sidebar>header button,html[data-theme="day"] .conversation-search{background:#eef3f7!important;color:#172738!important}html[data-theme="day"] .conversation-search input,html[data-theme="day"] .conversation-contact,html[data-theme="day"] .chat-window-title{color:#172738!important}html[data-theme="day"] .conversation-contact:hover{background:#eef3f8!important}html[data-theme="day"] .chat-window-messages{background:#f3f6f9!important}html[data-theme="day"] .chat-bubble-row.theirs .chat-bubble{background:#e2e9ef!important;color:#152536!important}html[data-theme="day"] .chat-compose{background:#fff!important}html[data-theme="day"] .chat-compose textarea{background:#f0f4f7!important;color:#172738!important;border-color:#ccd8e2!important}
@media(max-width:979px){.conversation-desktop{display:none}}
@media(prefers-reduced-motion:reduce){.conversation-sidebar,.chat-window,.chat-peek,.chat-window-host{transition:none!important}}

/* V91 — calm, predictable interaction language: visible focus, generous targets, immediate feedback */
:where(button,a,input,select,textarea):focus-visible{outline:3px solid rgba(77,150,255,.72)!important;outline-offset:2px!important}
:where(button,a,[role="button"]){-webkit-tap-highlight-color:transparent}
:where(.primary-btn,.messages-home,.message-tab,.profile-tab,.user-admin-nav button){transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease,border-color .14s ease}
:where(.primary-btn,.messages-home,.message-tab,.profile-tab,.user-admin-nav button):active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}