:root{font-weight:var(--vf-ui-weight-regular);font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--vf-ui-color-text);background:var(--vf-ui-color-background);color-scheme:dark}
.account-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;margin:20px 0}.account-links .card{display:block;margin:0;padding:16px;overflow-wrap:anywhere}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a{cursor:pointer}button{border:0;background:transparent;color:var(--vf-ui-color-text);border-radius:var(--vf-ui-radius);padding:10px 15px;min-height:44px}button:hover{background:transparent;border:0;color:var(--vf-ui-color-text)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:transparent;color:var(--vf-ui-color-text);border-color:var(--vf-ui-color-accent);font-weight:var(--vf-ui-weight-medium);border:0}button.danger{border-color:var(--vf-ui-color-accent);color:var(--vf-ui-color-text);background:transparent;border:0}a{color:var(--vf-ui-color-text)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--vf-ui-color-accent);outline-offset:2px}main{max-width:1120px;margin:auto;padding:28px 16px 90px}h1{font-size:clamp(1.65rem,4vw,2.4rem);line-height:1.2;margin:0 0 12px}h2{font-size:1.25rem;margin:0 0 10px}p{margin:8px 0 16px}.lead,.muted{color:var(--vf-ui-color-muted)}.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0}.card{border:0;background:transparent;border-radius:var(--vf-ui-radius);padding:20px;margin:14px 0}.stack>*+*{margin-top:14px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.split{display:grid;grid-template-columns:minmax(240px,360px) minmax(0,1fr);gap:18px}.split>.card{margin:0}.list{display:grid;gap:9px}.list button{text-align:left;width:100%;height:auto}.list button[aria-current]{border-color:var(--vf-ui-color-accent)}.item-title{font-weight:var(--vf-ui-weight-medium);display:block}.small{font-size:.88rem;color:var(--vf-ui-color-muted)}.badge{display:inline-block;border:0;border-radius:var(--vf-ui-radius);padding:2px 9px;font-size:.83rem;margin:3px 0;background:transparent}.field{display:grid;gap:6px;margin:12px 0}.field label{font-weight:var(--vf-ui-weight-medium)}.field input,.field select,.field textarea{width:100%;padding:11px;border:0;background:transparent;color:var(--vf-ui-color-text);border-radius:var(--vf-ui-radius);border-bottom:1px solid var(--vf-ui-color-line)}.field textarea{min-height:130px;resize:vertical}.checkbox{display:flex;gap:9px;align-items:flex-start;margin:16px 0}.checkbox input{margin-top:6px}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.media-card{min-width:0;border:0;border-radius:var(--vf-ui-radius);padding:9px;background:transparent}.media-card img,.story-image{display:block;width:100%;max-height:540px;object-fit:contain;background:var(--vf-ui-color-background);border-radius:var(--vf-ui-radius)}.media-card img{height:130px}.story-image{margin:12px 0}.media-card .toolbar{margin:8px 0 0}.error{color:var(--vf-ui-color-accent)}.success{color:var(--vf-ui-color-text)}.separator{border:0;border-top:1px solid var(--vf-ui-color-line);margin:24px 0}#notice{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);max-width:min(95vw,700px);background:var(--vf-ui-color-background);color:var(--vf-ui-color-text);padding:9px 15px;border-radius:var(--vf-ui-radius);z-index:8}#notice:empty{display:none}.back{margin-bottom:18px}.view-switch{display:none}.user-text{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:700px){main{padding:20px 12px 70px}.card{padding:15px;background:transparent;border:0}.split{display:block}.split>.card{margin:12px 0}.split .detail{display:none}.split.mobile-detail .list-panel{display:none}.split.mobile-detail .detail{display:block}.view-switch{display:inline-block}}
@media(max-width:350px){.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar button{max-width:100%}}
.image-button{display:block;width:100%;padding:0;border:0;background:transparent}.image-button:hover{background:transparent}.image-dialog{max-width:min(96vw,1100px);max-height:94vh;padding:16px;border:1px solid var(--vf-ui-color-line);border-radius:var(--vf-ui-radius);background:var(--vf-ui-color-surface);color:var(--vf-ui-color-text)}.image-dialog::backdrop{background:var(--vf-ui-color-overlay)}.image-dialog img{display:block;max-width:100%;max-height:calc(94vh - 90px);object-fit:contain;margin-top:12px}
.cover{position:relative;margin:0 0 28px;border-radius:var(--vf-ui-radius);overflow:hidden;background:var(--vf-ui-color-surface)}.cover img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}.cover-placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;aspect-ratio:16/7;margin:0;padding:24px;text-align:center;background:linear-gradient(130deg,var(--vf-ui-color-raised),var(--vf-ui-color-surface));color:var(--vf-ui-color-muted)}.cover-placeholder strong{font-size:clamp(1.2rem,3vw,2rem);color:var(--vf-ui-color-text)}.cover-manage{display:block;padding:12px 16px;background:var(--vf-ui-color-background)}.featured .image-button img{display:block;width:100%;max-height:62vh;object-fit:contain}.featured-dialog{width:min(96vw,1100px)}.featured-dialog .toolbar{justify-content:center}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:16px 0 28px}.post-card.card{min-width:0;padding:0;margin:0;overflow:hidden}.post-card h2{margin:0;font-size:.875rem;font-weight:500}.post-visual{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;text-decoration:none;color:var(--vf-ui-color-text);background:var(--vf-ui-color-raised)}.post-visual img{display:block;width:100%;height:100%;object-fit:cover}.post-excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden;margin:18px;font-size:1rem;line-height:1.7}.post-image-error{display:flex;align-items:center;justify-content:center;height:100%;padding:18px;color:var(--vf-ui-color-muted)}.post-card>p{margin:0;padding:9px 12px;font-size:.75rem}.post-visual:focus-visible{outline-offset:-4px}
@media(max-width:700px){.cover img,.cover-placeholder{aspect-ratio:16/9}.cover-placeholder{padding:18px;font-size:.875rem}.post-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.post-card>p{padding:8px}.post-excerpt{margin:12px;-webkit-line-clamp:5;font-size:.875rem}}
.toolbar input[type=search],.toolbar select{min-height:44px;max-width:100%;padding:9px;border:0;border-radius:var(--vf-ui-radius);background:transparent;color:var(--vf-ui-color-text);border-bottom:1px solid var(--vf-ui-color-line)}.toolbar input[type=search]{flex:1 1 230px}
.card h2{overflow-wrap:anywhere}
@media(max-width:700px){.featured-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}.featured-dialog img{max-height:65dvh}}
.album-grid .story-image{height:210px;object-fit:contain}.public-photo-dialog{width:min(96vw,1100px)}.public-photo-dialog img{width:100%;max-height:60vh}.public-photo-dialog p{overflow-wrap:anywhere}.public-photo-dialog .toolbar{justify-content:center}.public-photo-dialog>a{display:inline-block;margin:12px}
@media(max-width:700px){.public-photo-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}.public-photo-dialog img{max-height:55dvh}}
.profile-avatar{display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;margin:14px 0}.default-avatar{background:var(--vf-ui-color-line);text-align:center;line-height:96px;font-size:36px}.avatar-review-image{display:block;width:min(100%,512px);height:auto}.crop-box{max-width:420px}.crop-frame{position:relative;width:min(100%,300px);aspect-ratio:1;overflow:hidden;border:2px solid var(--vf-ui-color-accent);border-radius:var(--vf-ui-radius);touch-action:none;background:var(--vf-ui-color-background)}.crop-frame img{position:absolute;max-width:none;pointer-events:none}.crop-box input[type=range]{width:100%}

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

