* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --primary: #006fee;
    --primary-foreground: #ffffff;
    --primary-light: #e6f1fe;
    --secondary: #7828c8;
    --secondary-foreground: #ffffff;
    --success: #17c964;
    --success-foreground: #ffffff;
    --warning: #f5a524;
    --warning-foreground: #ffffff;
    --danger: #f31260;
    --danger-foreground: #ffffff;
    --ink: #11181c;
    --body: #3f3f46;
    --body-strong: #27272a;
    --muted: #71717a;
    --hairline: #e4e4e7;
    --hairline-strong: #d4d4d8;
    --canvas: #ffffff;
    --surface-card: #f4f4f5;
    --surface-elevated: #ebebef;
    --surface-soft: #fafafa;
    --surface-hover: #f4f4f5;
    --focus: #006fee;
    --divider: #e4e4e7;
    --code-bg: #f4f4f5;
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-full: 9999px;
    --shadow-soft: 0 2px 8px rgba(0,0,0,0.06);
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--canvas);
    color: var(--ink);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
}
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--hairline);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
.spinner-large {
    width: 32px;
    height: 32px;
    border: 3px solid var(--hairline);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.btn-primary {
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    padding: 12px 24px;
    height: 40px;
    border-radius: var(--r-xl);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    cursor: pointer;
    transition: opacity 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
}
.btn-primary:hover {
    opacity: 0.9;
}
.btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.btn-outline {
    background: var(--surface-card);
    color: var(--ink);
    border: none;
    padding: 12px 24px;
    height: 40px;
    border-radius: var(--r-xl);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-outline:hover {
    background: var(--surface-elevated);
}
.btn-copy {
    background: var(--primary-light);
    color: var(--primary);
}
.btn-copy:hover {
    background: var(--primary);
    color: var(--primary-foreground);
}
.btn-delete {
    background: rgba(243,18,96,0.08);
    color: var(--danger);
}
.btn-delete:hover {
    background: var(--danger);
    color: var(--danger-foreground);
}
.btn-text {
    background: none;
    border: none;
    color: var(--body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--r-md);
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}
.btn-text:hover {
    background: var(--surface-card);
    color: var(--ink);
}
.toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    z-index: 9999;
    animation: fadeIn 0.2s;
    box-shadow: var(--shadow-soft);
}
.toast-success {
    background: var(--canvas);
    color: var(--success);
    border: 1px solid var(--hairline);
}
.toast-error {
    background: var(--canvas);
    color: var(--danger);
    border: 1px solid var(--hairline);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}