@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
    --ink: #2f1f2f;
    --ink-soft: #6b4b5f;
    --bg-light: #fff8ef;
    --bg-warm: #ffe9d2;
    --bg-glow: #fff3c8;
    --surface: #ffffff;
    --line: #efd3bd;
    --line-strong: #e8b788;
    --brand: #cf3f3a;
    --brand-dark: #a9302c;
    --brand-soft: #f39d63;
    --gold: #f5ba57;
    --gold-deep: #d7942d;
    --ok-bg: #e8f7ee;
    --ok-ink: #0f744b;
    --err-bg: #fde9e7;
    --err-ink: #8b272a;
    --info-bg: #fff4df;
    --info-ink: #84531f;
    --shadow-soft: 0 18px 40px rgba(114, 56, 40, 0.14);
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: 'Nunito', 'Trebuchet MS', 'DejaVu Sans', sans-serif;
    background:
        radial-gradient(circle at 10% 14%, rgba(245, 186, 87, 0.34) 0 18%, transparent 19%),
        radial-gradient(circle at 88% 16%, rgba(207, 63, 58, 0.22) 0 19%, transparent 20%),
        radial-gradient(circle at 20% 88%, rgba(245, 186, 87, 0.2) 0 14%, transparent 15%),
        linear-gradient(140deg, var(--bg-light) 0%, var(--bg-warm) 46%, #fff7eb 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

h1,
h2,
h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: #3a2137;
}

.container,
.card,
.panel {
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.96), rgba(255, 245, 231, 0.98));
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

a {
    color: #9f3a2f;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: #7f2e24;
}

label {
    font-weight: 700;
}

input,
textarea,
select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #dfbfa3;
    border-radius: 10px;
    font-size: 15px;
    color: var(--ink);
    background: #fffaf5;
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid rgba(245, 186, 87, 0.48);
    outline-offset: 1px;
    border-color: #d69c64;
}

button,
.btn {
    border: 0;
    border-radius: 10px;
    padding: 12px 18px;
    color: #fff;
    cursor: pointer;
    font-weight: 800;
    background: linear-gradient(135deg, var(--brand), #de5a44);
    box-shadow: 0 8px 18px rgba(181, 62, 54, 0.27);
}

button:hover,
.btn:hover {
    transform: translateY(-1px);
}

button.secondary,
.btn-secondary {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    color: #4c2e1f;
    box-shadow: 0 8px 18px rgba(178, 120, 28, 0.26);
}

button.danger,
.delete-btn,
.btn-danger {
    background: linear-gradient(135deg, #a92f31, #c3423f);
    color: #fff;
    box-shadow: 0 8px 18px rgba(137, 36, 39, 0.28);
}

button:disabled,
.btn:disabled {
    opacity: 0.52;
    cursor: not-allowed;
    transform: none;
}

.flash {
    margin: 12px 0;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.flash.success {
    background: var(--ok-bg);
    color: var(--ok-ink);
    border-color: rgba(15, 116, 75, 0.2);
}

.flash.error {
    background: var(--err-bg);
    color: var(--err-ink);
    border-color: rgba(139, 39, 42, 0.22);
}

.status {
    margin: 0;
    padding: 11px;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid transparent;
}

.status.info {
    background: var(--info-bg);
    color: var(--info-ink);
    border-color: rgba(132, 83, 31, 0.15);
}

.status.success {
    background: var(--ok-bg);
    color: var(--ok-ink);
    border-color: rgba(15, 116, 75, 0.2);
}

.status.error {
    background: var(--err-bg);
    color: var(--err-ink);
    border-color: rgba(139, 39, 42, 0.22);
}

.meta {
    color: var(--ink-soft);
}

.empty {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255, 245, 232, 0.82);
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

@media (max-width: 900px) {
    body {
        background-attachment: scroll;
    }
}