:root{--topnav-height:56px}body,html{height:100%;margin:0;padding:0}body{background:var(--color-bg);font-family:var(--font-family,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);font-size:var(--text-base,14px);line-height:var(--leading-normal,1.5);-webkit-font-smoothing:antialiased}body,h1,h2,h3,h4,h5,h6{color:var(--color-text)}h1,h2,h3,h4,h5,h6{margin:0 0 12px;font-weight:600;line-height:1.3}h1{font-size:var(--text-3xl,24px)}h2{font-size:var(--text-2xl,20px)}h3{font-size:var(--text-xl,18px)}h4{font-size:var(--text-lg,16px)}p{margin:0 0 12px}.muted{color:var(--color-text-muted)}.app-root{min-height:100vh;display:flex;flex-direction:column;background:var(--color-bg)}.app-main{flex:1 1;display:flex;flex-direction:column;padding:var(--page-padding-y,24px) var(--page-padding-x,24px) 40px}.page{max-width:var(--page-max-width,1200px);margin:0 auto;width:100%}.topnav{position:-webkit-sticky;position:sticky;top:0;z-index:var(--z-sticky,20);justify-content:space-between;gap:16px;padding:12px var(--page-padding-x,24px);background:var(--color-surface);border-bottom:1px solid var(--color-border);min-height:var(--topnav-height)}.topnav,.topnav-left{display:flex;align-items:center}.topnav-left{gap:20px}.topnav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}.topnav-logo-circle{width:32px;height:32px;border-radius:var(--radius-full);background:var(--color-primary);color:var(--primary-foreground,#fff);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm,13px)}.topnav-logo-text{display:flex;flex-direction:column}.topnav-logo-title{font-size:var(--text-base,14px);font-weight:600;color:var(--color-text)}.topnav-logo-subtitle{font-size:var(--text-xs,11px);color:var(--color-text-muted)}.topnav-nav{display:flex;align-items:center;gap:4px}.topnav-link{padding:8px 14px;border-radius:var(--radius-lg);font-size:var(--text-base,14px);font-weight:500;color:var(--color-text-secondary);text-decoration:none;transition:all var(--transition-fast,.15s ease)}.topnav-link:hover{background:var(--color-surface-hover);color:var(--color-text)}.topnav-link.active{background:var(--color-primary-soft);color:var(--color-primary)}.topnav-right{display:flex;align-items:center;gap:12px}.card{background:var(--card-bg,var(--color-surface));border:1px solid var(--color-border);border-radius:var(--card-radius,var(--radius-2xl));padding:var(--card-padding,20px);box-shadow:var(--shadow-sm)}.card-header{margin-bottom:16px}.card-title{font-size:var(--text-lg,16px);font-weight:600;color:var(--color-text);margin:0}.card-description{color:var(--color-text-muted);margin:4px 0 0}.card-description,button{font-size:var(--text-base,14px)}button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:var(--button-padding,8px 14px);border-radius:var(--button-radius,var(--radius-lg));font-weight:var(--button-font-weight,600);cursor:pointer;transition:all var(--transition-fast,.15s ease);border:1px solid transparent}button.primary,button:not([class]){background:var(--color-primary);color:var(--primary-foreground,#fff);border-color:var(--color-primary)}button.primary:hover,button:not([class]):hover{background:var(--color-primary-hover)}button.secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}button.secondary:hover{background:var(--color-surface-hover)}button.ghost{background:var(--color-primary-soft);color:var(--color-primary);border-color:transparent}button.ghost:hover{background:var(--blue-100,#dbeafe)}button.danger{background:var(--color-error);color:var(--destructive-foreground,#fff);border-color:var(--color-error)}button:disabled{opacity:.6;cursor:not-allowed}input,select,textarea{width:100%;padding:var(--input-padding,8px 12px);border:var(--input-border,1px solid var(--color-border));border-radius:var(--input-radius,var(--radius-lg));background:var(--input-bg,var(--color-surface));font-size:var(--text-base,14px);color:var(--color-text);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);box-sizing:border-box}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--input-focus-ring)}input::placeholder{color:var(--color-text-muted)}table{width:100%;border-collapse:separate;border-spacing:0}td,th{padding:12px 16px;text-align:left;border-bottom:1px solid var(--color-border);font-size:var(--text-base,14px)}th{font-weight:600;color:var(--color-text-secondary);background:var(--color-surface-hover)}.pill{gap:6px;padding:4px 10px;background:var(--color-surface-hover);color:var(--color-text)}.badge,.pill{display:inline-flex;align-items:center;border-radius:var(--radius-full);font-size:12px;font-weight:500}.badge{padding:2px 8px}.badge.success{background:var(--tag-success-bg,#ecfdf5);color:var(--tag-success-fg,var(--color-success))}.badge.warning{background:var(--tag-warning-bg,#fef3c7);color:var(--tag-warning-fg,var(--color-warning))}.badge.error{background:var(--tag-error-bg,#eef4ff);color:var(--tag-error-fg,var(--color-error))}.badge.primary{background:var(--tag-primary-bg,var(--color-primary-soft));color:var(--tag-primary-fg,var(--color-primary))}.row{align-items:center}.row,.stack{display:flex;gap:8px}.stack{flex-direction:column}.grid{display:grid;grid-gap:16px;gap:16px}@media (max-width:768px){.app-main{padding:16px 16px 32px}.topnav{padding:12px 16px;flex-wrap:wrap;gap:12px}.topnav-nav{display:none}.card{padding:16px}td,th{padding:10px 12px;font-size:var(--text-sm,13px)}}@media (max-width:480px){h1{font-size:var(--text-2xl,20px)}h2{font-size:var(--text-xl,18px)}.topnav-logo-text{display:none}}