/* ==========================================================================
   Bookly — main.css
   Design tokens, resets, app shell (sidebar / topbar / tabbar) and primitives.
   Palette is strictly black / white / gray.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    color-scheme: light;

    --bg: #f3f1ee;
    --bg-muted: #ece9e5;
    --surface: #fffdfa;
    --surface-2: #f7f4f0;
    --surface-3: #ebe7e1;

    --border: #ded9d2;
    --border-strong: #c9c1b8;

    --text: #211f1d;
    --text-2: #716c66;
    --text-3: #a09a92;
    --text-inverse: #ffffff;

    --solid: #292624;
    --solid-hover: #45403c;
    --solid-text: #ffffff;
    --accent: #0095F6;
    --accent-soft: #E8F3FF;
    --like: #FF3040;

    --overlay: rgba(10, 10, 10, 0.55);
    --skeleton-a: #efefef;
    --skeleton-b: #e2e2e2;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --sidebar-w: 72px;
    --sidebar-w-xl: 244px;
    --topbar-h: 54px;
    --tabbar-h: 52px;
    --feed-w: 630px;
    --aside-w: 320px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
        Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    --font-brand: Georgia, "Iowan Old Style", "Times New Roman", serif;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur: 180ms;
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg: #111827;
    --bg-muted: #0f172a;
    --surface: #1b2433;
    --surface-2: #263246;
    --surface-3: #334155;

    --border: #39465a;
    --border-strong: #53647d;

    --text: #eef2ff;
    --text-2: #aab7cc;
    --text-3: #7f8da3;
    --text-inverse: #101827;

    --solid: #eee9e2;
    --solid-hover: #ffffff;
    --solid-text: #171614;
    --accent: #0095F6;
    --accent-soft: #182A38;
    --like: #FF3040;

    --overlay: rgba(0, 0, 0, 0.72);
    --skeleton-a: #1a1a1a;
    --skeleton-b: #242424;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.8);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p,
figure {
    margin: 0;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

::selection {
    background: var(--text);
    color: var(--text-inverse);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* --------------------------------------------------------------------------
   3. Typography helpers
   -------------------------------------------------------------------------- */

.brand {
    font-family: var(--font-brand);
    font-size: 24px;
    letter-spacing: -0.02em;
    font-weight: 600;
}

