.public-shell { max-width:var(--content-narrow); margin:0 auto; padding:var(--space-4) var(--space-4) var(--space-10); display:grid; gap:var(--space-5); } .public-topbar { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); } .screen-intro { margin-bottom:var(--space-6); } .file-screen-intro > * + * { margin-top:var(--space-4); } .screen-toolbar { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); margin-bottom:var(--space-6); } .picker-card { padding:var(--space-5); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface-muted); margin-bottom:var(--space-5); } .file-list-section { margin-top:var(--space-6); } .selected-files-header { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); margin-bottom:var(--space-4); } .selected-files-actions { display:inline-flex; align-items:center; gap:var(--space-3); } .file-list { list-style:none; padding:0; margin:0; display:grid; gap:var(--space-4); } .sticky-upload-bar { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); margin-top:var(--space-6); padding:var(--space-4); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface-card); box-shadow:var(--shadow-sm); } .sticky-upload-actions { display:flex; align-items:center; gap:var(--space-3); } .sticky-upload-title { font-weight:700; margin-bottom:var(--space-1); } .sticky-upload-meta { color:var(--text-muted); } @media (max-width:700px) { .screen-toolbar, .selected-files-header, .sticky-upload-bar { flex-direction:column; align-items:stretch; } .selected-files-actions,.sticky-upload-actions { justify-content:space-between; flex-wrap:wrap; } .file-row-head { grid-template-columns:1fr; } .file-row-status-actions, .file-row-actions { justify-content:flex-start; flex-wrap:wrap; } }
/* Drop zone */
.drop-zone,.drop-zone-outer{cursor:pointer;border:2px dashed var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-6);transition:border-color var(180ms ease),background var(180ms ease)}
.drop-zone.drag-active,.drop-zone-outer.drag-active{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 6%,transparent)}

/* Submitted banner */
.drop-zone{cursor:pointer;border:2px dashed var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-8) var(--space-6);text-align:center;transition:border-color var(180ms ease),background var(180ms ease);margin-block:var(--space-4)}
.drop-zone:hover,.drop-zone:focus-visible{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 5%,transparent);outline:none}
.drop-zone.drag-active{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 10%,transparent);border-style:solid}
.drop-zone-inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.drop-icon{color:var(--text-muted);margin-bottom:var(--space-2)}
.drop-zone-label{font-size:var(--text-base);font-weight:500;color:var(--text-strong)}
.drop-zone-sub{font-size:var(--text-sm);color:var(--text-muted)}
.drop-zone-types{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-1)}
.btn-inline-link{background:none;border:none;color:var(--primary);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.btn-inline-link:hover{color:var(--primary)}
.queue-actions-bar{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-block:var(--space-2)}
.submitted-banner{display:flex;align-items:center;gap:var(--space-3);background:color-mix(in oklab,var(--success) 12%,var(--surface-card));border:1px solid color-mix(in oklab,var(--success) 30%,transparent);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);color:var(--success);font-size:var(--text-sm);margin-block:var(--space-6)}

.modal-sheet-overlay{position:fixed;inset:0;background:rgba(24,24,28,.45);display:none;place-items:end center;padding:var(--space-4);z-index:40}.modal-sheet-overlay:not([hidden]){display:grid}
.modal-sheet{width:min(100%,32rem);background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-6);box-shadow:0 -12px 40px rgba(25,27,38,.18)}
.match-card{padding:var(--space-4);border:1px solid var(--border-soft);border-radius:var(--radius-lg);background:var(--surface-alt)}
.match-name{font-size:var(--text-md);font-weight:700;color:var(--text-strong)}
.match-meta{color:var(--text-muted)}

#submitted-banner[hidden]{display:none!important}
.modal-sheet-overlay{place-items:center!important}
.modal-sheet{border-radius:var(--radius-xl)!important;max-width:min(32rem,calc(100vw - 2rem));margin:0 auto}

.theme-toggle{width:3rem;height:3rem;border-radius:999px;border:1px solid color-mix(in oklab,var(--primary) 18%,var(--border-soft));background:linear-gradient(180deg,color-mix(in oklab,var(--surface-card) 82%,var(--surface-alt)),color-mix(in oklab,var(--surface-soft-blue) 55%,var(--surface-card)));color:var(--primary);box-shadow:0 8px 20px rgba(90,127,166,.10);display:grid;place-items:center}
.theme-toggle:hover{background:linear-gradient(180deg,color-mix(in oklab,var(--surface-card) 70%,var(--surface-alt)),color-mix(in oklab,var(--surface-soft-blue) 70%,var(--surface-card)));border-color:color-mix(in oklab,var(--primary) 35%,var(--border-soft))}
.theme-toggle:focus-visible{outline:2px solid color-mix(in oklab,var(--primary) 60%,white);outline-offset:3px}

#submitted-banner{display:none!important}

