/* ============================================================
   SINL App CSS — ATLAS Design System
   Dark editorial · Copper accent · Left-rail layout
   ============================================================ */

/* ---- Custom Properties ----------------------------------- */
:root {
    --bg:           #07090d;
    --bg2:          #0b0e15;
    --panel:        rgba(11,14,20,.92);
    --panel2:       rgba(15,19,28,.88);
    --panel-glass:  rgba(18,23,34,.72);
    --line:         rgba(255,255,255,.07);
    --line2:        rgba(255,255,255,.04);
    --glow:         rgba(200,147,58,.2);
    --glow-soft:    rgba(200,147,58,.08);
    --orb-a:        rgba(200,147,58,.14);
    --orb-b:        rgba(61,190,120,.1);
    --orb-c:        rgba(96,165,250,.08);

    --text:         #f0ece4;
    --text-muted:   #9a8e7e;
    --text-light:   #6a6252;

    --primary:      #c8933a;
    --primary-dark: #b07828;
    --primary-light:#e8b86d;
    --success:      #3dbe78;
    --warning:      #e8a02a;
    --danger:       #e54b4b;
    --info:         #60a5fa;

    /* Legacy alias names used throughout views */
    --bg-card:      rgba(11,14,20,.92);
    --bg-input:     rgba(255,255,255,.06);
    --border:       rgba(255,255,255,.07);
    --nav-bg:       rgba(7,9,13,.96);
    --nav-text:     #9a8e7e;
    --nav-active:   #c8933a;

    --radius:       20px;
    --radius-sm:    12px;
    --shadow:       0 8px 24px rgba(0,0,0,.4);
    --shadow-lg:    0 24px 56px rgba(0,0,0,.5);
    --transition:   0.18s ease;
    --font:         "Segoe UI", system-ui, -apple-system, sans-serif;
    --tap-target:   48px;
    --rail:         256px;
}

/* ---- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background:
        radial-gradient(circle at top, rgba(200,147,58,.08), transparent 34%),
        linear-gradient(180deg, #090c12 0%, var(--bg) 38%, #05070b 100%);
    color:       var(--text);
    line-height: 1.6;
    min-height:  100dvh;
    overflow-x:  hidden;
    position:    relative;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-light); }
button { cursor: pointer; font-family: inherit; }
h1, h2, h3, h4 { letter-spacing: -.03em; }

/* ---- Film grain ------------------------------------------ */
#grain {
    position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: .018;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain .14s steps(2) infinite;
}
@keyframes grain { 0%{background-position:0 0} 50%{background-position:28px -16px} 100%{background-position:-20px 12px} }

/* ---- Cursor spotlight ------------------------------------ */
#spotlight {
    position: fixed; inset: 0; pointer-events: none; z-index: 8999;
    background: radial-gradient(circle 280px at 50% 50%, rgba(200,147,58,.05) 0%, transparent 70%);
}

/* ---- Scroll progress bar --------------------------------- */
#sp {
    position: fixed; top: 0; left: 0; height: 2px; z-index: 10000;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    width: 0; pointer-events: none; transition: width .1s linear;
}

/* ---- App shell layout ------------------------------------ */
.app-shell {
    display:               grid;
    grid-template-columns: var(--rail) 1fr;
    min-height:            100dvh;
    position:              relative;
    z-index:               2;
    isolation:             isolate;
}
.app-shell.nav-collapsed {
    grid-template-columns: 88px 1fr;
}
.app-shell::before,
.app-shell::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    opacity: .9;
    animation: orbFloat 16s ease-in-out infinite alternate;
}
.app-shell::before {
    width: 340px;
    height: 340px;
    top: -90px;
    right: 10vw;
    background: var(--orb-a);
}
.app-shell::after {
    width: 300px;
    height: 300px;
    bottom: -70px;
    left: max(220px, 10vw);
    background: linear-gradient(135deg, var(--orb-b), var(--orb-c));
    animation-duration: 22s;
}
@keyframes orbFloat {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(24px, -28px, 0) scale(1.08); }
}

.page-content {
    padding:   32px 40px 80px;
    max-width: 1080px;
    width:     100%;
    position:  relative;
}