.title-lg {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.title-md {
    font-size: 16px;
    font-weight: 600;
}

.meta {
    color: var(--text-2);
    font-size: 12px;
}

.muted {
    color: var(--text-2);
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
        border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
        opacity var(--dur) var(--ease);
}

.btn:active {
    transform: scale(0.97);
}

.btn[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

.btn-primary {
    background: var(--accent);
    color: var(--solid-text);
}

.btn-primary:hover {
    background: #3f4aa3;
}

.btn-secondary {
    background: var(--surface-2);
    color: var(--text);
}

.btn-secondary:hover {
    background: var(--surface-3);
}

.btn-outline {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}

.btn-outline:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.btn-danger {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}

.btn-danger:hover {
    background: var(--surface-2);
    border-color: var(--text);
}

.btn-ghost {
    background: transparent;
    color: var(--text-2);
    height: 32px;
    padding: 0 10px;
}

.btn-ghost:hover {
    color: var(--text);
    background: var(--surface-2);
}

.btn-block {
    width: 100%;
}

.btn-lg {
    height: 42px;
    padding: 0 22px;
    font-size: 15px;
}

.btn-sm {
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
}

.btn-icon {
    width: 34px;
    padding: 0;
    flex: none;
}

.btn svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.link {
    color: var(--accent);
    font-weight: 600;
}

.link:hover {
    color: var(--text-2);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    color: var(--text);
    transition: background var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

.icon-btn:hover {
    background: var(--surface-2);
}

.icon-btn:active {
    transform: scale(0.92);
}

.icon-btn svg {
    width: 22px;
    height: 22px;
}

/* --------------------------------------------------------------------------
   5. Forms
   -------------------------------------------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.field > label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-2);
}

.input,
.textarea,
.select {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text);
    transition: border-color var(--dur) var(--ease),
        background var(--dur) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-3);
}

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-color: var(--border-strong);
    background: var(--surface);
}

.textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.6;
}

.select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
        linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

.field-hint {
    font-size: 12px;
    color: var(--text-3);
}

.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.switch-row-text strong {
    display: block;
    font-size: 14px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex: none;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.switch-track {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    border: 1px solid var(--border);
    transition: background var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.switch-track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--text-2);
    transition: transform var(--dur) var(--ease),
        background var(--dur) var(--ease);
}

.switch input:checked + .switch-track {
    background: var(--solid);
    border-color: var(--solid);
}

.switch input:checked + .switch-track::after {
    transform: translate(18px, -50%);
    background: var(--solid-text);
}

.form-message {
    min-height: 18px;
    font-size: 13px;
    color: var(--text-2);
    margin-top: 10px;
}

.form-message.is-error {
    color: var(--text);
    font-weight: 600;
}

.form-message.is-success {
    color: var(--text-2);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. Avatars
   -------------------------------------------------------------------------- */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    user-select: none;
    overflow: hidden;
    border: 1px solid var(--border);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-sm {
    width: 26px;
    height: 26px;
    font-size: 11px;
}

.avatar-md {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

.avatar-lg {
    width: 77px;
    height: 77px;
    font-size: 28px;
}

.avatar-xl {
    width: 96px;
    height: 96px;
    font-size: 34px;
}

/* --------------------------------------------------------------------------
   7. App shell
   -------------------------------------------------------------------------- */

.app {
    min-height: 100vh;
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}

.sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    padding: 8px 12px 20px;
    border-right: 1px solid var(--border);
    background: var(--bg);
    z-index: 40;
    flex-direction: column;
    transition: width var(--dur) var(--ease);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 72px;
    padding: 0 12px;
    margin-bottom: 8px;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    color: var(--text);
}

.brand-mark svg {
    width: 26px;
    height: 26px;
}

.bookly-brand-icon { width: 30px; height: 30px; object-fit: contain; }
.topbar-brand { display: inline-flex; align-items: center; gap: 8px; }
.topbar-brand .bookly-brand-icon { width: 28px; height: 28px; }

.sidebar-brand .brand-text {
    display: none;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.sidebar-foot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 48px;
    padding: 0 12px;
    border-radius: var(--radius-lg);
    color: var(--text);
    transition: background var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

.nav-link:hover {
    background: var(--surface-2);
}

.nav-link:active {
    transform: scale(0.98);
}

.nav-link svg {
    width: 24px;
    height: 24px;
    flex: none;
}

.nav-link span {
    display: none;
    font-size: 15px;
}

.nav-link.is-active {
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
}

.nav-link.is-active svg {
    stroke-width: 2.4;
}

.nav-link .avatar {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.nav-link.is-active .avatar {
    border-color: var(--text);
    border-width: 2px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--topbar-h);
    padding: 0 8px 0 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.topbar .brand {
    font-size: 22px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.topbar-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
    min-width: 0;
}

.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.tabbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 100%;
    color: var(--text);
    transition: transform var(--dur) var(--ease);
}

.tabbar a:active {
    transform: scale(0.9);
}

.tabbar svg {
    width: 24px;
    height: 24px;
}

.tabbar a.is-active {
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: var(--radius-md);
}

.tabbar a.is-active svg {
    stroke-width: 2.6
}

.tabbar .avatar {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.tabbar a.is-active .avatar {
    border-color: var(--text);
    border-width: 2px;
}

.shell {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 40px;
}

.container {
    width: 100%;
    max-width: var(--feed-w);
    margin: 0 auto;
    padding: 0 0 24px;
}

.container-wide {
    max-width: 935px;
    padding: 0 16px 24px;
}

.container-narrow {
    max-width: 620px;
    padding: 0 16px 24px;
}

/* --------------------------------------------------------------------------
   8. Search panel
   -------------------------------------------------------------------------- */

.search-panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
}

.search-panel.is-open {
    display: block;
}

.search-backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay);
    animation: fade-in var(--dur) var(--ease);
}

.search-sheet {
    position: absolute;
    top: 0;
    left: 0;
    width: min(420px, 100%);
    height: 100%;
    background: var(--bg);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    animation: slide-in-left 220ms var(--ease);
}

.search-head {
    padding: 20px 16px 14px;
    border-bottom: 1px solid var(--border);
}

.search-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.search-input-wrap {
    position: relative;
}

.search-input-wrap > svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-3);
    pointer-events: none;
}

