:root{--p-primary-color:#0f6cbd;--p-primary-contrast-color:#fff;--color-primary:#0f6cbd;--color-accent:#e94560;--bg-page:#f5f6fa;--bg-surface:#fff;--bg-muted:#f0f4f8;--text-primary:#1a1a2e;--text-secondary:#556;--text-muted:#889;--border-default:#e2e4ea;--border-strong:#c8cad4;--status-positive:#0f6cbd;--bg-positive:#ebf3fc;--status-warning:#854f0b;--bg-warning:#faeeda;--status-danger:#a32d2d;--bg-danger:#fcebeb;--status-info:#115ea3;--bg-info:#ebf3fc;--status-neutral:#4b5563;--bg-neutral:#f3f4f6;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 3px #0000000f;--shadow-md:0 2px 8px #00000014;--sidebar-width:240px;--sidebar-collapsed-width:64px;--font-sans:Inter, system-ui, sans-serif;--font-mono:"Fira Code", Consolas, monospace;--text-xs:11px;--text-sm:13px;--text-base:14px;--text-lg:16px;--text-xl:20px;--text-2xl:24px;--brand-primary:var(--color-primary);--bg-card:var(--bg-surface);--text-default:var(--text-primary);--link-color:var(--color-primary);--topbar-height:56px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--radius:var(--radius-md);--radius-full:9999px;--text-md:var(--text-base);--border-danger:var(--status-danger);--border-warning:var(--status-warning);--border-info:var(--status-info)}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-primary);background-color:var(--bg-page);font-weight:400;line-height:1.6}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}.app-shell{height:100vh;display:flex;overflow:hidden}.main-area{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.page-content{padding:var(--space-lg);flex:1;overflow-y:auto}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--bg-surface);border-right:1px solid var(--border-default);z-index:10;flex-direction:column;height:100vh;transition:width .2s,min-width .2s;display:flex;position:relative;overflow:hidden}.sidebar.collapsed{width:var(--sidebar-collapsed-width);min-width:var(--sidebar-collapsed-width)}.sidebar__logo{align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-md);border-bottom:1px solid var(--border-default);min-height:64px;display:flex;overflow:hidden}.sidebar__logo-mark{background:var(--color-primary);color:#fff;border-radius:var(--radius-md);width:36px;min-width:36px;height:36px;font-size:var(--text-lg);letter-spacing:-.5px;justify-content:center;align-items:center;font-weight:500;display:flex}.sidebar__logo-text{white-space:nowrap;overflow:hidden}.sidebar__logo-name{font-size:var(--text-base);color:var(--text-primary);font-weight:500;line-height:1.2}.sidebar__logo-sub{font-size:var(--text-xs);color:var(--text-muted);line-height:1.2}.sidebar__toggle{cursor:pointer;color:var(--text-muted);border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;font-size:16px;display:flex;position:absolute;top:16px;right:12px}.sidebar__toggle:hover{background:var(--bg-muted);color:var(--text-primary)}.sidebar.collapsed .sidebar__toggle{right:50%;transform:translate(50%)}.sidebar__nav{padding:var(--space-sm) 0;flex:1;overflow:hidden auto}.sidebar__group{margin-bottom:var(--space-sm)}.sidebar__group-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;padding:var(--space-sm) var(--space-md) 4px;white-space:nowrap;font-weight:500;overflow:hidden}.sidebar.collapsed .sidebar__group-label{opacity:0;height:0;padding:0}.sidebar__link{align-items:center;gap:var(--space-sm);padding:9px var(--space-md);color:var(--text-secondary);font-size:var(--text-sm);white-space:nowrap;cursor:pointer;border-left:3px solid #0000;font-weight:500;text-decoration:none;transition:background .15s,color .15s;display:flex;overflow:hidden}.sidebar__link:hover{background:var(--bg-muted);color:var(--text-primary);text-decoration:none}.sidebar__link.active{border-left-color:var(--color-accent);color:#0c447c;background:#e6f1fb}.sidebar__link i{text-align:center;min-width:18px;font-size:15px}.sidebar__link-label{white-space:nowrap;overflow:hidden}.sidebar.collapsed .sidebar__link{justify-content:center;padding-left:0;padding-right:0}.sidebar.collapsed .sidebar__link-label{display:none}.topbar{height:56px;min-height:56px;padding:0 var(--space-lg);background:var(--bg-surface);border-bottom:1px solid var(--border-default);box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;display:flex}.topbar__title{font-size:var(--text-xl);color:var(--text-primary);margin:0;font-weight:500}.topbar__right{align-items:center;gap:var(--space-md);display:flex}.topbar__user-name{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500}.topbar__role-badge{font-size:var(--text-xs);background:var(--bg-info);color:var(--status-info);border-radius:99px;padding:2px 8px;font-weight:500}.topbar__logout{border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;font-family:var(--font-sans);background:0 0;align-items:center;gap:6px;padding:5px 12px;transition:background .15s,color .15s;display:flex}.topbar__logout:hover{background:var(--bg-muted);color:var(--text-primary)}.page-header{margin-bottom:var(--space-lg);justify-content:space-between;align-items:flex-start;gap:var(--space-md);display:flex}.page-header__meta{flex:1}.page-header__title{font-size:var(--text-xl);color:var(--text-primary);margin:0 0 2px;font-weight:500;line-height:1.3}.page-header__subtitle{font-size:var(--text-sm);color:var(--text-muted);margin:0}.page-header__actions{align-items:center;gap:var(--space-sm);flex-shrink:0;display:flex}.status-badge{font-size:var(--text-xs);text-transform:capitalize;white-space:nowrap;border-radius:99px;align-items:center;padding:2px 10px;font-weight:500;display:inline-flex}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.w-full{width:100%}