/* Compact submission form: stacked on phones, photo and copy columns on desktop. */
.submission-layout {display:grid;gap:24px;min-width:0}
.submission-layout>section {min-width:0}
.add-photo {width:92px;height:92px;font-size:40px;line-height:1;border:1px dashed var(--line,var(--vf-ui-color-line));background:transparent;margin:12px 0}
.add-photo:focus-visible {outline:2px solid var(--vf-ui-color-accent);outline-offset:4px}
.submission-copy textarea {min-height:160px}
.submission-form input,.submission-form textarea {font-size:16px}
.story-tabs {display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.story-tabs button {min-height:44px;min-width:80px}
.story-tabs [aria-pressed="true"]{background:transparent;color:var(--vf-ui-color-text);border-color:var(--vf-ui-color-accent);text-decoration:underline;text-underline-offset:var(--vf-ui-space-2)}
 .submission-form{container-type:inline-size}
@container(min-width:900px){.submission-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}


.compact-filter:has(select[hidden]){grid-template-columns:minmax(0,1fr) 44px}

.responsive-photo{display:block;max-width:100%;width:100%}.responsive-photo>img{display:block;width:100%;height:auto}

/* Shared visual tokens; existing fonts and component geometry stay in place. */
:root {
  --vf-ui-color-accent: var(--vf-ui-color-text);
  --vf-ui-color-background: #111111;
  --vf-ui-color-background-top: color-mix(in srgb, var(--vf-ui-color-text) 3%, var(--vf-ui-color-background));
  --vf-ui-page-background: linear-gradient(to bottom, var(--vf-ui-color-background-top), var(--vf-ui-color-background));
  --vf-ui-color-text: #F2F2F2;
  --vf-ui-color-muted: #929292;
  --vf-ui-color-surface: color-mix(in srgb, var(--vf-ui-color-text) 5%, var(--vf-ui-color-background));
  --vf-ui-color-overlay: color-mix(in srgb, var(--vf-ui-color-background) 90%, transparent);
  --vf-ui-color-on-accent: var(--vf-ui-color-background);
  --vf-ui-color-raised: color-mix(in srgb, var(--vf-ui-color-text) 9%, var(--vf-ui-color-background));
  --vf-ui-color-hover: color-mix(in srgb, var(--vf-ui-color-text) 14%, var(--vf-ui-color-background));
  --vf-ui-color-line: color-mix(in srgb, var(--vf-ui-color-text) 24%, transparent);

  --vf-ui-space-0: 0;
  --vf-ui-space-1: 0.25rem;
  --vf-ui-space-2: 0.5rem;
  --vf-ui-space-3: 0.75rem;
  --vf-ui-space-4: 1rem;
  --vf-ui-space-6: 1.5rem;
  --vf-ui-space-8: 2rem;
  --vf-ui-space-12: 3rem;
  --vf-ui-space-16: 4rem;
  --vf-ui-space-24: 6rem;

  --vf-ui-font-small: 0.875rem;
  --vf-ui-font-body: 1rem;
  --vf-ui-font-subheading: 1.25rem;
  --vf-ui-font-heading: 2rem;
  --vf-ui-font-hero: 3rem;
  --vf-ui-font-hero-wide: 4.5rem;
  --vf-ui-weight-regular: 400;
  --vf-ui-weight-medium: 500;
  --vf-ui-line-heading: 1.1;
  --vf-ui-line-body: 1.5;

  --vf-ui-radius: 0;
  --vf-ui-control-radius: 8px;
  --vf-ui-control-line-width: 1px;
  --vf-ui-control-border: color-mix(in srgb, var(--vf-ui-color-text) 58%, transparent);
  --vf-ui-control-hover-scale: 1.02;
  --vf-ui-radius-avatar: 50%;
  --vf-ui-card-ratio: 16 / 9;
  --vf-ui-content-max: 80rem;
  --vf-ui-target-min: 44px;
  --vf-ui-focus-width: 2px;
  --vf-ui-hero-height: 100vh;
  --vf-ui-hero-height-mobile: 100svh;
  --vf-ui-grid-gap: var(--vf-ui-space-8);
  --vf-ui-grid-gap-mobile: var(--vf-ui-space-3);

  --vf-ui-layer-header: 10;
  --vf-ui-layer-menu: 20;
  --vf-ui-layer-dialog: 40;
  --vf-ui-layer-notice: 50;
  --vf-ui-header-blur: 12px;
  --vf-ui-header-icon-size: 24px;
  --vf-ui-header-disabled: 0.45;
  --vf-header-height: calc(var(--vf-ui-target-min) + var(--vf-ui-space-4) * 2);
  --vf-ui-hover-scale: 1.04;
  --vf-ui-navigation-hover-scale: 1.06;
  --vf-ui-press-scale: 0.98;
  --vf-ui-motion-duration: 0.33s;
  --vf-ui-motion-easing: ease;
}

/* Keep all destinations visible, with compact account tools beside the brand. */
.site-header{position:sticky;top:var(--vf-ui-space-0);z-index:var(--vf-ui-layer-header);display:flex;align-items:center;gap:var(--vf-ui-space-4);padding:var(--vf-ui-space-3) max(var(--vf-ui-space-4),calc((100vw - var(--vf-ui-content-max))/2));background:var(--vf-ui-color-background);color:var(--vf-ui-color-text);font-size:var(--vf-ui-font-body);font-weight:var(--vf-ui-weight-regular)}
.site-header a,.site-header button,.site-header select{display:inline-flex;align-items:center;justify-content:center;min-height:var(--vf-ui-target-min);text-decoration:none;font:inherit;padding:var(--vf-ui-space-2)}
.site-header a{color:var(--vf-ui-color-accent)}
.site-header #navigation a[aria-current]{background:transparent;text-decoration:underline;text-underline-offset:var(--vf-ui-space-2)}
.site-header .brand{justify-content:flex-start;padding:var(--vf-ui-space-0);font-size:var(--vf-ui-font-subheading);font-weight:var(--vf-ui-weight-medium);color:var(--vf-ui-color-text);white-space:nowrap}
.site-header #global-back{flex:none;min-width:var(--vf-ui-target-min);width:var(--vf-ui-target-min);padding:var(--vf-ui-space-0);font-size:var(--vf-ui-font-subheading)}
.site-header #navigation{display:flex;flex:1;flex-wrap:wrap;gap:var(--vf-ui-space-2);min-width:0}
.site-header #navigation a{white-space:nowrap}
#header-tools{display:flex;flex:none;flex-wrap:wrap;min-width:0;align-items:center;gap:var(--vf-ui-space-2)}
.language-control{position:relative;display:flex;align-items:center;flex:none}
.language-compact{display:none}
.site-header #language{width:auto;max-width:100%;font-size:var(--vf-ui-font-body)}
.site-header #language option{background:var(--vf-ui-color-background);color:var(--vf-ui-color-text)}
.site-header .account-avatar{width:max(var(--vf-ui-target-min),var(--vf-ui-space-12));height:max(var(--vf-ui-target-min),var(--vf-ui-space-12));border:0;border-radius:var(--vf-ui-radius-avatar);overflow:hidden;padding:var(--vf-ui-space-0);background:transparent;color:var(--vf-ui-color-text);font-size:var(--vf-ui-font-small);line-height:var(--vf-ui-line-heading);text-align:center}
.account-avatar img{width:100%;height:100%;object-fit:cover}
.site-header .ui-icon{width:var(--vf-ui-header-icon-size);height:var(--vf-ui-header-icon-size)}
.site-header .notification-nav{min-width:var(--vf-ui-target-min)}
@media(max-width:960px){
 .site-header{position:static;flex-wrap:wrap;gap:var(--vf-ui-space-1);padding:var(--vf-ui-space-2)}
 .site-header .brand{flex:1;min-width:max-content;white-space:nowrap;font-size:clamp(var(--vf-ui-font-body),4.5vw,var(--vf-ui-font-subheading));line-height:var(--vf-ui-line-heading)}
 #header-tools{flex:0 0 auto;justify-content:flex-end;margin:var(--vf-ui-space-0);gap:var(--vf-ui-space-1)}
 .site-header .account-avatar{width:max(var(--vf-ui-target-min),2.5em);height:max(var(--vf-ui-target-min),2.5em);border:0;background:transparent}
 .language-control,.site-header #language{width:var(--vf-ui-target-min);height:var(--vf-ui-target-min)}
 .site-header #language{padding:var(--vf-ui-space-0);border:0;cursor:pointer}.site-header #language:focus-visible{outline:none}
 .language-compact{position:absolute;inset:var(--vf-ui-space-0);display:flex;align-items:center;justify-content:center;gap:var(--vf-ui-space-1);background:var(--vf-ui-color-background);color:var(--vf-ui-color-text);font-size:var(--vf-ui-font-small);pointer-events:none}
 .language-compact::after{content:'⌄'}
 .language-control:focus-within{outline:var(--vf-ui-focus-width) solid var(--vf-ui-color-text);outline-offset:var(--vf-ui-space-1)}
 .site-header #navigation{order:3;flex:0 0 100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--vf-ui-space-0)}
 .site-header #navigation a{font-size:var(--vf-ui-font-small);padding:var(--vf-ui-space-2) var(--vf-ui-space-0);text-align:center;white-space:normal;overflow-wrap:anywhere}
}

/* Use spacing and contrast for public cards; keep keyboard focus distinct. */
.post-card.card{border:0}
.post-content{transition:background-color var(--vf-ui-motion-duration) var(--vf-ui-motion-easing)}
.post-content:hover{background:transparent}
.post-content:focus-visible{outline:var(--vf-ui-focus-width) solid var(--vf-ui-color-accent);outline-offset:var(--vf-ui-space-1)}
.toolbar>a,#app>a,.draft-controls>a,[data-control=author],.schedule-filters~article.card h2>a{display:inline-flex;align-items:center;min-height:var(--vf-ui-target-min)}
@media(prefers-reduced-motion:reduce){.post-content{transition:none}}

h1,h2,h3{color:var(--vf-ui-color-text)}
h1 a,h2 a,h3 a{color:inherit}
h1,h2,h3,strong,b,legend{font-weight:var(--vf-ui-weight-medium)}
.post-image-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--vf-ui-space-2);padding:var(--vf-ui-space-4);background:var(--vf-ui-color-surface);color:var(--vf-ui-color-muted);text-align:center}
.post-image-error::before{content:"ValoFanHub";color:var(--vf-ui-color-text);font-weight:var(--vf-ui-weight-medium)}


