:root {
    --pf-ink: #29342e;
    --pf-muted: #6c776f;
    --pf-cream: #f7f4ed;
    --pf-paper: #fffefa;
    --pf-sage: #557765;
    --pf-sage-dark: #3b594a;
    --pf-peach: #e7a276;
    --pf-line: #deddd5;
    --pf-danger: #b85650;
    --pf-shadow: 0 10px 30px rgba(42, 57, 48, .08);
}

html { background: var(--pf-cream); }
body {
    background: var(--pf-cream) !important;
    color: var(--pf-ink);
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
h1, h2, h3, h4, h5, .navbar-brand {
    color: var(--pf-ink);
    font-family: "Fraunces", Georgia, serif;
    letter-spacing: -.015em;
}
a { color: var(--pf-sage-dark); }
a:hover { color: #294437; }
.page-content { padding-top: 2.75rem; padding-bottom: 5rem; }
.text-muted, .small { color: var(--pf-muted) !important; }

.navbar.bg-primary {
    min-height: 70px;
    background: rgba(255, 254, 250, .96) !important;
    border-bottom: 1px solid var(--pf-line);
    box-shadow: 0 4px 18px rgba(42, 57, 48, .04);
    backdrop-filter: blur(12px);
}
.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
    color: var(--pf-ink);
    font-size: 1.35rem;
}
.navbar-dark .navbar-nav .nav-link { color: var(--pf-muted); font-weight: 600; }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active { color: var(--pf-sage-dark); }
.navbar-dark .navbar-toggler { border-color: var(--pf-line); background: var(--pf-sage); }
.navbar.navbar-dark .user-dropdown-btn,
.navbar.navbar-dark .user-dropdown-btn:hover,
.navbar.navbar-dark .user-dropdown-btn:focus {
    color: var(--pf-sage-dark) !important;
}

.btn { border-radius: .65rem; font-weight: 600; }
.btn-primary {
    background: var(--pf-sage);
    border-color: var(--pf-sage);
    box-shadow: 0 4px 12px rgba(59, 89, 74, .15);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--pf-sage-dark); border-color: var(--pf-sage-dark);
}
.btn-outline-primary { color: var(--pf-sage-dark); border-color: var(--pf-sage); }
.btn-outline-primary:hover { color: #fff; background: var(--pf-sage); border-color: var(--pf-sage); }
.btn-secondary { background: #738079; border-color: #738079; }
.btn-outline-secondary { color: #5f6c64; border-color: #bfc6c1; background: rgba(255,255,255,.55); }
.btn-outline-secondary:hover { background: #e8ece9; border-color: #aab5ae; color: var(--pf-ink); }
.btn-danger { background: var(--pf-danger); border-color: var(--pf-danger); }

.card, .modal-content, .list-group-item {
    background: var(--pf-paper);
    border-color: var(--pf-line);
}
.card { border-radius: 1rem; box-shadow: var(--pf-shadow); overflow: hidden; }
.card-header { background: #edf0eb; border-bottom-color: var(--pf-line); font-weight: 700; }
.modal-content { border-radius: 1rem; box-shadow: 0 22px 60px rgba(30,45,36,.18); }
.modal-header, .modal-footer { border-color: var(--pf-line); }
.form-control {
    border-color: #c8cec9;
    border-radius: .6rem;
    background: var(--pf-paper);
    color: var(--pf-ink);
}
.form-control:focus { border-color: var(--pf-sage); box-shadow: 0 0 0 .2rem rgba(85,119,101,.16); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--pf-sage); border-color: var(--pf-sage); }
.badge-primary { background: var(--pf-sage); }
.alert-info { color: #385748; background: #e5eee8; border-color: #c9ddd0; }

.photo-library-header {
    padding: 1.4rem 1.5rem;
    background: rgba(255,254,250,.74);
    border: 1px solid var(--pf-line);
    border-radius: 1rem;
}
.photo-library-header h2 { margin: 0; font-size: 2.15rem; }
.photo-count { color: var(--pf-muted); font-weight: 600; }
.tag-filters { margin-bottom: 0 !important; }
.tag-filter.active { background: var(--pf-sage); border-color: var(--pf-sage); }
.photo-item { border-radius: .75rem; background: #e8ebe7; box-shadow: 0 3px 12px rgba(42,57,48,.08); }
.photo-item:hover { box-shadow: 0 10px 25px rgba(42,57,48,.16); }
.photo-item.selected { border: 0; box-shadow: inset 0 0 0 4px var(--pf-sage), 0 10px 25px rgba(42,57,48,.16); }
.photo-checkbox { border-color: var(--pf-sage); border-radius: 50%; }
.photo-checkbox.checked { background: var(--pf-sage); }
.photo-overlay { background: rgba(29, 42, 35, .64); }
.frame-badge { background: rgba(42,57,48,.88); border-radius: 999px; }
.bulk-actions-toolbar {
    border-radius: .85rem;
    color: var(--pf-ink);
    box-shadow: 0 12px 30px rgba(31,45,37,.2);
}

.quick-access-card, .frame-card { transition: transform .18s ease, box-shadow .18s ease; }
.quick-access-card:hover, .frame-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(42,57,48,.13); }
.quick-access-card .fa-3x, .quick-access-card .fa-2x { color: var(--pf-sage) !important; }
.home-hero, .activate-hero, .frame-header { background: linear-gradient(145deg, var(--pf-sage-dark), #6f8b78) !important; }
.activate-header { background: var(--pf-sage-dark) !important; }
.quick-access-icon, .upload-drop-zone-icon, .frame-stat-value, .storage-gauge-percent { color: var(--pf-sage) !important; }
.upload-drop-zone { border-color: var(--pf-sage) !important; border-radius: 1rem !important; background: rgba(255,254,250,.72) !important; }
.upload-drop-zone:hover, .upload-drop-zone.drag-over { border-color: var(--pf-sage-dark) !important; background: #e9efeb !important; }
.tag-btn.active { background: var(--pf-sage) !important; border-color: var(--pf-sage) !important; }
.photos-on-frame-banner { background: #e5eee8 !important; border-left-color: var(--pf-sage) !important; }
.photos-on-frame-banner h5, .photos-on-frame-banner p { color: var(--pf-sage-dark) !important; }
.account-option-card.selected { border-color: var(--pf-sage) !important; background: #eef2ef !important; }
.storage-gauge-circle { background: conic-gradient(from 270deg, var(--pf-sage) 0deg, var(--pf-sage) var(--storage-used-deg), #e2e7e3 var(--storage-used-deg), #e2e7e3 360deg) !important; }

@media (min-width: 1200px) {
    .photo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .page-content { padding-top: 1.5rem; }
    .photo-library-header { padding: 1rem; }
    .photo-library-header h2 { font-size: 1.75rem; }
    .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .navbar.bg-primary { min-height: 58px; }
}