.l-admin{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) 1fr;background:#f5f7fa}.l-sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#0f172a 0%,#111827 55%,#0b1220 100%);color:#e5e7eb;padding:18px 14px;overflow:auto;border-right:1px solid rgba(255,255,255,.06);box-shadow:8px 0 30px rgba(15,23,42,.08);z-index:100}.l-sidebar__brand{display:flex;gap:12px;align-items:center;margin-bottom:22px;padding:8px 8px 18px;border-bottom:1px solid rgba(255,255,255,.08)}.l-sidebar__brand strong{display:block;font-size:15px;line-height:1.35;color:#fff}.l-sidebar__brand small{display:block;color:#94a3b8;font-size:12px;margin-top:4px}.c-logo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;font-weight:900;box-shadow:0 12px 28px rgba(37,99,235,.28)}.l-sidebar__nav{display:grid;gap:6px}.l-sidebar__link{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 12px;border-radius:13px;color:#cbd5e1;font-weight:800;border:1px solid transparent;text-decoration:none;transition:background .14s,border-color .14s,color .14s,transform .14s}.l-sidebar__link:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}.l-sidebar__link.is-active{background:#fff;color:#0f172a;border-color:rgba(255,255,255,.32);box-shadow:0 14px 30px rgba(0,0,0,.22)}.l-sidebar__icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:10px;background:rgba(255,255,255,.09);font-size:15px}.l-sidebar__link.is-active .l-sidebar__icon{background:#eff6ff;color:#2563eb}.l-main{min-width:0}.l-header{height:var(--header);position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 24px}.l-menuButton{display:none;width:42px;height:42px;border:1px solid #d8dee8;border-radius:12px;background:#fff;color:#111827;font-weight:900}.l-header__title{font-weight:900;color:#111827}.l-header__user{margin-left:auto;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:10px}.l-content{padding:24px;max-width:1440px;margin:auto}.c-pageHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}.c-pageHeader h1{font-size:28px;line-height:1.35;margin:0 0 8px}.c-pageHeader p{margin:0;color:var(--muted)}.c-pageHeader__actions{display:flex;gap:10px;flex-wrap:wrap}.c-grid{display:grid;gap:16px}.c-grid--stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:20px}.c-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.c-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:22px;margin-bottom:20px}.c-sectionHead{margin-bottom:18px}.c-sectionHead--split{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.c-sectionHead h2{margin:0 0 4px;font-size:20px}.c-sectionHead p{margin:0;color:var(--muted)}.c-kicker{font-size:12px;font-weight:800;color:var(--blue);letter-spacing:.08em;margin:0 0 6px!important}
@media(max-width:1024px){.l-admin{grid-template-columns:1fr}.l-sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);height:100vh;transform:translateX(-105%);transition:transform .22s ease;box-shadow:18px 0 50px rgba(15,23,42,.28)}.l-sidebar.is-open{transform:translateX(0)}.l-menuButton{display:grid;place-items:center}.c-grid--stats,.c-grid--2{grid-template-columns:1fr}.c-pageHeader,.c-sectionHead--split{display:grid}.l-content{padding:16px}}@media(max-width:640px){body{font-size:14px}.l-header{padding:0 12px}.l-header__title{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.l-header__user{font-size:12px}.c-card{padding:16px;border-radius:16px}.c-pageHeader h1{font-size:23px}}


/* Step12: clearer, extensible admin navigation */
.l-sidebar{padding:18px 12px;}
.l-sidebar__brand{margin-bottom:16px;}
.l-sidebar__section{
  margin:18px 8px 8px;
  color:#7dd3fc;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  line-height:1.2;
}
.l-sidebar__link{
  min-height:58px;
  padding:9px 10px;
  align-items:flex-start;
}
.l-sidebar__text{display:grid;gap:2px;min-width:0;}
.l-sidebar__text strong{font-size:14px;line-height:1.28;color:inherit;}
.l-sidebar__text small{font-size:11px;line-height:1.25;color:#94a3b8;font-weight:700;}
.l-sidebar__link.is-active .l-sidebar__text small{color:#64748b;}
.l-sidebar__icon{margin-top:2px;}
.l-header__title{display:grid;gap:1px;line-height:1.2;}
.l-header__title span{color:#64748b;font-size:11px;font-weight:800;}
.l-header__title strong{color:#0f172a;font-size:15px;}
@media(max-width:1024px){.l-sidebar__link{min-height:54px}.l-sidebar__section{margin-top:14px}}
@media(max-width:640px){.l-header__title span{display:none}.l-header__title strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}.l-header__user span{display:none}}


/* Step12: admin navigation redesign */
.l-admin{background:#f3f6fb;}
.l-sidebar{background:#0b1220;padding:16px 12px;}
.l-sidebar__brand{margin-bottom:16px;padding:8px 8px 16px;}
.l-sidebar__nav{gap:18px;}
.l-sidebar__section{display:grid;gap:7px;}
.l-sidebar__sectionTitle{padding:0 10px;color:#94a3b8;font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1.4;}
.l-sidebar__link{min-height:54px;padding:8px 10px;border-radius:14px;align-items:center;}
.l-sidebar__link.is-active{background:#eff6ff;color:#0f172a;border-color:rgba(147,197,253,.75);box-shadow:0 14px 32px rgba(0,0,0,.22)}
.l-sidebar__icon{flex:0 0 34px;width:34px;height:34px;border-radius:12px;font-size:16px;background:rgba(255,255,255,.08)}
.l-sidebar__text{display:grid;gap:1px;min-width:0;}
.l-sidebar__text strong{font-size:14px;line-height:1.25;color:inherit;}
.l-sidebar__text small{font-size:11px;line-height:1.25;color:#94a3b8;}
.l-sidebar__link.is-active .l-sidebar__text small{color:#64748b;}
.l-header{height:68px;background:rgba(255,255,255,.94);}
.l-header__heading{display:grid;gap:2px;min-width:0;}
.l-header__heading span{color:#64748b;font-size:11px;font-weight:900;letter-spacing:.08em;line-height:1.2;}
.l-header__heading strong{color:#0f172a;font-size:17px;font-weight:900;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.l-header__title{display:none;}
.l-header__user span{color:#334155;font-weight:800;}
@media(max-width:1024px){.l-sidebar__nav{gap:16px}.l-header{height:62px}.l-header__heading strong{font-size:15px}}
@media(max-width:640px){.l-header__user span{display:none}.l-header__heading span{display:none}.l-header__heading strong{font-size:14px}.l-content{padding:14px}}


/* Step12: extensible admin navigation */
.l-sidebar{padding:16px 12px;background:linear-gradient(180deg,#0b1220 0%,#101827 50%,#0f172a 100%)}
.l-sidebar__brand{margin-bottom:16px;padding:8px 8px 14px}.l-sidebar__brand strong{font-size:16px;line-height:1.25}.l-sidebar__brand small{font-size:11px;color:#94a3b8;font-weight:800;letter-spacing:.06em}.l-sidebar__group{display:grid;gap:6px;margin:0 0 16px}.l-sidebar__groupLabel{padding:0 10px;color:#7dd3fc;font-size:11px;font-weight:900;line-height:1.2;letter-spacing:.12em}.l-sidebar__link{min-height:58px;align-items:center;gap:12px;padding:8px 10px;border-radius:16px}.l-sidebar__linkBody{display:grid;gap:2px;min-width:0}.l-sidebar__linkBody strong{font-size:14px;line-height:1.2}.l-sidebar__linkBody small{color:#94a3b8;font-size:11px;font-weight:800;line-height:1.25}.l-sidebar__link.is-active .l-sidebar__linkBody small{color:#475569}.l-sidebar__icon{width:34px;height:34px;flex-basis:34px;border-radius:13px}.l-sidebar__icon svg{width:18px;height:18px;fill:currentColor}.l-header__title{display:grid;gap:1px}.l-header__title span{font-size:11px;color:#64748b;font-weight:900;letter-spacing:.08em}.l-header__title strong{font-size:16px;color:#111827}.l-header__user span{font-weight:800;color:#334155}.l-menuButton[aria-expanded="true"]{background:#dbeafe;color:#1d4ed8}
@media(max-width:1024px){.l-sidebar__link{min-height:54px}.l-sidebar__groupLabel{margin-top:4px}}
@media(max-width:640px){.l-header__title strong{font-size:14px}.l-header__title span{display:none}.l-sidebar{width:min(310px,calc(100vw - 40px))}}

/* Step14: sidebar readability */
:root{--sidebar:292px;}
.l-sidebar__brand>div{min-width:0}.l-sidebar__brand strong,.l-sidebar__brand small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:205px}.l-sidebar__link{gap:10px}.l-sidebar__linkBody{min-width:0;overflow:hidden}.l-sidebar__linkBody strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;letter-spacing:0}.l-sidebar__linkBody small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;line-height:1.25}.l-sidebar__icon{flex:0 0 32px;width:32px;height:32px}.l-sidebar__groupLabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.l-sidebar{width:min(292px,calc(100vw - 40px))}.l-sidebar__brand strong,.l-sidebar__brand small{max-width:190px}}

/* Step14: sidebar readability fix */
:root{--sidebar:292px;}
.l-sidebar__link{min-height:48px;padding:8px 10px;gap:10px;align-items:center;}
.l-sidebar__icon{width:32px;height:32px;flex-basis:32px;border-radius:11px;}
.l-sidebar__linkBody{min-width:0;overflow:hidden;}
.l-sidebar__linkBody strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px;line-height:1.25;}
.l-sidebar__linkBody small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;line-height:1.2;}
.l-sidebar__group{gap:5px;margin-bottom:14px;}
.l-sidebar__groupLabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:1024px){.l-sidebar{width:min(292px,calc(100vw - 40px));}.l-sidebar__link{min-height:48px;}}
@media(max-width:640px){.l-sidebar{width:min(292px,calc(100vw - 32px));}}

/* Step17: sidebar logout at bottom */
.l-sidebar{display:flex;flex-direction:column;overflow:hidden;}
.l-sidebar__nav{flex:1 1 auto;overflow:auto;padding-right:2px;}
.l-sidebar__footer{flex:0 0 auto;margin-top:auto;padding:12px 8px 2px;border-top:1px solid rgba(255,255,255,.10);display:grid;gap:10px;}
.l-sidebar__user{display:grid;gap:2px;min-width:0;padding:0 2px;}
.l-sidebar__user strong{display:block;color:#fff;font-size:13px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.l-sidebar__user span{display:block;color:#94a3b8;font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.l-sidebar__logout{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:13px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#e5e7eb;text-decoration:none;font-weight:900;transition:background .14s,border-color .14s,color .14s,transform .14s;}
.l-sidebar__logout:hover{background:#fff;color:#0f172a;border-color:#fff;transform:translateY(-1px);}

/* Step20: sidebar compaction / keep nav grouped at top */
.l-sidebar{display:flex;flex-direction:column;overflow:hidden;}
.l-sidebar__nav{flex:0 1 auto;align-content:start;overflow-y:auto;overflow-x:hidden;padding-right:3px;margin-bottom:auto;gap:10px;}
.l-sidebar__group{margin:0 0 8px;gap:4px;}
.l-sidebar__groupLabel{font-size:10.5px;margin:0 0 2px;padding:0 9px;}
.l-sidebar__link{min-height:44px;padding:7px 9px;border-radius:13px;gap:9px;}
.l-sidebar__icon{flex:0 0 30px;width:30px;height:30px;border-radius:10px;}
.l-sidebar__icon svg{width:16px;height:16px;}
.l-sidebar__linkBody strong{font-size:13px;line-height:1.18;}
.l-sidebar__linkBody small{font-size:10px;line-height:1.15;}
.l-sidebar__footer{margin-top:auto;padding-top:10px;}
@media(max-width:1024px){.l-sidebar__nav{gap:10px}.l-sidebar__link{min-height:46px}}

/* Step20: keep sidebar links gathered at the top */
.l-sidebar{overflow-y:auto;}
.l-sidebar__nav{flex:0 0 auto;overflow:visible;display:grid;gap:8px;padding-right:0;align-content:start;}
.l-sidebar__group{margin-bottom:8px;gap:4px;}
.l-sidebar__link{min-height:44px;padding:7px 9px;border-radius:13px;}
.l-sidebar__icon{width:30px;height:30px;flex-basis:30px;}
.l-sidebar__linkBody strong{font-size:13px;line-height:1.2;}
.l-sidebar__linkBody small{font-size:10px;line-height:1.15;}
.l-sidebar__footer{margin-top:auto;}
@media(max-width:1024px){.l-sidebar__link{min-height:44px}.l-sidebar__group{margin-bottom:8px}}