.search-input-wrap .input {
    padding-left: 36px;
}

.search-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 24px;
}

.search-hint {
    padding: 28px 20px;
    color: var(--text-3);
    font-size: 14px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   9. User rows
   -------------------------------------------------------------------------- */

.user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    transition: background var(--dur) var(--ease);
}

.user-row:hover {
    background: var(--surface-2);
}

.user-row-body {
    min-width: 0;
    flex: 1;
}

.user-row-name {
    font-weight: 600;
    font-size: 14px;
}

.user-row-meta {
    color: var(--text-2);
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   10. Modal
   -------------------------------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal.is-open {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay);
    animation: fade-in var(--dur) var(--ease);
}

.modal-card {
    position: relative;
    width: min(400px, 100%);
    max-height: 82vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: pop-in 200ms var(--ease);
}

.modal-head {
    padding: 22px 20px 16px;
    text-align: center;
}

.modal-head p {
    color: var(--text-2);
    margin-top: 6px;
    font-size: 14px;
}

.modal-body {
    overflow-y: auto;
    padding: 4px 0 8px;
}

.modal-actions {
    display: flex;
    flex-direction: column;
}

.modal-action {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid var(--border);
    transition: background var(--dur) var(--ease);
}

.modal-action:hover {
    background: var(--surface-2);
}

.modal-action.is-strong {
    font-weight: 700;
}

.modal-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   11. Toast
   -------------------------------------------------------------------------- */

.toast-stack {
    position: fixed;
    left: 50%;
    bottom: calc(var(--tabbar-h) + 20px);
    transform: translateX(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
    width: min(420px, calc(100% - 32px));
}

.toast {
    background: var(--solid);
    color: var(--solid-text);
    padding: 11px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    box-shadow: var(--shadow-md);
    animation: toast-in 220ms var(--ease);
    max-width: 100%;
    text-align: center;
}

.toast.is-out {
    animation: toast-out 200ms var(--ease) forwards;
}

/* --------------------------------------------------------------------------
   12. States
   -------------------------------------------------------------------------- */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--skeleton-a) 25%,
        var(--skeleton-b) 37%,
        var(--skeleton-a) 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.3s ease infinite;
    border-radius: var(--radius-sm);
}

.spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-top-color: var(--text);
    animation: spin 700ms linear infinite;
    margin: 32px auto;
}

.state {
    text-align: center;
    padding: 56px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.state svg {
    width: 44px;
    height: 44px;
    color: var(--text-3);
    margin-bottom: 4px;
}

.state h2 {
    font-size: 20px;
    font-weight: 600;
}

.state p {
    color: var(--text-2);
    max-width: 340px;
}

.state .btn {
    margin-top: 10px;
}

/* --------------------------------------------------------------------------
   13. Animations
   -------------------------------------------------------------------------- */

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pop-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(-24px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateY(8px);
    }
}

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

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heart-pop {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.25);
    }
    70% {
        transform: scale(0.92);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
    45% {
        transform: translate(-50%, -50%) scale(0.95);
    }
    65% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   14. Responsive shell
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .app {
        padding-left: var(--sidebar-w);
        padding-bottom: 0;
    }

    .sidebar {
        display: flex;
    }

    .topbar,
    .tabbar {
        display: none;
    }

    .shell {
        padding-top: 28px;
    }

    .toast-stack {
        bottom: 28px;
        left: calc(50% + (var(--sidebar-w) / 2));
    }

    .search-sheet {
        left: var(--sidebar-w);
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    }
}