.success-state{padding:clamp(2.5rem,6vw,4.5rem) clamp(1.25rem,4vw,2.5rem);text-align:center;align-items:center;justify-items:center;max-width:44rem;margin-inline:auto;min-height:clamp(28rem,56vh,36rem)}
.success-state .screen-intro{align-items:center;max-width:36rem;margin-inline:auto}
.success-state .screen-intro .lede{max-width:28rem;margin-inline:auto}
.success-icon{width:5rem;height:5rem;border-radius:999px;background:linear-gradient(180deg,var(--surface),var(--surface-soft-green));color:var(--success);display:grid;place-items:center;margin-inline:auto;box-shadow:0 18px 45px rgba(91,127,166,.08)}
.success-support{color:var(--text-muted);max-width:32rem;margin-inline:auto;line-height:1.65}
.success-actions{width:min(100%,24rem);margin-inline:auto;padding-top:var(--space-2)}
.success-actions .btn{width:100%}
@media (max-width: 640px){.success-state{min-height:auto;padding-block:2.5rem}.success-icon{width:4.5rem;height:4.5rem}.success-actions{width:100%}}

.queue-actions-bar .btn{min-width:9rem}
.sticky-upload-bar .btn[disabled]{opacity:.65;cursor:not-allowed}
.modal-sheet-overlay{overflow:auto}

.drop-zone input[type="file"]{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}
.drop-zone{position:relative;overflow:hidden}

.sticky-upload-bar.is-uploading{background:var(--surface-blue);border-color:color-mix(in srgb,var(--primary) 24%, var(--border-subtle));box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 12%, transparent),var(--shadow-sm)}
.sticky-upload-bar.is-uploading .sticky-upload-title{color:var(--primary)}


@media (max-width:480px){
  .public-shell{padding-inline:var(--space-3);gap:var(--space-4)}
  .screen-card{padding:var(--space-5)}
  .drop-zone{padding:var(--space-6) var(--space-4)}
  .queue-actions-bar .btn{min-width:0;flex:1 1 calc(50% - var(--space-2))}
  .file-row{padding:var(--space-3)}
  .file-row-status-actions{gap:var(--space-2)}
  .sticky-upload-actions .btn,.sticky-upload-bar .btn{width:100%}
  .success-actions{width:100%}
}
@media (min-width:768px){
  .public-shell{max-width:var(--content-default)}
}


body{display:block}
.public-shell{width:min(100% - 2rem,56rem);margin-inline:auto}
#screen-session,#screen-files,#screen-success{width:100%;margin-inline:auto}
@media (min-width:768px){
  .public-shell{width:min(100% - 3rem,64rem)}
}
@media (min-width:1280px){
  .public-shell{width:min(100% - 4rem,72rem)}
}


.cookie-banner{position:fixed;left:50%;bottom:var(--space-4);transform:translateX(-50%);z-index:40;width:min(calc(100% - 1.5rem),72rem);display:flex;gap:var(--space-4);align-items:flex-end;justify-content:space-between;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:color-mix(in oklab,var(--color-surface) 94%,white);box-shadow:var(--shadow-lg)}
.cookie-banner-copy{display:grid;gap:var(--space-2);max-width:58ch}
.cookie-banner-title{font-size:var(--text-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text)}
.cookie-banner-text{font-size:var(--text-sm);color:var(--color-text-muted)}
.cookie-banner-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-end}
@media (max-width: 767px){
  .cookie-banner{width:min(calc(100% - 1rem),42rem);left:50%;bottom:var(--space-3);transform:translateX(-50%);flex-direction:column;align-items:stretch}
  .cookie-banner-actions{display:grid;grid-template-columns:1fr;justify-content:stretch}
  .cookie-banner-actions .btn{width:100%}
}


.cookie-banner{position:fixed;left:50%;bottom:var(--space-4);transform:translateX(-50%);z-index:40;width:min(calc(100% - 1.5rem),56rem);display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:color-mix(in oklab,var(--color-surface) 96%,white);box-shadow:var(--shadow-lg)}
.cookie-banner[hidden]{display:none!important}
.cookie-banner-copy{display:grid;gap:var(--space-1);max-width:44rem}
.cookie-banner-title{font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text)}
.cookie-banner-text{font-size:var(--text-sm);color:var(--color-text-muted)}
.cookie-banner-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-end;flex:0 0 auto}
.cookie-policy-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:var(--space-4)}
.cookie-policy-modal[hidden]{display:none!important}
.cookie-policy-backdrop{position:absolute;inset:0;background:rgba(27,26,24,.42);backdrop-filter:blur(4px)}
.cookie-policy-dialog{position:relative;z-index:1;width:min(100%,42rem);max-height:min(85dvh,44rem);overflow:auto;border:1px solid var(--color-border);border-radius:1.5rem;background:var(--color-surface);box-shadow:var(--shadow-lg);padding:var(--space-5)}
.cookie-policy-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.cookie-policy-body{display:grid;gap:var(--space-3)}
@media (max-width: 767px){
  .cookie-banner{width:min(calc(100% - 1rem),42rem);bottom:var(--space-3);flex-direction:column;align-items:stretch}
  .cookie-banner-actions{display:grid;grid-template-columns:1fr;justify-content:stretch}
  .cookie-banner-actions .btn{width:100%}
  .cookie-policy-dialog{width:min(100%,36rem);padding:var(--space-4)}
  .cookie-policy-header{flex-direction:column;align-items:flex-start}
}