/* Keep the native file picker, but remove its browser-default filled button. */
input::file-selector-button{min-height:var(--vf-ui-target-min);padding:var(--vf-ui-space-2);margin-right:var(--vf-ui-space-2);border:0;background:transparent;color:var(--vf-ui-color-text);font:inherit;text-decoration:underline;text-underline-offset:var(--vf-ui-space-1);cursor:pointer}

/* Creative filters stay inside the existing compact gallery toolbar. */
.creative-picker{border:0;padding:0;margin:12px 0;min-width:0;text-align:left}
.creative-picker>label{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.creative-picker select{max-width:100%;min-height:44px}
.creative-picker .small{margin:6px 0;color:#c8c4ba}
.creative-options summary,.creative-filter-panel>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:#dfc77d}
.creative-options summary::before,.creative-filter-panel>summary::before{content:'＋';margin-right:8px}
.creative-options[open]>summary::before,.creative-filter-panel[open]>summary::before{content:'−'}
.creative-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.creative-chips:empty{display:none}
.creative-chips a,.creative-chips button{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border:1px solid #655b44;border-radius:22px;font-size:14px}
.creative-options-list{max-height:280px;overflow:auto;overscroll-behavior:contain;margin:8px 0}
.creative-options-list h3{font-size:14px;margin:8px 0}
.creative-tag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:4px}
.creative-tag-grid label{display:flex!important;align-items:center;gap:8px;min-height:44px;font-size:14px;cursor:pointer;margin:0!important}
.creative-tag-grid input{width:18px!important;height:18px;min-height:0!important;flex:none}
.creative-picker input[type=search]{width:100%;min-width:0;font-size:16px}
.creative-filter-panel{flex-basis:100%;width:100%;min-width:0;border-top:1px solid #453f32}
.gallery-filter:has(.creative-filter-panel){flex-wrap:wrap}
.gallery-filter .creative-picker{width:100%;padding:0 8px;box-sizing:border-box}
.creative-picker button:focus-visible,.creative-picker input:focus-visible,.creative-picker select:focus-visible,.creative-options summary:focus-visible,.creative-filter-panel>summary:focus-visible{outline:2px solid #ead18a;outline-offset:3px}
@media(max-width:600px){.creative-tag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.creative-filter-panel input,.creative-filter-panel select{font-size:16px}.creative-picker>label{display:block}.creative-picker>label select{width:100%}}

.player-tag-editor{min-width:0}.player-tag-entry{display:flex;gap:8px;flex-wrap:wrap}.player-tag-entry input{flex:1 1 150px;min-width:0}.player-tag-entry button{flex:0 0 auto}.player-tag-editor .creative-chips button{overflow-wrap:anywhere;max-width:100%}