/* ---- Navigation / Left Rail ------------------------------ */
.app-nav {
    position:        sticky;
    top:             0;
    height:          100dvh;
    overflow-y:      auto;
    overflow-x:      hidden;
    border-right:    1px solid var(--line);
    padding:         28px 20px;
    background:
        linear-gradient(180deg, rgba(14,18,26,.96), rgba(9,12,18,.92)),
        var(--nav-bg);
    backdrop-filter: blur(20px);
    display:         flex;
    flex-direction:  column;
    gap:             3px;
    z-index:         100;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
    box-shadow:      inset -1px 0 0 rgba(255,255,255,.03);
}
.nav-rail-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.app-nav::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 180px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
    opacity: .45;
    pointer-events: none;
}

/* Brand mark */
.rail-brand {
    display:        flex;
    align-items:    center;
    gap:            10px;
    font-size:      .88rem;
    font-weight:    800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          var(--primary);
    margin-bottom:  16px;
    text-decoration: none;
    position:       relative;
    z-index:        1;
}
.rail-brand:hover { color: var(--primary-light); }
.rail-mark {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    box-shadow: 0 0 22px rgba(200,147,58,.2);
}
.rail-brand-text { white-space: nowrap; }
.nav-rail-toggle,
.nav-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.04);
    color: var(--text-muted);
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.nav-rail-toggle:hover,
.nav-rail-toggle:focus-visible,
.nav-drawer-close:hover,
.nav-drawer-close:focus-visible {
    background: rgba(200,147,58,.08);
    border-color: rgba(200,147,58,.2);
    color: var(--text);
}
.nav-drawer {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.nav-drawer-head {
    display: none;
}

/* Nav section label */
.nav-label {
    font-size:      .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var(--text-light);
    padding:        14px 14px 5px;
    font-weight:    700;
}

/* Nav list */
.nav-menu {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        2px;
    flex:       1;
}
.nav-icon { font-size: .95rem; width: 20px; text-align: center; flex-shrink: 0; }
.nav-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav items */
.nav-item {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     11px 14px;
    border-radius: 12px;
    font-size:   .88rem;
    color:       var(--text-muted);
    transition:  all var(--transition);
    min-height:  var(--tap-target);
    text-decoration: none;
    border:      1px solid transparent;
    position:    relative;
    overflow:    hidden;
    isolation:   isolate;
}
.nav-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.12) 35%, transparent 65%);
    transform: translateX(-130%);
    transition: transform .45s ease;
    pointer-events: none;
}
.nav-item:hover {
    background:  rgba(200,147,58,.08);
    color:       var(--text);
    border-color: rgba(200,147,58,.14);
    text-decoration: none;
}
.nav-item:hover::before,
.nav-item:focus-visible::before,
.nav-item:active::before { transform: translateX(130%); }
.nav-item.active {
    background:
        linear-gradient(135deg, rgba(200,147,58,.18), rgba(200,147,58,.08)),
        rgba(200,147,58,.08);
    color:       var(--primary);
    font-weight: 600;
    border-color: rgba(232,184,109,.18);
    box-shadow:  inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.18);
}
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 90;
}

/* Legacy compatibility — nav-logo used on login page */
.nav-logo {
    font-size:   .88rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:       var(--primary);
    text-decoration: none;
}

/* Mobile nav toggle */
.nav-toggle {
    display:     none;
    background:  rgba(255,255,255,.05);
    border:      1px solid var(--line);
    color:       var(--text);
    font-size:   1.3rem;
    line-height: 1;
    min-width:   var(--tap-target);
    min-height:  var(--tap-target);
    align-items: center;
    justify-content: center;
    padding:     0 12px;
    border-radius: 999px;
    box-shadow:  inset 0 1px 0 rgba(255,255,255,.05);
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
    border-color: rgba(200,147,58,.2);
    background: rgba(200,147,58,.08);
}

/* Mobile nav header (hidden on desktop) */
.nav-header-mobile {
    display: none;
}

