/* Base */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);font-size:var(--body-md);line-height:var(--lh-relaxed);background:var(--surface-default);color:var(--text-primary)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

/* Buttons */
.btn{height:40px;padding:0 16px;border-radius:var(--radius-sm);border:1px solid transparent;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:transform var(--dur-fast) var(--ease),filter var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn:focus{outline:none;box-shadow:var(--focus-ring)}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.55;cursor:not-allowed}

.btn-primary{background:var(--brand-primary);color:var(--text-onBrand)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}

.btn-secondary{background:var(--surface-elevated);border-color:var(--border-subtle);color:var(--text-primary)}
.btn-secondary:hover{border-color:color-mix(in srgb, var(--brand-secondary) 35%, var(--border-subtle));background:color-mix(in srgb, var(--surface-elevated) 92%, rgba(0,199,217,.08));transform:translateY(-1px)}

.btn-ghost{background:transparent;color:var(--link);padding:0 10px}
.btn-ghost:hover{background:rgba(0,199,217,.10);transform:translateY(-1px)}

.btn-danger{background:color-mix(in srgb, var(--danger) 85%, black);color:#fff}
.btn-danger:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* Card */
.card{background:var(--surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}
.card-h{padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--border-subtle);display:flex;justify-content:space-between;gap:var(--s-4)}
.card-b{padding:var(--s-6)}

/* Inputs */
.label{font-size:13px;color:var(--text-secondary);font-weight:700}
.input,.select,.textarea{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--surface-elevated);color:var(--text-primary);padding:10px 12px;font-size:14px;transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.input{height:40px}
.textarea{min-height:96px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:color-mix(in srgb, var(--brand-secondary) 60%, var(--border-subtle));box-shadow:var(--focus-ring)}
.helper{font-size:12px;color:var(--text-muted)}
.field{display:flex;flex-direction:column;gap:6px}
.field.error .input,.field.error .select,.field.error .textarea{border-color:color-mix(in srgb, var(--danger) 70%, var(--border-subtle));box-shadow:0 0 0 3px rgba(239,68,68,.18)}
.field.error .helper{color:color-mix(in srgb, var(--danger) 75%, var(--text-muted))}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:12px;background:color-mix(in srgb,var(--surface-elevated) 92%, transparent)}
.dot{width:8px;height:8px;border-radius:999px;background:var(--brand-secondary);box-shadow:0 0 0 3px rgba(0,199,217,.14)}

/* Alert */
.alert{padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);font-size:14px}
.alert-info{background:color-mix(in srgb, var(--info) 10%, var(--surface-elevated));border-color:color-mix(in srgb, var(--info) 35%, var(--border-subtle))}
.alert-success{background:color-mix(in srgb, var(--success) 10%, var(--surface-elevated));border-color:color-mix(in srgb, var(--success) 35%, var(--border-subtle))}
.alert-warning{background:color-mix(in srgb, var(--warning) 12%, var(--surface-elevated));border-color:color-mix(in srgb, var(--warning) 35%, var(--border-subtle))}
.alert-danger{background:color-mix(in srgb, var(--danger) 10%, var(--surface-elevated));border-color:color-mix(in srgb, var(--danger) 35%, var(--border-subtle))}

/* Table */
.table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border-subtle);text-align:left;font-size:14px}
.table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);background:color-mix(in srgb,var(--surface-elevated) 90%, var(--surface-default))}
.table tr:last-child td{border-bottom:none}