@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
    --app-bg: #f4f7fb;
    --app-bg-accent: #e7eef8;
    --app-panel: rgba(255, 255, 255, 0.92);
    --app-panel-soft: rgba(246, 250, 255, 0.9);
    --app-border: rgba(19, 34, 56, 0.08);
    --app-text: #132238;
    --app-muted: #5f6f83;
    --app-primary: #1d5fa7;
    --app-primary-strong: #133e75;
    --app-success: #1d8f5a;
    --app-warning: #ffb13d;
    --app-danger: #d65454;
    --app-shadow: 0 24px 60px rgba(19, 34, 56, 0.10);
    --app-radius-xl: 1.75rem;
    --app-radius-lg: 1.25rem;
    --app-radius-md: 1rem;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: "Manrope", "Segoe UI", sans-serif;
    color: var(--app-text);
    background:
        radial-gradient(circle at top left, rgba(73, 125, 195, 0.14), transparent 28%),
        radial-gradient(circle at top right, rgba(23, 146, 119, 0.10), transparent 26%),
        linear-gradient(180deg, #f8fbff 0%, var(--app-bg) 50%, #eef4fb 100%);
    background-attachment: fixed;
}

a {
    color: inherit;
}

.app-container {
    max-width: 1480px;
}

.app-surface {
    position: relative;
    background: var(--app-panel);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-xl);
    box-shadow: var(--app-shadow);
    backdrop-filter: blur(18px);
    padding: 1.1rem;
}

.hero-panel {
    overflow: hidden;
    background:
        linear-gradient(140deg, rgba(19, 34, 56, 0.97), rgba(29, 95, 167, 0.92)),
        linear-gradient(180deg, #12345a, #1d5fa7);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.08);
}

.hero-panel::before,
.hero-panel::after {
    content: "";
    position: absolute;
    inset: auto auto -40px -20px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 68%);
    pointer-events: none;
}

.hero-panel::after {
    inset: -40px -20px auto auto;
}

.hero-title {
    font-size: clamp(1.8rem, 2.1vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    margin-bottom: 0.5rem;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.78);
    max-width: 760px;
}

.soft-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.hero-actions .btn,
.section-actions .btn,
.item-actions .btn,
.suggestion-actions .btn,
.login-actions .btn {
    border-radius: 999px;
    padding-inline: 1rem;
    font-weight: 700;
}

.stat-card {
    min-height: 100%;
    background: var(--app-panel-soft);
}

.stat-value {
    font-size: clamp(1.8rem, 2vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
}

.stat-label {
    color: var(--app-muted);
    font-weight: 700;
}

.stat-caption,
.muted-copy,
.item-meta,
.suggestion-meta,
.empty-state p {
    color: var(--app-muted);
}

.section-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.section-kicker {
    color: var(--app-primary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    font-size: 0.73rem;
}

.sticky-card {
    top: 1.25rem;
}

.app-form-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,255,0.92));
}

.app-form-card .form-control,
.app-form-card .form-select,
.login-card .form-control,
.login-card .form-select,
.modal-content .form-control,
.modal-content .form-select,
.modal-content textarea {
    border-radius: 1rem;
    border-color: rgba(19, 34, 56, 0.12);
    padding: 0.9rem 1rem;
    box-shadow: none;
}

.app-form-card textarea,
.modal-content textarea {
    min-height: 118px;
    resize: vertical;
}

.item-card,
.suggestion-card,
.frequency-card,
.team-card,
.completed-card {
    border-radius: var(--app-radius-lg);
    border: 1px solid rgba(19, 34, 56, 0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,255,0.94));
    box-shadow: 0 14px 34px rgba(19, 34, 56, 0.07);
    padding: 1rem;
}

.suggestion-card {
    background: linear-gradient(180deg, rgba(242, 249, 246, 0.98), rgba(255,255,255,0.95));
}

.frequency-card {
    background: linear-gradient(180deg, rgba(244, 247, 255, 0.98), rgba(255,255,255,0.95));
}

.item-title,
.suggestion-title {
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.item-meta,
.suggestion-meta {
    font-size: 0.92rem;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(19, 34, 56, 0.06);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--app-text);
}

