:root { --bg:#f5f7fa; --surface:#fff; --ink:#1c2635; --ink-soft:#657386; --line:#e2e8ef; --red:#d82024; --blue:#0f5d9a; --shadow:0 8px 32px rgba(18,36,61,.07); --radius:12px; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
html,body { margin:0; min-width:320px; height:100%; }
body { background:var(--bg); color:var(--ink); font-size:13px; line-height:1.4; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.42; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.initial-loading { padding:40px; color:var(--ink-soft); }
.app-shell { display:grid; grid-template-columns:225px minmax(0,1fr); min-height:100vh; }
.sidebar { background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:100vh; padding:20px 12px 18px; position:sticky; top:0; height:100vh; overflow:auto; }
.brand { display:flex; align-items:center; gap:10px; padding:7px 12px 20px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.brand-mark { display:grid; place-items:center; width:33px; height:33px; border-radius:8px; color:white; background:linear-gradient(135deg,#ed353a,#b5000a); font-weight:900; font-size:19px; letter-spacing:-2px; }
.brand-name { font-size:17px; font-weight:850; letter-spacing:-.7px; line-height:1; }
.brand-sub { font-size:10px; font-weight:750; color:var(--ink-soft); text-transform:uppercase; letter-spacing:2px; margin-top:5px; }
.side-label { font-size:10px; color:#94a0b1; letter-spacing:1.6px; font-weight:800; text-transform:uppercase; padding:0 13px; margin:4px 0 8px; }
.side-nav { display:flex; flex-direction:column; gap:3px; }
.side-link { display:flex; align-items:center; gap:11px; width:100%; border:0; border-radius:8px; color:#566373; padding:11px 12px; background:none; text-align:left; font-weight:650; min-height:40px; }
.side-link:hover { background:#f4f6f8; }
.side-link.active { background:#fff1f1; color:#ae1a21; }
.side-link .mini-symbol { width:17px; height:17px; display:grid; place-items:center; font-size:16px; }
.side-link .trail { margin-left:auto; color:#a7b0bc; font-size:10px; }
.side-spacer { flex:1; min-height:20px; }
.side-card { border:1px solid #e4e8ec; background:#f9fafb; border-radius:10px; padding:12px; margin:8px 5px 0; }
.side-card p { margin:5px 0 0; color:var(--ink-soft); font-size:11px; }
.side-card strong { font-size:12px; }
.side-link-small { display:block; padding:10px 13px; color:var(--ink-soft); font-size:11px; }
.main { min-width:0; }
.topbar { background:white; border-bottom:1px solid var(--line); height:60px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 24px; }
.breadcrumb { display:flex; align-items:center; gap:9px; color:#8a94a3; font-size:12px; }
.breadcrumb strong { color:#394657; font-weight:700; }
.top-actions { display:flex; align-items:center; gap:8px; }
.page { padding:24px 26px 35px; max-width:2000px; margin:0 auto; min-width:0; }
.page-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; margin-bottom:19px; }
.eyebrow { text-transform:uppercase; font-size:10px; letter-spacing:1.8px; font-weight:850; color:var(--red); margin-bottom:5px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:25px; line-height:1.2; font-weight:800; letter-spacing:-.8px; margin-bottom:6px; }
h2 { font-size:17px; letter-spacing:-.35px; }
h3 { font-size:14px; }
.muted { color:var(--ink-soft); }
.subtext { color:#8490a0; font-size:12px; margin-bottom:0; }
.inline { display:flex; align-items:center; gap:8px; }
.wrap { flex-wrap:wrap; }
.toolbar { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-bottom:13px; box-shadow:0 2px 6px rgba(30,40,60,.018); }
.toolbar-group { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; min-width:34px; border:1px solid #dce3eb; background:white; border-radius:8px; padding:0 12px; color:#455265; font-size:12px; font-weight:700; white-space:nowrap; }
.btn:hover:not(:disabled) { background:#f4f7fa; border-color:#c4d0df; }
.btn-plain { border-color:transparent; }
.btn-small { height:29px; padding:0 9px; font-size:11px; }
.btn-primary { color:#fff; background:#bf2229; border-color:#bf2229; }
.btn-primary:hover:not(:disabled) { color:#fff; background:#a71921; border-color:#a71921; }
.btn-danger { color:#b32323; background:#fff5f5; border-color:#f5d9d9; }
.btn-active { border-color:#edc6c7; background:#fff4f4; color:#ab1d25; }
.btn-ghost { border-color:transparent; background:transparent; }
.badge { display:inline-flex; align-items:center; gap:4px; padding:5px 8px; border-radius:999px; background:#f1f3f6; color:#566271; font-weight:750; font-size:10px; white-space:nowrap; }
.badge-demo { background:#fff7e5; color:#895a12; border:1px solid #f6e4bb; }
.badge-manage { background:#edf9f2; color:#16643a; border:1px solid #d5ecdf; }
.status-dot { height:7px; width:7px; border-radius:50%; background:#4bba77; }
.note-line { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.input,.select,.textarea { border:1px solid #dce3eb; background:white; border-radius:8px; color:var(--ink); padding:9px 11px; min-width:0; width:100%; }
.input:focus,.select:focus,.textarea:focus { outline:2px solid #cee4fb; border-color:#86b7e2; }
.input-sm { height:34px; padding:6px 9px; font-size:12px; }
.input-search { width:180px; }
.textarea { resize:vertical; min-height:76px; }
.form-label { display:block; color:#566273; font-size:11px; font-weight:750; margin-bottom:5px; }
.form-hint { font-size:11px; color:var(--ink-soft); }
.card { background:white; border:1px solid var(--line); border-radius:12px; box-shadow:0 1px 3px rgba(22,34,55,.025); }
.warning-banner { border:1px solid #f3dfba; color:#81580e; background:#fffbef; padding:10px 14px; border-radius:9px; margin:0 0 14px; line-height:1.5; }
.information-banner { border:1px solid #dbe9f6; background:#f3f8fe; color:#426381; padding:11px 13px; border-radius:9px; margin:12px 0; }
.hidden { display:none !important; }
.separator { height:1px; background:var(--line); margin:14px 0; }
.empty-state { text-align:center; padding:38px; color:#8390a1; }
.mini-kpi { background:#f6f8fa; padding:16px; border-radius:10px; border:1px solid var(--line); }
.mini-kpi strong { display:block; font-size:23px; color:var(--ink); margin-top:5px; }
.lock { font-size:11px; color:#825aa4; }
@media (max-width:1000px) { .app-shell { grid-template-columns:70px minmax(0,1fr); } .sidebar { padding:16px 7px; } .brand { padding:4px 10px 20px; justify-content:center; } .brand-text,.side-label,.side-link .nav-name,.side-card,.side-link-small,.side-link .trail { display:none; } .side-link { justify-content:center; padding:11px 5px; } .page { padding:18px 12px; } .topbar { padding:0 14px; } }
@media (max-width:620px) { .app-shell { grid-template-columns:1fr; } .sidebar { position:relative; width:100%; height:auto; min-height:0; flex-direction:row; overflow-x:auto; padding:8px 12px; border-right:0; border-bottom:1px solid var(--line); align-items:center; } .brand { border:0; padding:0; margin:0 10px 0 0; } .brand-mark { width:28px; height:28px; } .side-nav { flex-direction:row; } .side-link { min-height:34px; } .side-spacer { display:none; } .page-heading { flex-direction:column; } .page { padding:14px 9px; } .topbar { height:46px; padding:0 10px; } .breadcrumb { font-size:10px; } h1 { font-size:21px; } .toolbar { gap:8px; padding:9px; } }


/* Luse Planning v0.2: user-selectable navigation layouts */
.topbar { position:sticky; top:0; z-index:15; }
.menu-picker-label { font-size:11px; color:#718093; font-weight:700; }
.menu-mode-control { width:auto; min-width:116px; height:32px; border-radius:8px; padding:4px 8px; font-size:11px; font-weight:700; color:#475466; }
.menu-toggle { font-size:19px; line-height:1; color:#475466; }
.app-shell.nav-icons { grid-template-columns:62px minmax(0,1fr); }
.app-shell.nav-icons .sidebar { padding:15px 7px; }
.app-shell.nav-icons .sidebar .brand { padding:3px 4px 15px; justify-content:center; }
.app-shell.nav-icons .sidebar .brand-text,
.app-shell.nav-icons .sidebar .side-label,
.app-shell.nav-icons .sidebar .nav-name,
.app-shell.nav-icons .sidebar .side-card,
.app-shell.nav-icons .sidebar .side-link-small,
.app-shell.nav-icons .sidebar .trail { display:none; }
.app-shell.nav-icons .sidebar .side-link { justify-content:center; padding:10px 5px; }
.app-shell.nav-hidden { grid-template-columns:minmax(0,1fr); }
.app-shell.nav-hidden .sidebar { display:none; }
.app-shell.nav-bottom { grid-template-columns:minmax(0,1fr); padding-bottom:47px; }
.app-shell.nav-bottom .sidebar {
  position:fixed; top:auto; bottom:0; left:0; right:0; width:100%; height:47px;
  min-height:47px; z-index:24; flex-direction:row; align-items:center; overflow:visible;
  padding:4px 14px; background:#fff; border-right:0; border-top:1px solid #d8e0e7;
  box-shadow:0 -3px 12px rgba(31,48,70,.05);
}
.app-shell.nav-bottom .sidebar .brand,
.app-shell.nav-bottom .sidebar .side-label,
.app-shell.nav-bottom .sidebar .side-card,
.app-shell.nav-bottom .sidebar .side-link-small,
.app-shell.nav-bottom .sidebar .side-spacer { display:none; }
.app-shell.nav-bottom .sidebar .side-nav { display:flex; flex-direction:row; align-items:center; gap:3px; width:100%; height:100%; overflow:auto; }
.app-shell.nav-bottom .sidebar .side-link { min-height:34px; height:34px; width:auto; padding:6px 12px; white-space:nowrap; font-size:11px; }
.app-shell.nav-bottom .sidebar .side-link .mini-symbol { font-size:13px; }
.app-shell.nav-bottom .sidebar .side-link .trail { font-size:9px; }
@media (max-width:1000px) {
  .app-shell.nav-icons { grid-template-columns:60px minmax(0,1fr); }
}
@media (max-width:620px) {
  .app-shell.nav-icons { grid-template-columns:1fr; }
  .app-shell.nav-icons .sidebar { flex-direction:row; align-items:center; min-height:0; height:auto; padding:5px 10px; }
  .app-shell.nav-icons .sidebar .side-nav { flex-direction:row; gap:3px; }
  .app-shell.nav-icons .sidebar .brand { margin:0 6px 0 0; padding:0; }
  .app-shell.nav-bottom .sidebar { padding:4px 7px; }
  .app-shell.nav-bottom .sidebar .side-link { padding:5px 9px; }
  .menu-picker-label { display:none; }
  .menu-mode-control { min-width:86px; max-width:111px; }
  .top-actions { gap:4px; }
  .top-actions .badge { display:none; }
}


/* V0.3 - layout controls next to the breadcrumb, two sticky toolbars */
.breadcrumb { flex-wrap:wrap; white-space:normal; }
.breadcrumb-menu { display:inline-flex; align-items:center; gap:8px; border-left:1px solid #dce3eb; padding-left:14px; margin-left:7px; }
.breadcrumb-menu .menu-picker-label { color:#6e7a89; font-size:11px; }
.breadcrumb-menu .menu-mode-control { width:auto; min-width:133px; font-weight:700; }
.sticky-controls { position:sticky; top:60px; z-index:14; background:#f5f7fa; border-bottom:1px solid #e3e8ef; padding:9px 26px; }
.sticky-controls .toolbar { margin:0; box-shadow:0 1px 4px rgba(20,35,50,.03); }
.planning-toolbar { align-items:center; gap:10px 16px; }
.planning-toolbar .zoom-tools { flex-wrap:nowrap; border-left:1px solid #e1e6ed; padding-left:12px; margin-left:auto; }
.zoom-label { color:#657386; font-size:11px; font-weight:700; }
.zoom-value { display:inline-block; min-width:39px; text-align:center; font-size:12px; font-weight:800; color:#33475b; font-variant-numeric:tabular-nums; }
.zoom-control { padding:0 7px; }
.zoom-control svg { flex-shrink:0; }
@media (max-width:1000px) {
  .sticky-controls { padding:8px 12px; }
  .planning-toolbar .zoom-tools { margin-left:0; }
}
@media (max-width:620px) {
  .sticky-controls { top:46px; padding:6px 9px; }
  .breadcrumb { min-width:0; flex:1; font-size:10px; gap:4px; }
  .breadcrumb-menu { padding-left:6px; margin-left:3px; gap:0; }
  .breadcrumb-menu .menu-mode-control { min-width:78px; max-width:108px; padding:4px 5px; }
  .planning-toolbar { padding:8px; }
  .planning-toolbar .input-search { width:135px; }
  .planning-toolbar .zoom-tools { padding-left:8px; }
  .zoom-label { display:none; }
}


/* V0.4: on mobile the upper navigation returns as soon as the user scrolls up. */
.mobile-header { display:contents; }
@media (max-width:620px) {
  .mobile-header {
    display:block;
    position:sticky;
    top:0;
    z-index:28;
    background:#fff;
    transition:transform .2s ease;
    will-change:transform;
  }
  .mobile-header .topbar,
  .mobile-header .sticky-controls {
    position:relative;
    top:auto;
    z-index:auto;
  }
  .app-shell.mobile-bars-hidden .mobile-header {
    transform:translateY(-100%);
    pointer-events:none;
  }
}
@media (max-width:620px) and (prefers-reduced-motion:reduce) {
  .mobile-header { transition:none; }
}