@media (min-width: 1264px) {
    .app {
        padding-left: var(--sidebar-w-xl);
    }

    .sidebar {
        width: var(--sidebar-w-xl);
        padding: 8px 12px 20px 16px;
    }

    .sidebar-brand .brand-text {
        display: block;
    }

    .nav-link span {
        display: block;
    }

    .toast-stack {
        left: calc(50% + (var(--sidebar-w-xl) / 2));
    }

    .search-sheet {
        left: var(--sidebar-w-xl);
    }
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Production polish overrides */
:root { --bg: #FAFAFA --bg-muted: #F4F4F4 --surface: #FFFFFF --surface-2: #F8F8FA --surface-3: #EFEFF2 --border: #DBDBDB --border-strong: #BDBDBD --accent: #0095F6; --accent-soft: #E8F3FF; --like: #FF3040 --shadow-sm: 0 3px 12px rgba(65,49,34,.07); --shadow-md: 0 12px 30px rgba(65,49,34,.11); }
[data-theme="dark"] { --bg: #000000 --bg-muted: #121212 --surface: #121212 --surface-2: #1C1C1C --surface-3: #262626 --border: #2B2B2B --border-strong: #464646 --text: #f2eee8; --text-2: #b5aea5; --text-3: #817b74; --accent: #0095F6; --accent-soft: #182A38; --like: #FF3040 --shadow-sm: 0 4px 14px rgba(0,0,0,.24); --shadow-md: 0 14px 34px rgba(0,0,0,.32); }
body { background: radial-gradient(circle at 50% -20%, var(--surface-2), var(--bg) 46%); }
.btn-primary, .auth-submit { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover, .auth-submit:hover { background: color-mix(in srgb, var(--accent) 82%, #202033); box-shadow: var(--shadow-md); }
.nav-link.is-active, .tabbar a.is-active { color: var(--accent); background: var(--accent-soft); }
.link, .auth-switch a, .profile-tab.is-active { color: var(--accent); }
.icon-btn:hover, .post-more:hover, .btn-outline:hover, .btn-ghost:hover, .password-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.avatar { background: linear-gradient(145deg, var(--surface-3), var(--surface-2)); }


/* Instagram-inspired Bookly branding accents */
:root { --brand-gradient: linear-gradient(115deg, #833AB4 0%, #E1306C 32%, #FD1D1D 55%, #F77737 76%, #FCAF45 100%); }
.brand { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sidebar-brand:hover .brand { filter: saturate(1.15); }
.avatar-ring { background: var(--brand-gradient); }
.post-action.is-liked svg, .comment-like.is-liked svg { color: #FF3040; fill: #FF3040; }


/* Final Instagram palette tokens */
:root { --bg: #FAFAFA; --bg-muted: #F4F4F4; --surface: #FFFFFF; --surface-2: #F8F8FA; --surface-3: #EFEFF2; --border: #DBDBDB; --border-strong: #BDBDBD; --accent: #0095F6; --accent-soft: #E8F3FF; --like: #FF3040; }
[data-theme="dark"] { --bg: #000000; --bg-muted: #121212; --surface: #121212; --surface-2: #1C1C1C; --surface-3: #262626; --border: #2B2B2B; --border-strong: #464646; --accent: #0095F6; --accent-soft: #182A38; --like: #FF3040; }


.session-list { display: flex; flex-direction: column; }
.session-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--border); }
.session-row-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.session-row-copy strong { font-size: 14px; }
.session-row-copy span, .session-empty { color: var(--text-2); font-size: 12px; }
.session-row .btn { flex: none; }
.session-logout-others { color: var(--accent); }