/* Rail status footer */
.rail-status {
    margin-top: auto;
    padding:    14px;
    border-radius: var(--radius);
    border:     1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
        var(--panel2);
    margin-top: 16px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 36px rgba(0,0,0,.24);
}
.rail-user { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
    display: inline-block; margin-right: 6px;
}
.status-label { font-size: .78rem; color: var(--text-muted); }

/* Sync badge */
.sync-badge {
    display:     inline-flex;
    align-items: center;
    gap:         .375rem;
    font-size:   .75rem;
    color:       var(--text-muted);
}
.sync-badge .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
    flex-shrink: 0;
}
.sync-badge.offline .dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.sync-badge .dot.syncing {
    background: var(--warning);
    animation:  syncPulse 1s infinite;
}
@keyframes syncPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* ---- Page header ----------------------------------------- */
.page-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    margin-bottom:   28px;
    padding:         24px 24px 22px;
    border:          1px solid var(--line);
    border-radius:   var(--radius);
    gap:             12px;
    position:        relative;
    overflow:        hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        rgba(10,13,19,.52);
    backdrop-filter: blur(16px);
    box-shadow:      0 20px 44px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.03);
}
.page-header::before,
.page-header::after,
.dashboard-grid::before,
.dashboard-grid::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    opacity: .7;
}
.page-header::before,
.dashboard-grid::before {
    top: 10px;
    left: 10px;
    border-top: 1px solid rgba(232,184,109,.55);
    border-left: 1px solid rgba(232,184,109,.55);
}
.page-header::after,
.dashboard-grid::after {
    right: 10px;
    bottom: 10px;
    border-right: 1px solid rgba(232,184,109,.45);
    border-bottom: 1px solid rgba(232,184,109,.45);
}
.page-title {
    font-size:   clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    background:  linear-gradient(135deg, #fff7e8 10%, #f4d9ab 55%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color:       transparent;
}
.page-subtitle { font-size: .875rem; color: var(--text-muted); margin-top: 6px; }

/* Section title rule */
.sec-title {
    font-size:   .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 700;
    color:       var(--primary);
    margin-bottom: 14px;
    display:     flex;
    align-items: center;
    gap:         10px;
}
.sec-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---- Cards ----------------------------------------------- */
.card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
        var(--panel);
    border:        1px solid var(--line);
    border-radius: var(--radius);
    padding:       22px;
    transition:    border-color var(--transition), background var(--transition), transform var(--transition);
    position:      relative;
    overflow:      hidden;
    isolation:     isolate;
    backdrop-filter: blur(18px);
    box-shadow:    0 20px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
}
.card::before,
.stat-card::before,
.exercise-card::before,
.login-card::before,
.modal-box::before,
.chart-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(var(--primary-light), var(--primary-light)) top left / 10px 1px no-repeat,
        linear-gradient(var(--primary-light), var(--primary-light)) top left / 1px 10px no-repeat,
        linear-gradient(var(--primary-light), var(--primary-light)) top right / 10px 1px no-repeat,
        linear-gradient(var(--primary-light), var(--primary-light)) top right / 1px 10px no-repeat,
        linear-gradient(var(--primary-light), var(--primary-light)) bottom left / 10px 1px no-repeat,
        linear-gradient(var(--primary-light), var(--primary-light)) bottom left / 1px 10px no-repeat,
        linear-gradient(var(--primary-light), var(--primary-light)) bottom right / 10px 1px no-repeat,
        linear-gradient(var(--primary-light), var(--primary-light)) bottom right / 1px 10px no-repeat;
    opacity: .3;
    transition: background-size .25s ease, opacity .25s ease, filter .25s ease;
    pointer-events: none;
}
.card::after,
.stat-card::after,
.exercise-card::after,
.login-card::after,
.modal-box::after,
.chart-container::after {
    content: '';
    position: absolute;
    left: -10%;
    top: 0;
    width: 120%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,184,109,.85), rgba(255,255,255,.35), transparent);
    box-shadow: 0 0 10px rgba(232,184,109,.35);
    opacity: 0;
    pointer-events: none;
}
.card:hover,
.card:focus-within { border-color: rgba(200,147,58,.2); }
.card:is(:hover, :focus-within, :active)::before,
.stat-card:is(:hover, :focus-within, :active)::before,
.exercise-card:is(:hover, :focus-within, :active)::before,
.login-card:is(:hover, :focus-within, :active)::before,
.modal-box:is(:hover, :focus-within, :active)::before,
.chart-container:is(:hover, :focus-within, :active)::before {
    background:
        linear-gradient(var(--primary-light), var(--primary-light)) top left / 18px 1px no-repeat,
        linear-gradient(var(--primary-light), var(--primary-light)) top left / 1px 18px no-repeat,
        linear-gradient(var(--primary-light), var(--primary-light)) top right / 18px 1px no-repeat,
        linear-gradient(var(--primary-light), var(--primary-light)) top right / 1px 18px no-repeat,
        linear-gradient(var(--primary-light), var(--primary-light)) bottom left / 18px 1px no-repeat,
        linear-gradient(var(--primary-light), var(--primary-light)) bottom left / 1px 18px no-repeat,
        linear-gradient(var(--primary-light), var(--primary-light)) bottom right / 18px 1px no-repeat,
        linear-gradient(var(--primary-light), var(--primary-light)) bottom right / 1px 18px no-repeat;
    opacity: .7;
    filter: drop-shadow(0 0 6px rgba(232,184,109,.28));
}
.card:is(:hover, :focus-within, :active)::after,
.stat-card:is(:hover, :focus-within, :active)::after,
.exercise-card:is(:hover, :focus-within, :active)::after,
.login-card:is(:hover, :focus-within, :active)::after,
.modal-box:is(:hover, :focus-within, :active)::after,
.chart-container:is(:hover, :focus-within, :active)::after {
    animation: cardScan .85s ease-in-out forwards;
}
@keyframes cardScan {
    0%   { transform: translateY(0); opacity: 0; }
    10%  { opacity: .95; }
    92%  { opacity: .5; }
    100% { transform: translateY(320px); opacity: 0; }
}
.card-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   .875rem;
    gap:             .5rem;
    position:        relative;
    padding-bottom:  .7rem;
}
.card-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(232,184,109,.38), rgba(255,255,255,.04) 32%, transparent 88%);
}
.card-title {
    font-size:   .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:       var(--text-light);
    position:    relative;
    padding-left: 16px;
}
.card-title::before,
.card-title::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.card-title::before {
    width: 10px;
    height: 10px;
    border-top: 1px solid rgba(232,184,109,.65);
    border-left: 1px solid rgba(232,184,109,.65);
}
.card-title::after {
    width: 6px;
    height: 1px;
    background: rgba(232,184,109,.5);
    left: 4px;
}
.card-body { font-size: .9rem; color: var(--text-muted); }