.meta-chip.success {
    background: rgba(29, 143, 90, 0.12);
    color: var(--app-success);
}

.meta-chip.primary {
    background: rgba(29, 95, 167, 0.12);
    color: var(--app-primary);
}

.meta-chip.warning {
    background: rgba(255, 177, 61, 0.18);
    color: #9a5f00;
}

.notes-box {
    border-radius: 1rem;
    background: rgba(19, 34, 56, 0.04);
    padding: 0.8rem 0.9rem;
    color: var(--app-text);
}

.autocomplete-wrap {
    position: relative;
}

.autocomplete-panel {
    position: absolute;
    inset: calc(100% + 0.5rem) 0 auto;
    z-index: 30;
    border-radius: 1.1rem;
    border: 1px solid rgba(19, 34, 56, 0.08);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 28px 45px rgba(19, 34, 56, 0.16);
    overflow: hidden;
}

.autocomplete-option {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(19, 34, 56, 0.06);
    background: transparent;
    text-align: left;
    padding: 0.85rem 1rem;
}

.autocomplete-option:last-child {
    border-bottom: 0;
}

.autocomplete-option:hover,
.autocomplete-option:focus-visible {
    background: rgba(29, 95, 167, 0.06);
    outline: none;
}

.empty-state {
    padding: 1.5rem;
    border-radius: var(--app-radius-lg);
    background: rgba(19, 34, 56, 0.03);
    border: 1px dashed rgba(19, 34, 56, 0.10);
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.login-layout {
    width: min(1120px, 100%);
}

.login-card {
    min-height: 100%;
}

.login-highlight {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.14), transparent 38%),
        linear-gradient(140deg, rgba(19, 34, 56, 0.98), rgba(24, 88, 146, 0.95));
    color: #fff;
}

.login-highlight .muted-copy {
    color: rgba(255,255,255,0.75);
}

.feature-bullet {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.feature-dot {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #8de0bf, #4db38b);
    margin-top: 0.28rem;
    flex: 0 0 auto;
}

.modal-content {
    border: 0;
    border-radius: 1.6rem;
    box-shadow: 0 30px 80px rgba(19, 34, 56, 0.20);
}

.modal-header,
.modal-footer {
    border-color: rgba(19, 34, 56, 0.07);
}

.frequency-summary {
    border-radius: 1.2rem;
    background: linear-gradient(180deg, rgba(245, 248, 255, 0.96), rgba(255,255,255,0.94));
    box-shadow: none;
    padding: 1rem;
}

.skeleton {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(222, 229, 239, 0.88), rgba(241, 244, 248, 0.98), rgba(222, 229, 239, 0.88));
    background-size: 260% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: translateX(-100%);
    animation: sweep 1.7s linear infinite;
}

.skeleton-title { height: 1.2rem; border-radius: 0.75rem; }
.skeleton-line { height: 0.8rem; border-radius: 0.6rem; }
.skeleton-pill { height: 0.9rem; width: 120px; }
.skeleton-button { height: 2.5rem; width: 110px; border-radius: 999px; }
.skeleton-field { height: 3.35rem; border-radius: 1rem; }
.skeleton-field-lg { height: 7rem; border-radius: 1.2rem; }
.stat-skeleton { min-height: 176px; }
.skeleton-card { padding: 1rem; border-radius: var(--app-radius-lg); background: rgba(19, 34, 56, 0.03); }
.skeleton-card-soft { background: rgba(29, 95, 167, 0.04); }

.app-hidden {
    display: none !important;
}

@keyframes shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@keyframes sweep {
    100% { transform: translateX(100%); }
}

@media (max-width: 991.98px) {
    .app-surface {
        border-radius: 1.35rem;
    }

    .hero-panel {
        padding-block: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .app-container {
        padding-inline: 0.35rem;
    }

    .app-surface {
        padding: 0.95rem;
    }

    .hero-title {
        font-size: 1.55rem;
    }

    .item-actions,
    .suggestion-actions {
        width: 100%;
    }

    .item-actions .btn,
    .suggestion-actions .btn {
        flex: 1 1 0;
    }
}