@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Manrope:wght@400;500;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}

:root{
    --bg-primary:#0a0e1a;--bg-secondary:#141925;--bg-card:#1a2030;--bg-hover:#222938;--bg-input:#0d1220;
    --accent-primary:#00d4ff;--accent-secondary:#ff6b9d;--accent-success:#00ff88;--accent-warning:#ffb347;
    --travel-color:#2ecc71;--travel-bg:rgba(46,204,113,.12);--travel-border:rgba(46,204,113,.4);
    --text-primary:#e8edf5;--text-secondary:#8b93a8;--text-muted:#515866;
    --border:#2a3244;--shadow:rgba(0,212,255,.1);--sidebar-width:300px;
}

body{font-family:'Manrope',-apple-system,system-ui,sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
.grain-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.03;z-index:9999;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* Layout */
.main{margin-left:var(--sidebar-width);padding:1.25rem 1.5rem 3rem;min-height:100vh;}

/* Header */
header{margin-bottom:1rem;animation:slideDown .5s ease-out;}
@keyframes slideDown{from{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
h1{font-family:'Space Mono',monospace;font-size:clamp(1.2rem,2.5vw,1.8rem);font-weight:700;letter-spacing:-.02em;margin-bottom:.25rem;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.subtitle{color:var(--text-secondary);font-size:.8rem;font-weight:500;}

/* Empty page */
.empty-page{text-align:center;padding:4rem 1rem;color:var(--text-muted);}
.empty-icon{font-size:3rem;display:block;margin-bottom:.75rem;}
.empty-page h3{color:var(--text-secondary);font-size:1.1rem;margin-bottom:.3rem;}
.empty-page p{font-size:.85rem;}

/* Page switching */
.page{display:none;animation:fadeIn .35s ease-out;}.page.active{display:block;}

/* Modal */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(10,14,26,.95);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(10px);padding:1rem;}
.modal.active{display:flex;animation:modalIn .3s ease-out;}
@keyframes modalIn{from{opacity:0}to{opacity:1}}
.modal-content{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.75rem;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:modalUp .3s ease-out;box-shadow:0 20px 40px rgba(0,0,0,.3);}
@keyframes modalUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.modal-close{position:absolute;top:1.25rem;right:1.25rem;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--text-secondary);transition:all .3s;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;}
.modal-close:hover{background:var(--bg-hover);color:var(--accent-secondary);transform:rotate(90deg);}
.modal-header{margin-bottom:1.25rem;}
.modal-title{font-family:'Space Mono',monospace;font-size:1.5rem;font-weight:700;margin-bottom:.4rem;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.modal-subtitle{color:var(--text-secondary);font-size:.88rem;}
.modal-body{color:var(--text-secondary);line-height:1.65;}
.modal-body h3{color:var(--text-primary);font-weight:700;margin-top:1.25rem;margin-bottom:.6rem;font-size:1rem;}
.modal-body ul{list-style:none;padding-left:0;}
.modal-body li{padding:.4rem 0;padding-left:1.4rem;position:relative;}
.modal-body li::before{content:'→';position:absolute;left:0;color:var(--accent-primary);font-weight:700;}
.modal-link{margin-top:1rem;color:var(--accent-primary);font-weight:700;cursor:pointer;font-size:.88rem;transition:color .2s;}.modal-link:hover{color:var(--accent-success);}

/* Detail timeline in modal (fitness sessions) */
.det-timeline{display:flex;flex-direction:column;gap:0;margin:.75rem 0;position:relative;padding-left:1.2rem;}
.det-timeline::before{content:'';position:absolute;left:.35rem;top:.6rem;bottom:.6rem;width:2px;background:var(--border);border-radius:1px;}
.det-item{display:flex;align-items:center;justify-content:space-between;padding:.55rem .85rem;border-radius:8px;position:relative;margin-bottom:.3rem;transition:transform .15s;}
.det-item::before{content:'';position:absolute;left:-1.05rem;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;z-index:1;}
.det-name{font-weight:700;font-size:.88rem;}
.det-dur{font-family:'Space Mono',monospace;font-size:.72rem;font-weight:700;opacity:.8;}
/* A = Strength (amber) */
.det-a{background:rgba(255,179,71,.08);border:1px solid rgba(255,179,71,.25);}
.det-a .det-name{color:#ffb347;}.det-a .det-dur{color:#ffb347;}
.det-a::before{background:#ffb347;box-shadow:0 0 6px rgba(255,179,71,.5);}
/* B = Cardio (green) */
.det-b{background:rgba(0,255,136,.06);border:1px solid rgba(0,255,136,.2);}
.det-b .det-name{color:#00ff88;}.det-b .det-dur{color:#00ff88;}
.det-b::before{background:#00ff88;box-shadow:0 0 6px rgba(0,255,136,.5);}
/* C = Class (pink) */
.det-c{background:rgba(255,107,157,.08);border:1px solid rgba(255,107,157,.25);}
.det-c .det-name{color:#ff6b9d;}.det-c .det-dur{color:#ff6b9d;}
.det-c::before{background:#ff6b9d;box-shadow:0 0 6px rgba(255,107,157,.5);}
/* brk = Break (muted) */
.det-brk{background:rgba(100,115,150,.06);border:1px dashed rgba(100,115,150,.25);}
.det-brk .det-name{color:var(--text-muted);font-weight:500;}.det-brk .det-dur{color:var(--text-muted);}
.det-brk::before{background:var(--text-muted);box-shadow:none;width:6px;height:6px;}

/* Routine items (used in hub + sidebar) */
.routine-item{padding:.25rem 0;color:var(--text-secondary);font-size:.78rem;display:flex;align-items:center;gap:.4rem;}
.routine-item::before{content:'✔';color:var(--accent-success);font-weight:700;font-size:.7rem;}

/* Mobile base */
@media(max-width:1024px){
    .main{margin-left:0;padding-top:3.5rem;}
}