:root {
    --pink-100: #daf1f5;
    --pink-200: #c4a2f5;
    --pink-300: #b1a5cf;
    --pink-400: #8669da;
    --pink-500: #ec4899;
    --pink-700: #be185d;
    --pink-800: #9d174d;
    --pink-900: #831843;
    --purple-200: #d8b4fe;
    --purple-300: #c084fc;
    --purple-400: #a855f7;
    --purple-500: #9333ea;
    --purple-600: #7e22ce;
    --purple-700: #6b21a8;
    --purple-800: #581c87;
    --purple-900: #9c76dc;
    --btn-bg: #7375fa;
    --btn-color: #faf56e;
    --btn-hover-bg: #a855f7;
    --btn-danger-bg: #7abaff;
    --btn-danger-color: #faeca0;
    --btn-danger-hover-bg: #3c58fa;
    --btn-danger-border: #432cdb;
    --filter-bg: #a96cf5;
    --filter-border: #7535db;
    --filter-color: #3b0764;
    --filter-inactive-bg: #d8bce8;
    --filter-inactive-border: #cccccc;
    --filter-inactive-color: #999999;
    --filter-inactive-hover: #caa6de;
    --filter-hover-bg: #f052a0;
    --sidebar-bg: #cdcefa;
    --sidebar-border: #4172f0;
    --sidebar-heading: #9a72db;
    --sidebar-link-bg: #ab8bf0;
    --sidebar-link-color: #e4fa75;
    --sidebar-link-border: #717ff0;
    --sidebar-link-hover: #8d9ff7;
    --sidebar-active-bg: #928bf7;
    --sidebar-active-color: #f0f24e;
    --sidebar-active-border: #9333ea;
    --card-bg: #cdcefa;
    --card-border: #4172f0;
    --card-placeholder-bg: #63ceff;
    --card-thumb-bg: #ab8bf0;
    --card-thumb-color: #d9ed00;
    --card-title-color: #a580d2;
    --card-text-color: #cc47fc;
    --card-cat-link-color: #7e22ce;
    --stat-bg: #ffd9e8;
    --stat-border: #f472b6;
    --stat-number-color: #3b0764;
    --stat-label-color: #6b21a8;
    --table-bg: #ffd9e8;
    --table-border: #f472b6;
    --table-header-bg: #8293f5;
    --table-header-color: #3b0764;
    --table-text: #6b21a8;
    --promo-card-bg: #f472b6;
    --promo-card-border: #f052a0;
    --promo-card-title: #581c87;
    --promo-card-text: #6b21a8;
    --promo-code-bg: #f9a8d4;
    --promo-code-border: #db2777;
    --promo-code-color: #3b0764;
    --pagination-bg: #f472b6;
    --pagination-color: #3b0764;
    --pagination-hover-bg: #f052a0;
    --pagination-active-bg: #f9a8d4;
    --pagination-active-color: #3b0764;
    --pagination-border: #db2777;
}
:root {
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.15rem;
    --font-size-xl: 1.5rem;
    --font-size-h1: 1.75rem;
    --line-height: 1.5;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --shadow: 0 1px 4px rgba(88,28,135,0.15);
    --btn-padding: 0.5rem 1rem;
    --btn-radius: 4px;
    --btn-font-size: 0.9rem;
    --input-padding: 0.4rem 0.6rem;
    --input-radius: 4px;
    --input-border-width: 1px;
    --card-radius: 8px;
    --card-padding: 0.75rem;
    --chip-radius: 999px;
    --chip-padding: 0.35rem 0.75rem;
    --table-radius: 0;
}
        body { font-family: sans-serif; max-width: none; width: 100%; margin: 0; padding: 1rem 1.5rem; box-sizing: border-box; color: var(--purple-900); background: var(--pink-200); font-size: var(--font-size-base); line-height: var(--line-height); }
        h1 { font-size: var(--font-size-h1); }
        h2 { font-size: var(--font-size-xl); }
        h3, h4, h5, h6 { font-size: var(--font-size-lg); }
        h1, h2, h3, h4, h5, h6 { text-align: center; }
        a { color: var(--purple-600); }
        .nav { display: flex; gap: var(--spacing-md); align-items: center; border-bottom: 1px solid var(--pink-300); padding-bottom: var(--spacing-sm); margin-bottom: var(--spacing-lg); }
        .nav a { text-decoration: none; color: var(--purple-700); }
        .nav .brand { font-weight: bold; font-size: var(--font-size-lg); color: var(--purple-900); }
        .nav .spacer { flex: 1; }
        input[type="text"], input[type="email"], input[type="password"], input[type="url"], textarea, select { padding: var(--input-padding); border: var(--input-border-width) solid var(--pink-300); border-radius: var(--input-radius); background: var(--pink-100); color: var(--purple-900); }
        input:focus, textarea:focus, select:focus { outline: 2px solid var(--purple-400); }
        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-md); }
        .grid img { width: 100%; height: 150px; object-fit: cover; border-radius: var(--border-radius-sm); cursor: pointer; }
        .grid video { width: 100%; height: auto; object-fit: contain; border-radius: var(--border-radius-sm); background: #000; display: block; cursor: pointer; }
        .video-open { position: relative; display: block; }
        .play-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: rgba(255, 255, 255, 0.9); text-shadow: 0 0 12px rgba(0, 0, 0, 0.7); pointer-events: none; }
        .title-header { text-align: center; margin-bottom: var(--spacing-lg); }
        .title-header img { max-width: 100%; height: auto; border-radius: var(--border-radius-lg); box-shadow: var(--shadow); }
        .card { border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: var(--card-padding); margin-bottom: var(--spacing-md); background: var(--card-bg); box-shadow: var(--shadow); }
        .card a { text-decoration: none; color: inherit; }
        .card-link { display: block; }
        .card img, .card-placeholder { width: 100%; height: 180px; object-fit: cover; border-radius: var(--border-radius-sm); display: block; background: var(--card-placeholder-bg); }
        .card-cover { position: relative; }
        .card-cover .video-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: rgba(255, 255, 255, 0.9); text-shadow: 0 0 12px rgba(0, 0, 0, 0.7); pointer-events: none; }
        .card h2 { margin: var(--spacing-sm) 0 var(--spacing-xs); font-size: var(--font-size-lg); color: var(--card-title-color); }
        .btn { display: inline-block; padding: var(--btn-padding); background: var(--btn-bg); color: var(--btn-color); text-decoration: none; border-radius: var(--btn-radius); border: none; cursor: pointer; font-size: var(--btn-font-size); }
        .btn:hover { background: var(--btn-hover-bg); }
        .btn-danger { background: var(--btn-danger-bg); color: var(--btn-danger-color); border: 1px solid var(--btn-danger-border); }
        .btn-danger:hover { background: var(--btn-danger-hover-bg); }
        .btn-sm { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-sm); }
        .btn-outline { background: var(--pink-100); color: var(--purple-700); border: 1px solid var(--pink-400); }
        .btn-outline:hover { background: var(--pink-200); }
        form.inline { display: inline; }
        table { border-collapse: collapse; width: 100%; background: var(--table-bg); border-radius: var(--table-radius); }
        th, td { border: var(--input-border-width) solid var(--table-border); padding: var(--spacing-sm); text-align: left; vertical-align: middle; color: var(--table-text); }
        th { background: var(--table-header-bg); color: var(--table-header-color); }
        .flash { padding: var(--card-padding) var(--spacing-md); border-radius: var(--border-radius-sm); margin-bottom: var(--spacing-md); color: var(--purple-900); }
        .flash.error { background: var(--pink-300); border-left: 4px solid var(--btn-danger-border); }
        .flash.success { background: var(--pink-200); border-left: 4px solid var(--purple-500); }
        .pagination { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-lg); flex-wrap: wrap; }
        .pagination a, .pagination span { padding: var(--chip-padding); border: var(--input-border-width) solid var(--pagination-border); border-radius: var(--btn-radius); text-decoration: none; color: var(--pagination-color); background: var(--pagination-bg); }
        .pagination a:hover { background: var(--pagination-hover-bg); }
        .pagination .current { background: var(--pagination-active-bg); color: var(--pagination-active-color); border-color: var(--pagination-border); }
        .grid-link { display: block; }
        .media-nav { display: flex; gap: var(--spacing-md); align-items: center; justify-content: center; flex-wrap: wrap; margin: var(--spacing-md) 0; }
        .btn-disabled { opacity: 0.5; cursor: not-allowed; }
        .hero { padding: var(--spacing-md) 0 var(--spacing-lg); text-align: center; }
        .hero form { display: flex; justify-content: center; gap: var(--spacing-sm); flex-wrap: wrap; }
        .auth-panel { max-width: 420px; margin: var(--spacing-xl) auto; padding: var(--spacing-lg); background: var(--pink-100); border: var(--input-border-width) solid var(--pink-300); border-radius: var(--border-radius-lg); }
        .auth-panel h1 { text-align: center; margin-top: 0; color: var(--purple-800); }
        .auth-panel .auth-links { text-align: center; margin-bottom: 0; }
        .auth-panel input[type="email"], .auth-panel input[type="password"] { width: 100%; box-sizing: border-box; }
        .hero input[type="text"] { padding: 0.7rem 1rem; font-size: var(--font-size-base); border: 2px solid var(--purple-400); border-radius: var(--border-radius); width: 60%; min-width: 220px; }
        .chips { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin: var(--spacing-md) 0; align-items: center; }
        .chip { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--chip-padding); border: var(--input-border-width) solid var(--pink-400); border-radius: var(--chip-radius); background: var(--pink-300); color: var(--purple-700); text-decoration: none; }
        .chip a { text-decoration: none; color: inherit; }
        .chip .star { background: none; border: none; cursor: pointer; font-size: var(--font-size-sm); line-height: 1; padding: 0; color: inherit; }
        .chip .star:hover { color: var(--purple-500); }
        .chip:hover { background: var(--filter-hover-bg); }
        .chip.fav { background: var(--purple-300); border-color: var(--purple-400); color: var(--purple-900); }
        .chip.fav .star { color: var(--purple-900); }
        .chip.active { background: var(--filter-bg); border-color: var(--filter-border); color: var(--filter-color); }
        .chip.active:hover { background: var(--filter-hover-bg); }
        .chip .star { color: var(--purple-500); font-size: var(--font-size-sm); cursor: pointer; }
        .chip.active .star { color: var(--purple-900); }
        .chip:has(input[type="checkbox"]) { cursor: pointer; }
        .chip input[type="checkbox"] { display: none; }
        .chip:has(input[type="checkbox"]:checked) { background: var(--purple-300); border-color: var(--purple-400); color: var(--purple-900); }
        .favorite-option.selected { background: var(--purple-300); border-color: var(--purple-400); color: var(--purple-900); }
        .fav-section { margin-top: var(--spacing-xl); }
        .fav-section h2 { color: var(--purple-800); border-bottom: 2px solid var(--pink-300); padding-bottom: var(--spacing-xs); }
        .fav-section h2 a { font-size: var(--font-size-sm); font-weight: normal; color: var(--purple-600); text-decoration: none; float: right; }
        .section-title { color: var(--purple-800); border-bottom: 2px solid var(--pink-300); padding-bottom: var(--spacing-xs); }
        .muted { color: #581c87; }
        .home-layout { display: flex; gap: var(--spacing-lg); align-items: flex-start; }
         .home-nav-wrap { flex: 0 0 230px; display: flex; flex-direction: column; gap: var(--spacing-md); position: sticky; top: 0; }
        .home-nav-actions, .home-nav { display: flex; flex-direction: column; gap: var(--spacing-xs); padding: var(--spacing-md); background: var(--sidebar-bg); border: var(--input-border-width) solid var(--sidebar-border); border-radius: var(--border-radius-lg); }
        .home-nav-actions { gap: var(--spacing-sm); }
        .home-nav-actions .btn { display: block; width: 100%; box-sizing: border-box; padding: var(--spacing-sm) var(--card-padding); border-radius: var(--border-radius); text-align: center; }
        .home-nav-actions form { margin: 0; }
        .user-nav .nav-brand { font-weight: bold; font-size: var(--font-size-lg); color: var(--sidebar-heading); text-decoration: none; margin: 0 0 var(--spacing-sm); }
        .user-nav .nav-item { display: block; padding: var(--spacing-sm) var(--card-padding); border-radius: var(--border-radius); color: var(--sidebar-link-color); text-decoration: none; background: var(--sidebar-link-bg); border: var(--input-border-width) solid var(--sidebar-link-border); }
        .user-nav .nav-item:hover { background: var(--sidebar-link-hover); }
        .user-nav .nav-item.active { background: var(--sidebar-active-bg); border-color: var(--sidebar-active-border); color: var(--sidebar-active-color); }
        .user-nav .nav-sep { border-top: var(--input-border-width) solid var(--sidebar-border); margin: var(--spacing-sm) 0; }
        .user-nav .nav-section-label { margin: 0 0 var(--spacing-xs); color: var(--sidebar-heading); font-size: var(--font-size-xs); font-weight: bold; text-transform: uppercase; letter-spacing: .05em; }
        .user-nav .nav-empty { margin: 0; font-size: var(--font-size-sm); }
        .user-nav .nav-media-item { display: flex; align-items: center; gap: .5rem; }
        .user-nav .nav-media-item img { width: 40px; height: 30px; flex: 0 0 40px; object-fit: cover; border-radius: 4px; }
        .user-nav .nav-logout { width: 100%; margin-top: var(--spacing-xs); }
        .home-nav-actions h2 { margin: 0 0 var(--spacing-xs); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--sidebar-heading); text-align: center; }
        .home-nav h2 { margin: 0 0 var(--spacing-sm); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--sidebar-heading); text-align: center; }
        .home-nav-link { display: block; padding: var(--spacing-sm) var(--card-padding); border-radius: var(--border-radius); color: var(--sidebar-link-color); text-decoration: none; background: var(--sidebar-link-bg); border: var(--input-border-width) solid var(--sidebar-link-border); }
        .home-nav-link:hover { background: var(--sidebar-link-hover); }
        .home-nav-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-color); border-color: var(--sidebar-active-border); font-weight: bold; }
        .home-nav-link.active:hover { background: var(--sidebar-active-bg); }
        .card-cats { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-top: var(--spacing-sm); overflow: hidden; }
        .card-cats-toggle { display: block; margin-top: var(--spacing-sm); padding: var(--spacing-xs) 0; background: none; border: none; color: var(--card-cat-link-color); text-decoration: underline; cursor: pointer; font-size: var(--font-size-sm); }
        .card-cats-toggle[hidden] { display: none; }
        .home-main { flex: 1 1 auto; width: 0; min-width: 0; }
         @media (max-width: 768px) { .home-layout { flex-direction: column; } .home-nav-wrap { flex: none; width: 100%; padding-top: 0 !important; position: static; } .home-main { width: 100%; } }
        .recent-card { cursor: pointer; }
        .recent-strip { display: flex; flex-wrap: nowrap; gap: var(--spacing-md); margin-top: var(--spacing-md); overflow: hidden; justify-content: space-between; }
         .recent-strip .card { width: 220px; flex: 0 0 auto; box-sizing: border-box; }
         .theme-choice-layout { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.4fr); gap: var(--spacing-lg); align-items: start; }
         .theme-choice-list { display: grid; gap: var(--spacing-sm); }
         .theme-choice-card { display: flex; flex-direction: column; gap: var(--spacing-xs); padding: var(--card-padding); border: var(--input-border-width) solid var(--pink-300); border-radius: var(--card-radius); background: var(--pink-100); color: var(--purple-900); cursor: pointer; }
         .theme-choice-card:hover, .theme-choice-card.selected { border-color: var(--purple-400); background: var(--pink-200); }
         .theme-choice-card input { position: absolute; opacity: 0; pointer-events: none; }
         .theme-choice-card span { font-size: var(--font-size-xs); color: var(--purple-700); }
         .theme-swatches { display: flex; gap: 3px; margin-top: var(--spacing-xs); }
         .theme-swatches i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--pink-400); }
         .theme-choice-preview-label { margin-bottom: var(--spacing-xs); color: var(--purple-700); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; }
         .theme-choice-preview { padding: var(--spacing-md); background: var(--pink-200); color: var(--purple-900); border: var(--input-border-width) solid var(--pink-300); border-radius: var(--border-radius-lg); box-shadow: var(--shadow); }
         .theme-choice-preview > img { display: block; max-width: 180px; max-height: 52px; margin: 0 auto var(--spacing-sm); border-radius: var(--border-radius); }
         .theme-choice-preview-nav { display: flex; gap: var(--spacing-md); align-items: center; flex-wrap: wrap; padding-bottom: var(--spacing-sm); margin-bottom: var(--spacing-md); border-bottom: var(--input-border-width) solid var(--pink-300); }
         .theme-choice-preview-nav b { color: var(--purple-900); }
         .theme-choice-preview-nav a, .theme-choice-preview-card a { color: var(--purple-600); text-decoration: none; }
         .theme-choice-preview-nav a:hover, .theme-choice-preview-card a:hover { color: var(--purple-400); }
         .theme-choice-preview-body { display: grid; grid-template-columns: 130px 1fr; gap: var(--spacing-md); }
         .theme-choice-preview aside { display: flex; flex-direction: column; gap: var(--spacing-xs); padding: var(--spacing-sm); background: var(--sidebar-bg); border: var(--input-border-width) solid var(--sidebar-border); border-radius: var(--border-radius); }
         .theme-choice-preview aside b { color: var(--sidebar-heading); font-size: var(--font-size-xs); }
         .theme-choice-preview aside span { padding: var(--spacing-xs); background: var(--sidebar-link-bg); border: var(--input-border-width) solid var(--sidebar-link-border); border-radius: var(--border-radius); color: var(--sidebar-link-color); font-size: var(--font-size-xs); }
         .theme-choice-preview-card { display: flex; flex-direction: column; gap: var(--spacing-xs); padding: var(--card-padding); margin-bottom: var(--spacing-sm); background: var(--card-bg); border: var(--input-border-width) solid var(--card-border); border-radius: var(--card-radius); }
         .theme-choice-preview-card b { color: var(--card-title-color); }
         .theme-choice-preview-card small { color: var(--card-text-color); }
         .theme-choice-preview button { padding: var(--btn-padding); background: var(--btn-bg); color: var(--btn-color); border: 0; border-radius: var(--btn-radius); cursor: pointer; font-size: var(--btn-font-size); }
         .theme-choice-preview button:hover { background: var(--btn-hover-bg); }
         @media (max-width: 768px) { .theme-choice-layout { grid-template-columns: 1fr; } }
        .collapsible { overflow: hidden; transition: max-height .3s; }
        img { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }