:root{
  --polish-line:rgba(210,177,116,.18);
  --polish-line-strong:rgba(210,177,116,.42);
  --polish-glass:rgba(18,19,26,.76);
  --polish-shadow:0 18px 46px rgba(0,0,0,.25);
  --polish-ring:0 0 0 3px rgba(210,177,116,.12),0 0 0 1px rgba(241,217,165,.48);
}
::selection{background:rgba(139,58,80,.62);color:#fff7e9}
html{scrollbar-color:rgba(210,177,116,.30) rgba(255,255,255,.025)}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{scrollbar-width:thin}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.018)}
*::-webkit-scrollbar-thumb{background:rgba(210,177,116,.22);border:2px solid rgba(16,17,23,.72);border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:rgba(210,177,116,.34)}

/* Keyboard/touch clarity without changing existing click logic. */
:where(button,.btn,.tab,input,textarea,select,summary,[role="button"],[tabindex]):focus-visible{
  outline:none!important;box-shadow:var(--polish-ring)!important;border-color:rgba(241,217,165,.55)!important
}
:where(.btn,.tab,.chronicle-mode,.roster-switch button,.semantic-chip):active{transform:translateY(0) scale(.985)!important}

/* Header: preserve the already-compact UX system, just give it a cleaner hierarchy. */
.topbar{background:linear-gradient(180deg,rgba(11,12,17,.90),rgba(11,12,17,.76))!important;border-bottom-color:rgba(210,177,116,.18)!important;box-shadow:0 8px 26px rgba(0,0,0,.18)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(210,177,116,.28) 28%,rgba(210,177,116,.11) 72%,transparent)}
.topbar-inner{min-height:68px}
.brand h1{letter-spacing:.065em;color:#f4ecdf}
.brand p{opacity:.82}
#mainToolbar.ux1391-ready{gap:5px!important}
.ux1391-role{min-height:38px;padding-inline:10px;background:rgba(255,255,255,.02);border-color:rgba(210,177,116,.17)}
.ux1391-primary .header-action,.ux1391-more-toggle.header-action{border-color:rgba(210,177,116,.17)!important;background:rgba(255,255,255,.025)!important}
.ux1391-primary .header-action:hover,.ux1391-primary .header-action:focus-visible,.ux1391-more-toggle.header-action:hover,.ux1391-more-toggle.header-action:focus-visible{background:rgba(210,177,116,.07)!important;border-color:rgba(210,177,116,.38)!important}
.ux1391-more-panel{border-color:rgba(210,177,116,.24);box-shadow:0 26px 72px rgba(0,0,0,.56),inset 0 1px rgba(255,255,255,.025)}
.ux1391-section{border-color:rgba(210,177,116,.11);background:rgba(255,255,255,.014)}

/* Main navigation becomes a calmer archive rail. */
.tabs{max-width:calc(100vw - 24px);padding:7px;gap:4px;margin-bottom:28px;border-color:rgba(210,177,116,.18);background:rgba(16,17,23,.76);box-shadow:0 12px 34px rgba(0,0,0,.20);overflow-x:auto;overflow-y:visible;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;min-height:42px;padding:9px 13px;font-size:12px;white-space:nowrap;letter-spacing:.01em}
.tab::after{content:"";position:absolute;left:24%;right:24%;bottom:3px;height:1px;border-radius:99px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transform:scaleX(.45);transition:opacity .24s ease,transform .32s var(--motion-soft,ease);pointer-events:none}
.tab.active{background:linear-gradient(180deg,rgba(210,177,116,.12),rgba(210,177,116,.055));box-shadow:inset 0 0 0 1px rgba(210,177,116,.20)}
.tab.active::after{opacity:.92;transform:scaleX(1)}
.tab.beta5150-arrive::before{content:"";position:absolute;inset:4px;border-radius:8px;pointer-events:none;background:linear-gradient(105deg,transparent 28%,rgba(241,217,165,.13) 48%,transparent 67%);animation:beta5150TabSheen .52s ease-out both}
@keyframes beta5150TabSheen{from{opacity:0;transform:translateX(-22%)}35%{opacity:1}to{opacity:0;transform:translateX(22%)}}

/* Section rhythm: titles, filters and surfaces now read as one visual language. */
.tab-panel>.shell{min-width:0}
.section-head{position:relative;align-items:flex-end;margin-bottom:20px;padding-bottom:16px}
.section-head::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(210,177,116,.34),rgba(210,177,116,.08) 46%,transparent 84%);pointer-events:none}
.section-head::after{content:"◆";position:absolute;left:0;bottom:-5px;padding-right:8px;background:#11131a00;color:rgba(210,177,116,.62);font:8px/1 Georgia,serif;text-shadow:0 0 8px rgba(210,177,116,.18);pointer-events:none}
.section-head h3{letter-spacing:-.012em;text-wrap:balance}
.section-head p{max-width:760px;line-height:1.5;opacity:.92}
.controls,.place-controls,.thread-controls{gap:8px}
.field,.select,textarea.field{border-color:rgba(210,177,116,.18);background:rgba(17,18,25,.72);box-shadow:inset 0 1px rgba(255,255,255,.02);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.field:hover,.select:hover{border-color:rgba(210,177,116,.30);background:rgba(21,22,29,.80)}
.field:focus,.select:focus,textarea.field:focus{background:rgba(20,21,28,.92);border-color:rgba(210,177,116,.54);box-shadow:0 0 0 3px rgba(210,177,116,.075)}
.field::placeholder,textarea.field::placeholder{color:color-mix(in srgb,var(--muted) 72%,transparent)}
.roster-switch,.chronicle-switch{border-color:rgba(210,177,116,.16);background:rgba(17,18,25,.58);box-shadow:inset 0 1px rgba(255,255,255,.018)}
.map-toolbar{border-color:rgba(210,177,116,.16);background:linear-gradient(135deg,rgba(22,22,29,.78),rgba(16,17,23,.68));box-shadow:0 10px 28px rgba(0,0,0,.12)}

/* Cards: no redesign, only depth/edge consistency. */
:where(.overview-card,.thread-card,.event,.relation,.stat,.place-card,.npc-card,.stash-item,.board-case-card){box-shadow:0 14px 36px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.018)}
:where(.overview-card,.thread-card,.event,.relation,.stat,.place-card,.npc-card,.stash-item,.board-case-card):hover{box-shadow:0 18px 46px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.024)}
.card-body{padding:17px 18px 18px}
.summary{line-height:1.58}
.pill,.tag,.status,.legend-chip,.event-badge,.thread-link{border-color:rgba(210,177,116,.14);box-shadow:inset 0 1px rgba(255,255,255,.018)}
.tag{background:rgba(255,255,255,.035)}
.empty{padding:clamp(30px,5vw,48px);border-color:rgba(210,177,116,.20);background:radial-gradient(circle at 50% 0,rgba(210,177,116,.035),transparent 50%),rgba(17,18,24,.34)}

/* Modal hierarchy: stronger shell, quieter chrome, clearer close/action areas. */
.modal-backdrop{background:rgba(5,6,10,.74);backdrop-filter:blur(5px)}
.modal{border-color:rgba(210,177,116,.22);background:linear-gradient(155deg,rgba(25,24,31,.99),rgba(16,17,23,.995));box-shadow:0 30px 90px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.025)}
.modal-head{border-bottom-color:rgba(210,177,116,.15);background:linear-gradient(180deg,rgba(25,24,31,.985),rgba(20,20,27,.95));box-shadow:0 7px 20px rgba(0,0,0,.09)}
.modal-head h3{letter-spacing:-.01em}
.modal-foot{border-top-color:rgba(210,177,116,.14);box-shadow:0 -8px 24px rgba(0,0,0,.10)}
.modal-head>[data-close],.modal-head>button:last-child{border-color:rgba(210,177,116,.17)}
.warning-note{border-color:rgba(223,139,67,.28);background:rgba(223,139,67,.055)}

/* Buttons get one consistent tactile response; destructive/primary semantics remain intact. */
.btn{box-shadow:inset 0 1px rgba(255,255,255,.018)}
.btn:hover{box-shadow:0 7px 18px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.025)}
.btn.primary{box-shadow:0 8px 22px rgba(95,36,54,.18),inset 0 1px rgba(255,255,255,.045)}
.btn.danger:hover{background:rgba(196,98,98,.09)}

/* Footer becomes a quiet end-cap instead of another panel. */
footer{border-top-color:rgba(210,177,116,.13);background:linear-gradient(180deg,transparent,rgba(8,9,13,.18));padding-top:26px}
.beta4-version-badge{opacity:.76}
.beta4-version-badge:hover,.beta4-version-badge:focus-visible{opacity:1}

/* Desktop breathing room without turning the archive sparse. */
@media(min-width:761px){
  .hero{padding-top:58px;padding-bottom:30px}
  section{padding-top:18px;padding-bottom:64px}
  .topbar .header-action,.topbar .ux1391-role{min-height:40px}
  .ux1391-primary .header-action,.ux1391-more-toggle.header-action{height:40px!important;min-height:40px!important}
}

/* Touch: remove sticky hover motion and keep controls compact but comfortably tappable. */
@media(pointer:coarse){
  .btn:hover,.card:hover,.thread-card:hover,.relation:hover,.event:hover{transform:none!important}
  .btn:hover{box-shadow:inset 0 1px rgba(255,255,255,.018)}
}
@media(max-width:760px){
  body.mobile-layout .shell{width:min(100% - 20px,1180px)}
  body.mobile-layout .topbar{backdrop-filter:blur(16px)}
  body.mobile-layout .topbar-inner{min-height:62px!important}
  body.mobile-layout #mobileToolsBtn{min-height:42px!important;border-radius:11px!important}
  body.mobile-layout .hero{padding-top:18px!important;padding-bottom:20px!important}
  body.mobile-layout .hero-card{padding:19px!important}
  body.mobile-layout .hero-card h2{font-size:clamp(29px,9.3vw,35px)!important}
  body.mobile-layout .tabs{margin-bottom:20px!important;border-radius:14px!important;box-shadow:0 10px 25px rgba(0,0,0,.18)!important}
  body.mobile-layout .tabs .tab{min-height:50px!important;border-radius:9px!important}
  body.mobile-layout .section-head{padding-bottom:13px;margin-bottom:16px;gap:11px}
  body.mobile-layout .section-head h3{font-size:clamp(27px,8vw,34px)}
  body.mobile-layout .section-head p{font-size:12px;line-height:1.45}
  body.mobile-layout .field,body.mobile-layout .select{min-height:46px}
  body.mobile-layout .modal-backdrop{backdrop-filter:none!important}
  body.mobile-layout .modal{box-shadow:none!important}
  body.mobile-layout .modal-head{border-bottom-color:rgba(210,177,116,.16)!important}
  body.mobile-layout #mainToolbar.ux1391-ready{border:1px solid rgba(210,177,116,.20)!important;border-radius:18px!important;background:linear-gradient(160deg,rgba(23,22,29,.995),rgba(13,14,20,.995))!important;box-shadow:0 24px 70px rgba(0,0,0,.55)!important}
  body.mobile-layout .beta550-mobile-sections{background:rgba(255,255,255,.012)!important;border-color:rgba(210,177,116,.17)!important}
  body.mobile-layout .beta550-mobile-section-btn{border-color:rgba(210,177,116,.14)!important}
}
@media(max-width:420px){
  body.mobile-layout .hero-meta{gap:6px!important}
  body.mobile-layout .pill{font-size:10px}
  body.mobile-layout .section-head h3{font-size:28px}
}
@media(prefers-reduced-motion:reduce){.tab.beta5150-arrive::before{display:none!important}}