@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    font-family: 'Inter', 'HarmonyOS Sans', 'PingFang SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #0f172a;
}

body {
    @apply min-h-screen bg-slate-50 text-slate-900 antialiased;
}

.bg-grid {
    background-color: #fdfdfd;
    background-image: radial-gradient(#e2e8f0 1px, transparent 0);
    background-size: 28px 28px;
}

.badge-panel {
    @apply inline-flex items-center gap-4 rounded-full border border-orange-200 bg-orange-50 px-6 py-2 text-sm font-medium text-orange-500 shadow-soft;
}

.status-dot {
    @apply inline-flex h-2 w-2 rounded-full bg-emerald-400;
}

.input-shell {
    @apply flex items-center gap-3 rounded-2xl border border-slate-200 bg-white/80 px-4 py-3 shadow-inner transition focus-within:border-slate-400;
}

.icon-btn {
    @apply flex h-10 w-10 items-center justify-center rounded-2xl border border-slate-200 bg-white/80 text-slate-500 transition hover:border-slate-300 hover:text-slate-700;
}

.chip {
    @apply rounded-full border border-slate-200 bg-white px-3 py-1 text-xs;
}

.chip-warning {
    @apply border-orange-200 bg-orange-50 text-orange-500;
}

.shadow-soft {
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.shadow-inner {
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.history-card {
    @apply flex items-center gap-4 rounded-3xl border border-slate-200 bg-white/80 px-5 py-4 text-left transition hover:border-slate-300 hover:bg-white;
}

.history-icon {
    @apply inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-slate-200 bg-white text-slate-500;
}

.history-info {
    @apply flex-1;
}