/* ---- Dashboard stats grid -------------------------------- */
.dashboard-grid {
    display: grid;
    gap:     14px;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.04);
    border-radius: calc(var(--radius) + 2px);
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent 65%);
}
.stat-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
        var(--panel);
    border:        1px solid var(--line);
    border-radius: var(--radius);
    padding:       20px;
    cursor:        default;
    transition:    border-color var(--transition), background var(--transition), transform var(--transition);
    position:      relative;
    overflow:      hidden;
    isolation:     isolate;
    backdrop-filter: blur(18px);
    box-shadow:    0 18px 36px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.03);
}
.stat-card:hover { border-color: rgba(200,147,58,.3); background: var(--panel2); transform: translateY(-2px); }
.stat-card .stat-label {
    font-size:   .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:       var(--text-light);
    margin-bottom: 10px;
}
.stat-card .stat-value {
    font-size:   2.6rem;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    color:       var(--text);
}
.stat-card .stat-unit {
    font-size:   .8rem;
    color:       var(--text-muted);
    margin-top:  5px;
}

/* ---- Buttons --------------------------------------------- */
.btn {
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    gap:         .5rem;
    padding:     12px 22px;
    border:      none;
    border-radius: 999px;
    font-size:   .88rem;
    font-weight: 700;
    min-height:  var(--tap-target);
    transition:  opacity var(--transition), transform var(--transition), background var(--transition);
    white-space: nowrap;
    font-family: inherit;
    cursor:      pointer;
    letter-spacing: .01em;
    position:    relative;
    overflow:    hidden;
    isolation:   isolate;
    border:      1px solid transparent;
    box-shadow:  0 10px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn:active { transform: scale(0.97); }
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 34%, transparent 64%);
    transform: translateX(-135%);
    transition: transform .5s ease;
    pointer-events: none;
}
.btn:hover::before,
.btn:focus-visible::before,
.btn:active::before { transform: translateX(135%); }
.btn-primary   {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: var(--bg);
    box-shadow: 0 12px 28px rgba(200,147,58,.22), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover   { opacity: .88; color: var(--bg); text-decoration: none; }
.btn-secondary {
    background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
    color: var(--text);
    border: 1px solid var(--line);
}
.btn-secondary:hover { background: rgba(255,255,255,.12); color: var(--text); text-decoration: none; }
.btn-success   { background: var(--success); color: #fff; }
.btn-success:hover { opacity: .88; color: #fff; text-decoration: none; }
.btn-danger    { background: var(--danger); color: #fff; }
.btn-danger:hover  { opacity: .88; color: #fff; text-decoration: none; }
.btn-warning   { background: var(--warning); color: var(--bg); }
.btn-warning:hover { opacity: .88; color: var(--bg); text-decoration: none; }
.btn-ghost {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
    color:      var(--text-muted);
    border:     1px solid var(--line);
}
.btn-ghost:hover { border-color: rgba(200,147,58,.35); color: var(--text); text-decoration: none; }
.btn-sm     { padding: 7px 16px; font-size: .78rem; min-height: 36px; }
.btn-lg     { padding: 14px 28px; font-size: 1rem; }
.btn-block  { width: 100%; }
.btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }

/* ---- Forms ----------------------------------------------- */
.form-group { margin-bottom: 1rem; }
.form-label {
    display:        block;
    font-size:      .7rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--text-light);
    margin-bottom:  6px;
}
.form-control {
    display:    block;
    width:      100%;
    padding:    12px 14px;
    background: rgba(255,255,255,.05);
    border:     1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size:  .9rem;
    color:      var(--text);
    min-height: var(--tap-target);
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
}
.form-control:focus {
    outline:      none;
    border-color: var(--primary);
    box-shadow:   0 0 0 3px rgba(200,147,58,.1);
}
.form-control::placeholder { color: var(--text-light); }
.form-control option { background: #111620; color: var(--text); }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-hint  { font-size: .78rem; color: var(--text-muted); margin-top: .25rem; }
.form-error { font-size: .78rem; color: var(--danger);     margin-top: .25rem; }
.form-row {
    display: grid;
    gap:     .75rem;
    grid-template-columns: 1fr 1fr;
}

/* ---- Tables ---------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
.table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .875rem;
}
.table thead tr { border-bottom: 1px solid var(--line); }
.table th {
    text-align:      left;
    padding:         8px 12px;
    font-size:       .65rem;
    letter-spacing:  .12em;
    text-transform:  uppercase;
    color:           var(--text-light);
    font-weight:     700;
}
.table td {
    padding:         13px 12px;
    border-bottom:   1px solid var(--line2);
    color:           var(--text);
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(255,255,255,.02); }

/* ---- Set logging ----------------------------------------- */
.set-row {
    display:     grid;
    gap:         .5rem;
    grid-template-columns: 32px 1fr 1fr 1fr 48px;
    align-items: center;
    padding:     .625rem 0;
    border-bottom: 1px solid var(--line2);
}
.set-row:last-child { border-bottom: none; }
.set-num {
    font-size:   .875rem;
    color:       var(--text-light);
    text-align:  center;
}
.set-input {
    padding:    .625rem .5rem;
    background: rgba(255,255,255,.05);
    border:     1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size:  1rem;
    color:      var(--text);
    text-align: center;
    width:      100%;
    min-height: var(--tap-target);
    font-family: inherit;
    transition: border-color var(--transition);
}
.set-input:focus { border-color: var(--primary); outline: none; }
.set-check {
    width:  var(--tap-target);
    height: var(--tap-target);
    background:    rgba(255,255,255,.05);
    border:        2px solid var(--line);
    border-radius: var(--radius-sm);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     1.25rem;
    transition:    background var(--transition), border-color var(--transition);
    cursor:        pointer;
}
.set-check.done { background: var(--success); border-color: var(--success); color: #fff; }

/* ---- Progress bars --------------------------------------- */
.progress-bar {
    height:        6px;
    background:    rgba(255,255,255,.07);
    border-radius: 999px;
    overflow:      hidden;
}
.progress-fill {
    height:        100%;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.16), transparent 34%),
        var(--primary);
    box-shadow:    0 0 18px rgba(200,147,58,.2);
    transition:    width .4s ease;
}
.progress-fill.green { background: linear-gradient(90deg, rgba(255,255,255,.14), transparent 34%), var(--success); box-shadow: 0 0 18px rgba(61,190,120,.18); }
.progress-fill.amber { background: linear-gradient(90deg, rgba(255,255,255,.14), transparent 34%), var(--warning); box-shadow: 0 0 18px rgba(232,160,42,.18); }
.progress-fill.red   { background: linear-gradient(90deg, rgba(255,255,255,.14), transparent 34%), var(--danger);  box-shadow: 0 0 18px rgba(229,75,75,.16); }

/* Macro bars */
.macro-bar   { display: flex; gap: .75rem; align-items: center; margin-bottom: .625rem; }
.macro-label { font-size: .8rem; color: var(--text-muted); width: 60px; flex-shrink: 0; }
.macro-track { flex: 1; }
.macro-pct   { font-size: .78rem; color: var(--text-muted); width: 36px; text-align: right; }

/* ---- Badges ---------------------------------------------- */
.badge {
    display:     inline-flex;
    align-items: center;
    padding:     4px 10px;
    border-radius: 999px;
    font-size:   .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.badge-primary { background: rgba(200,147,58,.15); color: var(--primary); }
.badge-success { background: rgba(61,190,120,.15);  color: var(--success); }
.badge-warning { background: rgba(232,160,42,.15);  color: var(--warning); }
.badge-danger  { background: rgba(229,75,75,.15);   color: var(--danger); }
.badge-muted   { background: rgba(255,255,255,.06); color: var(--text-muted); }

/* ---- Exercise list --------------------------------------- */
.exercise-card {
    padding:       16px;
    border:        1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        var(--panel);
    margin-bottom: .875rem;
    position:      relative;
    overflow:      hidden;
    isolation:     isolate;
    backdrop-filter: blur(18px);
}
.exercise-name { font-size: 1rem; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.exercise-meta { font-size: .8rem; color: var(--text-muted); }
.exercise-sets { margin-top: .75rem; }

/* ---- Chart container ------------------------------------- */
.chart-container {
    position:      relative;
    width:         100%;
    height:        200px;
    border-radius: var(--radius-sm);
    overflow:      hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
        rgba(255,255,255,.02);
    border:        1px solid rgba(255,255,255,.05);
    backdrop-filter: blur(16px);
}

/* ---- Tabs ------------------------------------------------ */
.tabs {
    display:    flex;
    gap:        3px;
    background: rgba(255,255,255,.04);
    border:     1px solid var(--line);
    border-radius: var(--radius-sm);
    padding:    4px;
    margin-bottom: 20px;
    overflow-x: auto;
}
.tab-btn {
    flex:        1;
    min-width:   max-content;
    padding:     .625rem 1rem;
    background:  transparent;
    border:      none;
    border-radius: calc(var(--radius-sm) - 2px);
    font-size:   .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    color:       var(--text-muted);
    transition:  all var(--transition);
    min-height:  var(--tap-target);
    font-family: inherit;
    cursor:      pointer;
}
.tab-btn.active {
    background:  var(--panel);
    color:       var(--primary);
    border:      1px solid rgba(200,147,58,.2);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- Modals ---------------------------------------------- */
.modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.72);
    display:         flex;
    align-items:     flex-end;
    z-index:         1000;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity var(--transition);
    backdrop-filter: blur(8px);
}
.modal-overlay.visible { opacity: 1; pointer-events: auto; }
.modal-box {
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
        var(--panel);
    border:        1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
    padding:       28px;
    width:         100%;
    max-width:     560px;
    max-height:    90dvh;
    margin:        0 auto;
    box-shadow:    var(--shadow-lg);
    transform:     translateY(20px);
    transition:    transform var(--transition);
    overflow-x:    hidden;
    overflow-y:    auto;
    position:      relative;
    isolation:     isolate;
    backdrop-filter: blur(18px);
}
.modal-overlay.visible .modal-box { transform: translateY(0); }
.modal-title {
    font-size:   1.2rem;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -.03em;
    color:       var(--text);
}
.modal-message { color: var(--text-muted); margin-bottom: 1.5rem; font-size: .9rem; }
.modal-actions {
    display:         flex;
    gap:             .75rem;
    justify-content: flex-end;
    margin-top:      20px;
}

/* ---- Toasts ---------------------------------------------- */
#toast-container {
    position:   fixed;
    bottom:     1.5rem;
    left:       50%;
    transform:  translateX(-50%);
    z-index:    9001;
    display:    flex;
    flex-direction: column;
    gap:        .5rem;
    pointer-events: none;
    max-width:  90vw;
}
.toast {
    padding:       .75rem 1.5rem;
    border-radius: 999px;
    font-size:     .875rem;
    font-weight:   600;
    color:         #fff;
    box-shadow:    var(--shadow-lg);
    opacity:       0;
    transform:     translateY(10px);
    transition:    opacity .2s, transform .2s;
    pointer-events: auto;
    max-width:     400px;
    text-align:    center;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast-success { background: var(--success); color: var(--bg); }
.toast-error   { background: var(--danger); }
.toast-info    { background: rgba(200,147,58,.92); color: var(--bg); }

/* ---- Login page ------------------------------------------ */
.login-wrap {
    min-height:      100dvh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--bg);
    padding:         1.5rem;
    position:        relative;
    z-index:         2;
}
.login-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
        var(--panel);
    border:        1px solid var(--line);
    border-radius: var(--radius);
    padding:       2.5rem;
    width:         100%;
    max-width:     420px;
    box-shadow:    var(--shadow-lg);
    position:      relative;
    overflow:      hidden;
    isolation:     isolate;
    backdrop-filter: blur(20px);
}
.login-logo {
    display:       flex;
    align-items:   center;
    gap:           14px;
    margin-bottom: 2rem;
}
.login-logo-mark {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    box-shadow: 0 0 28px rgba(200,147,58,.24);
}
.login-logo-text {
    display:        flex;
    flex-direction: column;
}
.login-logo-name {
    font-size:      1.5rem;
    font-weight:    800;
    letter-spacing: .14em;
    text-transform: uppercase;
    background:     linear-gradient(135deg, #fff8ea 10%, #f0d7a7 55%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color:          transparent;
    line-height:    1;
}
.login-logo-sub {
    font-size:   .72rem;
    color:       var(--text-light);
    letter-spacing: .06em;
    margin-top:  3px;
}

/* ---- Offline page ---------------------------------------- */
.offline-page {
    min-height:      100dvh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         2rem;
    background:      var(--bg);
    color:           var(--text);
}
.offline-page h1 { font-size: 2rem; margin-bottom: 1rem; }
.offline-page p  { color: var(--text-muted); }

/* ---- Empty state ----------------------------------------- */
.empty-state {
    text-align:  center;
    padding:     3rem 1rem;
    color:       var(--text-muted);
    font-size:   .95rem;
}
.empty-state-icon { font-size: 3rem; margin-bottom: .75rem; }

/* ---- Divider --------------------------------------------- */
.divider { height: 1px; background: var(--line); margin: 1.5rem 0; border: none; }

/* ---- Scroll reveal --------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: none; }

.btn-ripple {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(255,255,255,.32);
    animation: btnRipple .6s linear;
    pointer-events: none;
}
@keyframes btnRipple {
    to {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

/* ---- Utilities ------------------------------------------- */
.mt-1 { margin-top: .5rem; }  .mt-2 { margin-top: 1rem; }   .mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.text-muted   { color: var(--text-muted); }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.font-bold    { font-weight: 700; }
.d-flex       { display: flex; }
.align-center { align-items: center; }
.gap-1        { gap: .5rem; }
.gap-2        { gap: 1rem; }
.flex-1       { flex: 1; }
.hidden       { display: none !important; }

/* ---- Responsive ------------------------------------------ */
@media (min-width: 901px) {
    .app-shell.nav-collapsed .app-nav {
        padding-inline: 12px;
    }
    .app-shell.nav-collapsed .nav-rail-top {
        justify-content: center;
        flex-direction: column;
        gap: 12px;
    }
    .app-shell.nav-collapsed .rail-brand {
        justify-content: center;
        margin-bottom: 0;
    }
    .app-shell.nav-collapsed .rail-brand-text,
    .app-shell.nav-collapsed .nav-label,
    .app-shell.nav-collapsed .nav-text,
    .app-shell.nav-collapsed .rail-status #sync-label,
    .app-shell.nav-collapsed .rail-user {
        display: none;
    }
    .app-shell.nav-collapsed .nav-menu {
        align-items: center;
    }
    .app-shell.nav-collapsed .nav-item {
        width: 52px;
        justify-content: center;
        padding-inline: 0;
    }
    .app-shell.nav-collapsed .nav-icon {
        width: auto;
    }
    .app-shell.nav-collapsed .rail-status {
        padding-inline: 10px;
    }
    .app-shell.nav-collapsed .nav-rail-toggle {
        transform: rotate(180deg);
    }
}

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-rows:    auto 1fr;
    }
    .app-nav {
        position:       sticky;
        top:            0;
        height:         64px;
        flex-direction: column;
        overflow:       visible;
        border-right:   none;
        border-bottom:  1px solid var(--line);
        padding:        0;
        gap:            0;
        z-index:        110;
        background:     linear-gradient(180deg, rgba(15,19,28,.94), rgba(10,13,19,.9));
    }
    .nav-rail-top { display: none; }
    .nav-drawer {
        position: fixed;
        top: 0;
        left: 0;
        width: min(86vw, 340px);
        height: 100dvh;
        padding: 18px 14px 16px;
        background: linear-gradient(180deg, rgba(16,21,31,.98), rgba(9,12,18,.96));
        border-right: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 28px 60px rgba(0,0,0,.38);
        transform: translateX(-100%);
        transition: transform .24s ease;
        z-index: 120;
        overflow-y: auto;
    }
    .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 4px 4px 14px;
    }
    .nav-header-mobile {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        padding:         0 16px;
        min-height:      56px;
        background:      linear-gradient(180deg, rgba(15,19,28,.92), rgba(10,13,19,.88));
        backdrop-filter: blur(20px);
    }
    .nav-toggle  { display: flex; }
    .nav-label   { display: block; padding-top: 6px; }
    .rail-status { display: block; }
    .nav-menu {
        display:    flex;
        flex-direction: column;
        padding:    8px 0 14px;
        border-top: 1px solid rgba(255,255,255,.05);
        gap:        2px;
        flex:       1;
    }
    .app-shell.nav-open .nav-drawer {
        transform: translateX(0);
    }
    .app-shell.nav-open .nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    .nav-item      { padding: 10px 14px; }
    .page-content  { padding: 20px 16px 80px; }
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { grid-template-columns: 1fr; }
    .page-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .page-header {
        padding: 20px 18px 18px;
        flex-direction: column;
        align-items: stretch;
    }
    .app-shell::before {
        width: 240px;
        height: 240px;
        right: -40px;
        top: -40px;
        opacity: .75;
    }
    .app-shell::after {
        width: 220px;
        height: 220px;
        left: -60px;
        bottom: 12vh;
        opacity: .65;
    }
}

@media (max-width: 560px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    .page-header,
    .card {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (min-width: 640px) {
    .modal-overlay { align-items: center; }
    .modal-box { border-radius: var(--radius); }
}

@media (min-width: 901px) and (max-width: 1200px) {
    .page-content { padding: 28px 28px 80px; }
}

@media (hover: none) and (pointer: coarse) {
    .nav-item:active,
    .btn:active,
    .card:active,
    .stat-card:active,
    .exercise-card:active { transform: translateY(-1px) scale(.995); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    #grain,
    #spotlight,
    .app-shell::before,
    .app-shell::after { display: none; }
}