/* Seaport login + dashboards (preview). Loaded after seaport.css. */

/* ---------- login ---------- */
.auth { min-height: 100vh; }
.authgrid { display: grid; grid-template-columns: minmax(420px, 1fr) 1.1fr; min-height: 100vh; }
.authform { display: flex; flex-direction: column; padding: 28px 56px 36px; }
.authtop { display: flex; justify-content: space-between; align-items: center; }
.authtop .logo { color: var(--ink); }
html[data-theme="dark"] .authtop .logo { color: #EDEDF0; }
.authtop .themebox { border-color: var(--line); }
.authtop .themebox button { color: #71717A; }
.authtop .themebox button[aria-pressed="true"] { background: #EFEFF2; color: var(--ink); }
html[data-theme="dark"] .authtop .themebox button[aria-pressed="true"] { background: #2A2A2E; color: #EDEDF0; }
.authbox { width: 100%; max-width: 420px; margin: auto; padding: 40px 0; }
.authbox .seg { width: 100%; margin-bottom: 30px; }
.authbox h1 { font-size: 40px; }
.authbox .sub { margin: 8px 0 26px; font-size: 16px; }
#loginForm { display: grid; grid-template-columns: 1fr; gap: 16px; }
#loginForm label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
#loginForm input[type=email], #loginForm input[type=password], #loginForm input[type=text] { font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid #CFCFD6; border-radius: 10px; background: var(--white); color: var(--ink); width: 100%; }
#loginForm input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.pwrap { position: relative; display: block; }
.pwrap input { padding-right: 46px !important; }
.eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: none; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
.eye:hover { background: var(--grey); }
#loginForm .row { display: flex; justify-content: space-between; align-items: center; }
#loginForm .chk { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; }
#loginForm .chk input { accent-color: var(--accent); width: 16px; height: 16px; }
.small { font-size: 13.5px; color: var(--accent); text-decoration: none; font-weight: 500; }
.small:hover { text-decoration: underline; }
.btn.wide { width: 100%; justify-content: center; height: 48px; font-size: 15.5px; }
.btn.outline-dark { border: 1px solid #CFCFD6; color: var(--ink); background: var(--white); gap: 10px; }
.btn.outline-dark:hover { border-color: var(--ink); }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.err { margin: -4px 0 0; min-height: 18px; color: var(--accent); font-size: 13.5px; }
.authfoot { margin: 22px 0 0; text-align: center; font-size: 14.5px; color: var(--muted); }
.authfoot a { color: var(--ink); font-weight: 600; }
.preview { display: flex; gap: 8px; align-items: flex-start; margin-top: 26px; padding: 12px 14px; background: var(--grey); border-radius: 10px; }
.preview svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.authart { position: relative; display: flex; align-items: flex-end; padding: 56px; margin: 14px; border-radius: 22px; }
.authart::before { transition: opacity 300ms; }
.authart.swap::before { opacity: 0; }
.authart::after { background: linear-gradient(180deg, rgba(5,5,6,0.05) 30%, rgba(5,5,6,0.8) 100%) !important; border-radius: 22px; }
.authart::before { border-radius: 22px; }
.authquote { position: relative; max-width: 30ch; }
.authquote .q { display: block; font-family: var(--head); font-size: 34px; font-weight: 600; line-height: 1.12; color: #FFFFFF; }
.authquote .by { display: block; margin-top: 14px; font-size: 14px; color: #E4E4E7; }
html[data-theme="dark"] .auth { background: #0B0B0D; color: #EDEDF0; }
html[data-theme="dark"] #loginForm input { background: #18181B !important; border-color: #3A3A40 !important; color: #EDEDF0 !important; }
html[data-theme="dark"] .btn.outline-dark { background: #18181B; border-color: #3A3A40; color: #EDEDF0; }
html[data-theme="dark"] .preview { background: #18181B; }
html[data-theme="dark"] .authfoot a { color: #EDEDF0; }
@media (max-width: 900px) { .authgrid { grid-template-columns: 1fr; } .authart { display: none; } .authform { padding: 22px; } }

/* ---------- dashboards ---------- */
.dashbody { background: #F5F5F7; }
.dash { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.dside { position: sticky; top: 0; height: 100vh; background: #141417; color: #D4D4D8; padding: 22px 14px; display: flex; flex-direction: column; gap: 6px; }
.dside .logo { color: #FFFFFF; margin: 0 8px 4px; }
.dtag { align-self: flex-start; margin: 0 8px 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(212,168,50,0.5); border-radius: 6px; padding: 3px 8px; }
.dside nav { display: grid; gap: 2px; }
.dside nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; color: #D4D4D8; text-decoration: none; font-size: 14.5px; }
.dside nav a:hover { background: rgba(255,255,255,0.06); color: #FFFFFF; }
.dside nav a.on { background: var(--accent); color: #FFFFFF; font-weight: 600; }
.dside nav svg { width: 17px; height: 17px; }
.dlogout { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #A1A1AA; text-decoration: none; font-size: 14px; border-radius: 9px; }
.dlogout:hover { color: #FFFFFF; background: rgba(255,255,255,0.06); }
.dlogout svg { width: 17px; height: 17px; }
.dmain { min-width: 0; }
.dtop { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 14px 28px; background: rgba(245,245,247,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.dsearch { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; color: var(--muted); }
.dsearch input { flex: 1; border: none; background: none; font: inherit; font-size: 14px; padding: 10px 0; color: var(--ink); outline: none; }
.dsearch svg { width: 17px; height: 17px; }
.dtop .themebox { margin-left: auto; border-color: var(--line); }
.dtop .themebox button { color: #71717A; } .dtop .themebox button[aria-pressed="true"] { background: #E4E4E8; color: var(--ink); }
.dicon { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.dicon svg { width: 18px; height: 18px; }
.dicon .dot { position: absolute; right: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--white); }
.dme { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.dme .av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--accent); color: #FFFFFF; font-family: var(--head); font-weight: 700; }
.dme .av svg { width: 100%; height: 100%; display: block; }
.dme b { display: block; } .dme small { color: var(--muted); }
.dbanner { display: flex; align-items: center; gap: 8px; margin: 18px 28px 0; padding: 10px 14px; border-radius: 10px; background: #FDF3DC; color: #6B4A00; font-size: 13.5px; }
.dbanner svg { width: 16px; height: 16px; }
.dcontent { padding: 22px 28px 48px; display: grid; gap: 20px; }
.dhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.dhead h1 { font-size: 32px; }
.dhead .sub { margin: 6px 0 0; font-size: 15.5px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi2 { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; }
.kpi2 small { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.kpi2 small svg { width: 15px; height: 15px; }
.kpi2 b { display: block; font-family: var(--head); font-size: 28px; margin: 8px 0 4px; }
.kpi2 .delta { font-size: 12.5px; font-weight: 600; color: #11652F; }
.dgrid2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.dgrid2.wide1 { grid-template-columns: 1.3fr 1fr; }
.dcard { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; min-width: 0; }
.dch { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dch h2 { font-size: 18px; font-weight: 600; }
.dtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.dtable th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #8A8A93; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.dtable td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dtable tr:last-child td { border-bottom: none; }
.dtable .who { display: flex; align-items: center; gap: 10px; }
.dtable .who .av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.dtable .who .av svg { width: 100%; height: 100%; display: block; }
.dtable small { display: block; color: var(--muted); font-size: 12.5px; }
.pill2 { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.pill2.ok { background: #E7F6EC; color: #11652F; } .pill2.warn { background: #FDF3DC; color: #8A5B00; } .pill2.red { background: #F6E3E5; color: var(--accent); } .pill2.gr { background: #EEF0F3; color: #52525B; }
.prog { height: 6px; border-radius: 99px; background: #EEF0F3; overflow: hidden; min-width: 90px; }
.prog i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.bars { height: 220px; display: flex; align-items: flex-end; gap: 10px; padding-top: 10px; }
.bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bars .b i { width: 100%; max-width: 34px; border-radius: 6px 6px 0 0; background: linear-gradient(#D93A52, var(--accent)); height: 0; transition: height 700ms cubic-bezier(.2,1,.3,1); }
.bars.gold .b i { background: linear-gradient(#E8C45A, var(--gold)); }
.bars .b span { font-size: 11.5px; color: var(--muted); }
.myfw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.myfw .fw { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.myfw .fw .cv { position: relative; aspect-ratio: 4 / 3; }
.myfw .fw .cv b { font-size: 14px !important; } .myfw .fw .cv small { font-size: 9px; } .myfw .fw .cv.v2 .mock b { font-size: 11px !important; }
.myfw .fw .meta { padding: 10px 12px; font-size: 13px; display: flex; justify-content: space-between; }
.myfw .fw .meta span { color: var(--muted); }
.brow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.brow:last-child { border-bottom: none; }
.brow .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #FFFFFF; flex-shrink: 0; }
.brow .ic svg { width: 17px; height: 17px; }
.brow .t { flex: 1; min-width: 0; } .brow .t b { display: block; font-size: 14.5px; } .brow .t small { color: var(--muted); font-size: 12.5px; }
.brow .match { font-size: 12.5px; font-weight: 600; color: #11652F; white-space: nowrap; }
html[data-theme="dark"] .dashbody { background: #0B0B0D; color: #EDEDF0; }
html[data-theme="dark"] .dtop { background: rgba(11,11,13,0.92); border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .dsearch, html[data-theme="dark"] .dicon, html[data-theme="dark"] .kpi2, html[data-theme="dark"] .dcard, html[data-theme="dark"] .myfw .fw { background: #18181B; border-color: rgba(255,255,255,0.1); color: #EDEDF0; }
html[data-theme="dark"] .dsearch input { color: #EDEDF0; }
html[data-theme="dark"] .dtable th, html[data-theme="dark"] .dtable td, html[data-theme="dark"] .brow { border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .dbanner { background: #2A220F; color: #F3D98B; }
html[data-theme="dark"] .dtop .themebox button[aria-pressed="true"] { background: #2A2A2E; color: #EDEDF0; }
html[data-theme="dark"] .dicon .dot { border-color: #18181B; }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, 1fr); } .dgrid2, .dgrid2.wide1 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .dash { grid-template-columns: 1fr; } .dside { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; } .dside nav { display: none; } .dlogout { margin: 0 0 0 auto; } .dme span { display: none; } .dsearch { display: none; } .myfw { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .bars .b i, .authart::before { transition: none; } }

/* ---------- dashboard views (every sidebar item is its own page) ---------- */
.dcontent:focus { outline: none; }
.dhead { flex-wrap: wrap; }
.dhead .acts { display: flex; gap: 10px; }
.muted { color: var(--muted); }
.r { text-align: right !important; }
.kpis.three { grid-template-columns: repeat(3, 1fr); }
a.kpi2 { color: inherit; text-decoration: none; transition: border-color 200ms, transform 200ms; }
a.kpi2:hover { border-color: #C4C4CC; transform: translateY(-2px); }
.dgrid2.even { grid-template-columns: 1fr 1fr; }
.btn.sm { height: 34px; padding: 0 12px; font-size: 13.5px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.linkbtn { border: none; background: none; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; }
.empty { padding: 36px 10px; text-align: center; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.chips button:hover { border-color: #A1A1AA; }
.chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chips .n { margin-left: 6px; opacity: 0.6; font-size: 12px; }
.pill2.blue { background: #E3ECFA; color: #1F4E9C; }
.rowlink { cursor: pointer; }
.rowlink:hover td { background: rgba(0,0,0,0.025); }
.rowlink:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dtable .r { white-space: nowrap; }
.dtable tfoot td { padding: 9px 10px; border-top: 1px solid var(--line); color: var(--muted); }
.dtable tfoot .tot td { color: var(--ink); font-weight: 700; font-size: 15.5px; border-top: 2px solid var(--ink); }
.av.none, .av.ini { display: grid !important; place-items: center; background: #EEF0F3; color: #52525B; }
.av.none svg { width: 15px !important; height: 15px !important; }
.av.ini { font-family: var(--head); font-weight: 700; font-size: 11.5px; }
.brow { width: 100%; border: none; border-bottom: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.brow:hover .t b { text-decoration: underline; }
.myfw .fw { padding: 0; background: var(--white); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform 200ms; }
.myfw .fw:hover { transform: translateY(-3px); }
.myfw .fw .meta { display: flex; }

/* creatives directory */
.crgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.crcard { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.crpic { border: none; padding: 0; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; background: #EEF0F3; }
.crpic svg { width: 100%; height: 100%; display: block; transition: transform 400ms; }
.crpic:hover svg { transform: scale(1.05); }
.crcard .save { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,0.92); color: #52525B; cursor: pointer; display: grid; place-items: center; }
.crcard .save svg { width: 17px; height: 17px; }
.crcard .save[aria-pressed="true"] { color: var(--accent); }
.crcard .save[aria-pressed="true"] svg { fill: var(--accent); }
.crb { padding: 14px 16px 16px; display: grid; gap: 4px; flex: 1; }
.crb b { font-family: var(--head); font-size: 16.5px; }
.crb small { color: var(--muted); font-size: 13px; }
.crs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: #52525B; margin-top: 4px; }
.crs span { display: inline-flex; align-items: center; gap: 4px; }
.crs svg { width: 13px; height: 13px; color: var(--gold); fill: var(--gold); }
.crbtns { display: flex; gap: 8px; margin-top: 12px; align-self: end; }
.crbtns .btn { flex: 1; justify-content: center; }

/* brand hub + settings */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
.swatch { border: 1px solid var(--line); border-radius: 12px; background: var(--white); padding: 0 0 10px; overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.swatch i { display: block; height: 70px; margin-bottom: 8px; }
.swatch b, .swatch small { display: block; padding: 0 10px; font-size: 13px; }
.swatch small { color: var(--muted); font-family: ui-monospace, monospace; font-size: 12px; }
.swatch:hover { border-color: var(--ink); }
.typeset { display: grid; gap: 14px; }
.typeset small { color: var(--muted); font-size: 12px; }
.typeset .t1 { margin: 2px 0 0; font-family: var(--head); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.typeset .t2 { margin: 2px 0 0; font-size: 15px; line-height: 1.55; }
.voice { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.voice span { background: var(--grey); border-radius: 6px; padding: 5px 10px; font-size: 13px; }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #D4D4D8; transition: background 200ms; pointer-events: none; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: transform 200ms; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.switch input:checked + span { background: #1C8C4A; }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.checks { border: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.checks legend { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.checks label, .chkrow { display: flex !important; align-items: center; gap: 9px; font-weight: 400 !important; }
.checks input, .chkrow input { accent-color: var(--accent); width: 16px; height: 16px; }
.chkrow { align-self: end; padding-bottom: 10px; }
.invite { display: flex; gap: 8px; margin-top: 14px; }
.invite input, .invite select { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #CFCFD6; border-radius: 9px; background: var(--white); color: var(--ink); }
.invite input { flex: 1; min-width: 0; }
.invite .btn { height: 38px; }
.reset { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.reset p { margin: 2px 0 10px; font-size: 13.5px; color: var(--muted); }

/* modal */
body.mopen { overflow: hidden; }
.mback { position: fixed; inset: 0; z-index: 60; background: rgba(5,5,6,0.55); display: grid; place-items: center; padding: 24px; animation: mbIn 160ms ease-out; }
@keyframes mbIn { from { opacity: 0; } }
.modal { position: relative; width: min(600px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--white); color: var(--ink); border-radius: 18px; padding: 28px 30px 26px; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6); animation: mIn 240ms cubic-bezier(.2,1,.3,1); }
.modal.wide { width: min(780px, 100%); }
@keyframes mIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.mx { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border: none; border-radius: 10px; background: var(--grey); color: var(--ink); cursor: pointer; display: grid; place-items: center; z-index: 2; }
.mx svg { width: 18px; height: 18px; }
.modal h2 { font-size: 26px; margin: 8px 0 4px; padding-right: 44px; }
.modal .sub { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.modal p { line-height: 1.55; }
.mmeta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; padding: 16px 0; margin: 4px 0 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mmeta small { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.mmeta b { font-size: 14.5px; font-weight: 600; }
.msec { margin-top: 18px; }
.msec h3 { font-size: 15px; margin: 0 0 10px; }
.mact { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.mform { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.mform.one { grid-template-columns: 1fr; }
.mform .full { grid-column: 1 / -1; }
.mform label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 500; }
.mform input:not([type=checkbox]), .mform select, .mform textarea { font: inherit; font-size: 14.5px; padding: 10px 12px; border: 1px solid #CFCFD6; border-radius: 10px; background: var(--white); color: var(--ink); width: 100%; }
.mform textarea { resize: vertical; }
.mform input:focus, .mform select:focus, .mform textarea:focus, .invite input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.mform .mact { margin-top: 6px; }
.mform .err { margin: 0; min-height: 0; }
.prow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: none; }
.prow .av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.prow .av svg { width: 100%; height: 100%; display: block; }
.prow > span:nth-child(2) { flex: 1; }
.prow b { display: block; }
.prow small { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.prow small svg { width: 12px; height: 12px; color: var(--gold); fill: var(--gold); }
.prog.big { height: 8px; margin-bottom: 12px; }
.miles, .tasks, .incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.miles li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.miles li.done { color: var(--ink); }
.miles li svg { width: 17px; height: 17px; }
.miles li.done svg { color: #1C8C4A; }
.tasks label { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; }
.tasks input { width: 17px; height: 17px; accent-color: #8E5C31; }
.incl li { display: flex; gap: 8px; align-items: center; font-size: 14.5px; }
.incl svg { width: 16px; height: 16px; color: #1C8C4A; }
.note-in { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: #FDF3DC; color: #6B4A00; font-size: 14px; }
.note-in.ok { background: #E7F6EC; color: #11652F; }
.note-in svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.note-in a { color: inherit; font-weight: 700; }
.phead { display: flex; align-items: center; gap: 16px; }
.phead .av { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.phead .av svg { width: 100%; height: 100%; display: block; }
.phead h2 { margin-top: 0; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.thumbs small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.thumbs .cv, .poster .cv, .fwhead .cv { aspect-ratio: 4 / 3; border-radius: 8px; }
.thumbs .cv b, .poster .cv b, .fwhead .cv b { font-size: 15px !important; }
.thumbs .cv small, .poster .cv small, .fwhead .cv small { font-size: 9px; color: inherit; margin: 0; }
.thumbs .cv.v2 .mock b, .poster .cv.v2 .mock b, .fwhead .cv.v2 .mock b { font-size: 10px !important; }
.invhead { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 8px; }
.invhead .from { text-align: right; padding-top: 40px; }
.invhead .from small { display: block; color: var(--muted); }
.dtable.lines td { padding: 10px 4px; }

/* notifications */
.dtop .npanel { position: absolute; right: 150px; top: 62px; width: 360px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px -20px rgba(0,0,0,0.35); padding: 8px; z-index: 20; animation: mIn 180ms ease-out; }
.npanel .nh { display: flex; justify-content: space-between; padding: 8px 10px 10px; font-size: 13px; }
.npanel a { display: flex; gap: 12px; padding: 10px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 14px; line-height: 1.35; }
.npanel a:hover { background: var(--grey); }
.npanel a.unread { background: #FBF4F5; }
.npanel a svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); margin-top: 1px; }
.npanel small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* dark theme for the new pieces */
html[data-theme="dark"] .modal, html[data-theme="dark"] .npanel, html[data-theme="dark"] .crcard, html[data-theme="dark"] .swatch, html[data-theme="dark"] .myfw .fw { background: #18181B; color: #EDEDF0; border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .mx, html[data-theme="dark"] .voice span { background: #2A2A2E; color: #EDEDF0; }
html[data-theme="dark"] .mform input:not([type=checkbox]), html[data-theme="dark"] .mform select, html[data-theme="dark"] .mform textarea, html[data-theme="dark"] .invite input, html[data-theme="dark"] .invite select { background: #0F0F11; border-color: #3A3A40; color: #EDEDF0; }
html[data-theme="dark"] .chips button { background: #18181B; border-color: rgba(255,255,255,0.14); color: #EDEDF0; }
html[data-theme="dark"] .chips button[aria-pressed="true"] { background: #EDEDF0; color: #0B0B0D; }
html[data-theme="dark"] .mmeta, html[data-theme="dark"] .prow, html[data-theme="dark"] .reset, html[data-theme="dark"] .dtable tfoot td { border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .dtable tfoot .tot td { color: #EDEDF0; border-color: #EDEDF0; }
html[data-theme="dark"] .miles li.done { color: #EDEDF0; }
html[data-theme="dark"] .rowlink:hover td { background: rgba(255,255,255,0.03); }
html[data-theme="dark"] .av.none, html[data-theme="dark"] .av.ini, html[data-theme="dark"] .crpic { background: #2A2A2E; color: #D4D4D8; }
html[data-theme="dark"] .npanel a:hover { background: #232327; }
html[data-theme="dark"] .npanel a.unread { background: #24171A; }
html[data-theme="dark"] .crs { color: #A1A1AA; }
html[data-theme="dark"] .note-in { background: #2A220F; color: #F3D98B; }
html[data-theme="dark"] .note-in.ok { background: #102419; color: #8FD9A8; }
html[data-theme="dark"] .pill2.blue { background: #16243A; color: #93B6EE; }

/* ================= creative dashboard: quest-board look ================= */
body.dashbody[data-role="creative"] { --parch: #FBF2DE; --parchline: #DDC79E; --wink: #3A2A1A; background: #EFE3C8; background-image: radial-gradient(circle at 20% 0%, rgba(255,250,235,0.7), transparent 50%), radial-gradient(circle at 100% 100%, rgba(190,150,90,0.25), transparent 45%); background-attachment: fixed; }
[data-role="creative"] .dside { background: linear-gradient(90deg, transparent 88%, rgba(0,0,0,0.25)), repeating-linear-gradient(0deg, #4A2E19 0 70px, #37210F 70px 72px); color: #F1E3C8; }
[data-role="creative"] .dside nav a { color: #EBD9B8; }
[data-role="creative"] .dside nav a:hover { background: rgba(255,240,210,0.08); color: #FFF7E6; }
[data-role="creative"] .dside nav a.on { background: #F4E6C6; color: var(--wink); box-shadow: 0 3px 0 #B98E52, 0 8px 14px -6px rgba(0,0,0,0.5); transform: rotate(-0.6deg); }
[data-role="creative"] .dtag { color: #F2C76B; border-color: rgba(242,199,107,0.5); }
[data-role="creative"] .dlogout { color: #CDB791; }
[data-role="creative"] .dtop { background: rgba(239,227,200,0.9); border-color: var(--parchline); }
[data-role="creative"] .dsearch, [data-role="creative"] .dicon, [data-role="creative"] .dcard, [data-role="creative"] .kpi2, [data-role="creative"] .myfw .fw { background: var(--parch); border-color: var(--parchline); color: var(--wink); }
[data-role="creative"] .dsearch input { color: var(--wink); }
[data-role="creative"] .dcard { box-shadow: 0 14px 26px -20px rgba(70,40,10,0.6); }
[data-role="creative"] .dtable th, [data-role="creative"] .dtable td, [data-role="creative"] .brow, [data-role="creative"] .dtable tfoot td { border-color: var(--parchline); }
[data-role="creative"] .dtable th { color: #8A6A48; }
[data-role="creative"] .dhead h1 { font-family: var(--cond); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: 42px; color: var(--wink); }
[data-role="creative"] .dhead .sub, [data-role="creative"] .muted, [data-role="creative"] .dtable small, [data-role="creative"] .fine { color: #7A6246; }
[data-role="creative"] .dch h2 { font-family: var(--cond); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 21px; }
[data-role="creative"] .small { color: #8E3A16; }
[data-role="creative"] .kpi2 { position: relative; border-radius: 4px; transform: rotate(-0.8deg); box-shadow: 0 12px 18px -12px rgba(70,40,10,0.7); padding-top: 24px; }
[data-role="creative"] .kpis > :nth-child(even) { transform: rotate(0.9deg); }
[data-role="creative"] a.kpi2:hover { transform: rotate(0deg) translateY(-3px); border-color: #B98E52; }
[data-role="creative"] .kpi2::before, .note .pin, .poster .pin, .modal.parch .pin, .wanted .pin { content: ""; position: absolute; left: 50%; top: 8px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F2707E, #8E0017); box-shadow: 0 2px 2px rgba(0,0,0,0.4); }
[data-role="creative"] .kpi2 small { color: #7A6246; }
[data-role="creative"] .kpi2 .delta { color: #2F6B2F; }
[data-role="creative"] .chips button { background: #F4E6C6; border: 1px solid #C9A96E; color: var(--wink); border-radius: 4px; font-family: var(--cond); font-weight: 800; font-size: 14.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 5px 12px; box-shadow: 0 2px 0 #C9A96E; }
[data-role="creative"] .chips button[aria-pressed="true"] { background: #6E4A2D; border-color: #4A2E19; color: #FFF4E2; box-shadow: 0 2px 0 #3E2716; }
[data-role="creative"] .btn.outline-dark { background: #F4E6C6; border-color: #C9A96E; color: var(--wink); }
[data-role="creative"] .btn.primary { background: #8E3A16; }
[data-role="creative"] .btn.primary:hover { background: #742D10; }
[data-role="creative"] .pill2.ok { background: #E1EED3; color: #2F6B2F; }
[data-role="creative"] .pill2.warn { background: #F6E3B5; color: #7A5200; }
[data-role="creative"] .prog { background: #E6D5B0; }
[data-role="creative"] .prog i { background: #8E5C31; }
[data-role="creative"] .brow .match { color: #2F6B2F; }

/* the boards */
.qwrap { position: relative; isolation: isolate; margin-top: 50px; }
.qboard { position: relative; border-radius: 10px; padding: 16px; background: #5A3A22; box-shadow: inset 0 0 0 3px #3E2716, inset 0 0 0 6px #6E4A2D, 0 30px 50px -24px rgba(40,22,10,0.7); }
.qplanks { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 26px 20px; padding: 34px 24px 30px; min-height: 240px; border-radius: 6px; background: repeating-linear-gradient(0deg, #A8703F 0 62px, #8E5C31 62px 64px), #A8703F; box-shadow: inset 0 2px 10px rgba(0,0,0,0.35); }
.qplanks::before { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; opacity: 0.35; background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(60,32,12,0.25) 22px 23px, transparent 23px 57px), radial-gradient(ellipse at 30% 20%, rgba(255,230,190,0.35), transparent 60%); }
.qsign { position: absolute; left: 50%; top: -38px; transform: translateX(-50%); z-index: 3; }
.qsign span { display: block; padding: 11px 38px 9px; border-radius: 6px; background: linear-gradient(#B97D48, #94602F); color: #FFF4E2; font-family: var(--cond); font-weight: 800; font-size: 28px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 2px 0 rgba(60,30,10,0.6); box-shadow: inset 0 0 0 2px #6E4A2D, 0 10px 18px -8px rgba(40,22,10,0.8); }
.qempty { grid-column: 1 / -1; margin: auto; padding: 18px 26px; background: #F7ECD4; color: #6B5438; transform: rotate(-1deg); font-size: 14px; }
/* quest board: carved crest on the sign and two posts in the ground */
.ornate .qsign span { border-radius: 60px 60px 8px 8px / 34px 34px 8px 8px; padding: 16px 46px 10px; }
.ornate .qsign::before { content: ""; position: absolute; left: 50%; top: -12px; width: 44px; height: 20px; margin-left: -22px; border-radius: 22px 22px 0 0; background: #94602F; box-shadow: inset 0 0 0 2px #6E4A2D; z-index: -1; }
.ornate { padding-bottom: 44px; }
.ornate::before, .ornate::after { content: ""; position: absolute; top: 30px; bottom: 0; width: 26px; z-index: -1; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, #3E2716, #6E4A2D 45%, #4A2E19); }
.ornate::before { left: 7%; }
.ornate::after { right: 7%; }
/* request board: hung on two chains */
.hanging { padding-top: 64px; margin-top: 0; }
.hanging::before, .hanging::after { content: ""; position: absolute; top: 0; height: 78px; width: 8px; z-index: -1; background: repeating-linear-gradient(180deg, #8A8A90 0 9px, #55555A 9px 11px, transparent 11px 13px); border-radius: 4px; }
.hanging::before { left: 16%; transform: rotate(8deg); }
.hanging::after { right: 16%; transform: rotate(-8deg); }
.hanging .qsign { top: auto; bottom: -30px; }
.hanging .qsign span { font-size: 22px; padding: 8px 28px 6px; }
.qcols { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 18px; padding-bottom: 44px; }
.qcol { display: grid; gap: 22px; align-content: start; }
.qcol h3 { margin: 0 0 2px; justify-self: start; padding: 5px 14px 4px; background: #6E4A2D; color: #FFF4E2; border-radius: 3px; font-family: var(--cond); font-weight: 800; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: inset 0 0 0 1px #4A2E19, 0 4px 8px -4px rgba(0,0,0,0.6); }
.qcol h3 span { opacity: 0.7; margin-left: 4px; }
.qcol .qempty { font-size: 13px; padding: 12px; }
/* framework board: a signpost arrow on a post */
.post .qsign { left: 36px; transform: none; }
.qsign.arrow span { border-radius: 4px 0 0 4px; clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); padding-right: 64px; }
.post::before { content: ""; position: absolute; left: 60px; top: -56px; height: 60px; width: 20px; z-index: -1; background: linear-gradient(90deg, #3E2716, #6E4A2D 45%, #4A2E19); border-radius: 4px 4px 0 0; }

/* pinned notices */
.note, .poster { position: relative; display: block; width: 100%; border: none; font: inherit; text-align: left; cursor: pointer; background: #F7ECD4; color: #3A2A1A; transform: rotate(var(--r)); box-shadow: 0 8px 14px -6px rgba(40,22,10,0.6); transition: transform 220ms cubic-bezier(.2,1.2,.4,1), box-shadow 220ms; }
.note { padding: 24px 14px 18px; font-size: 12.5px; line-height: 1.4; clip-path: polygon(0 3%, 12% 0, 30% 2%, 52% 0, 74% 2%, 100% 0, 99% 30%, 100% 62%, 98% 100%, 76% 98%, 50% 100%, 27% 98%, 0 100%, 2% 64%, 0 32%); }
.note:hover, .note:focus-visible, .poster:hover, .poster:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.04); z-index: 5; box-shadow: 0 20px 28px -12px rgba(40,22,10,0.75); }
.note:focus-visible, .poster:focus-visible { outline: 3px solid #F2C76B; outline-offset: 3px; }
.note .dsc, .kicker { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8A6A48; margin-bottom: 5px; }
.note b { display: block; font-family: var(--head); font-size: 15px; line-height: 1.2; margin-bottom: 6px; }
.note .who { display: block; color: #6B5438; }
.note .terms, .poster .terms { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px dashed #C9B48E; color: #6B5438; }
.note .mt { display: inline-block; margin-top: 6px; font-weight: 700; color: #2F6B2F; }
.stamp { position: absolute; right: 8px; bottom: 10px; transform: rotate(-12deg); border: 2px solid currentColor; border-radius: 4px; padding: 1px 6px; font-family: var(--cond); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; background: rgba(247,236,212,0.7); }
.stamp.open, .stamp.live { color: #1C7A3C; }
.stamp.applied, .stamp.rev, .stamp.review { color: #B07A0A; }
.stamp.done { color: #B0001C; }
.stamp.paused { color: #6B6B70; }
.posters { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.poster { padding: 26px 14px 16px; border-radius: 2px; }
.poster > b { display: block; margin-top: 10px; font-family: var(--head); font-size: 15px; line-height: 1.2; padding-right: 60px; }
.poster .stamp { bottom: 14px; }

/* parchment modals */
.modal.parch { background: #FBF2DE; color: #3A2A1A; border-radius: 4px; border: 1px solid #DDC79E; background-image: radial-gradient(ellipse at 0% 0%, rgba(210,170,110,0.25), transparent 40%), radial-gradient(ellipse at 100% 100%, rgba(210,170,110,0.3), transparent 45%); padding-top: 34px; }
.modal.parch h2 { font-family: var(--cond); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: 32px; line-height: 1.05; }
.modal.parch .sub, .modal.parch .mmeta small { color: #7A6246; }
.modal.parch .mmeta, .modal.parch .dtable td, .modal.parch .dtable tfoot td { border-color: #DDC79E; }
.modal.parch .mx { background: #F0E1BF; color: #3A2A1A; }
.modal.parch .btn.primary { background: #8E3A16; }
.modal.parch .btn.outline-dark { background: #F4E6C6; border-color: #C9A96E; color: #3A2A1A; }
.modal.parch .mform input:not([type=checkbox]), .modal.parch .mform select { background: #FFFAF0; border-color: #D2BB8E; color: #3A2A1A; }
.modal.parch .prog { background: #E6D5B0; }
.modal.parch .prog i { background: #8E5C31; }
.fwhead { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: center; margin-bottom: 10px; }

/* profile: a "for hire" poster */
.profgrid { display: grid; grid-template-columns: 360px 1fr; gap: 26px; align-items: start; }
.wanted { position: relative; background: #F7ECD4; color: #3A2A1A; padding: 34px 28px 26px; text-align: center; transform: rotate(-1.2deg); box-shadow: 0 24px 34px -18px rgba(40,22,10,0.7); clip-path: polygon(0 1%, 20% 0, 50% 1%, 80% 0, 100% 1%, 99% 50%, 100% 99%, 70% 100%, 40% 99%, 0 100%, 1% 50%); }
.wanted h3 { margin: 0; padding: 0 30px; font-family: var(--cond); font-weight: 800; font-size: 30px; letter-spacing: 0.1em; text-transform: uppercase; color: #5A3A22; }
.wpic { width: 150px; height: 150px; margin: 14px auto; border-radius: 50%; overflow: hidden; border: 5px solid #5A3A22; box-shadow: inset 0 0 0 3px #F7ECD4; }
.wpic svg { width: 100%; height: 100%; display: block; }
.wname { display: block; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 28px; line-height: 1.1; }
.wdisc { display: block; margin-top: 4px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #8A6A48; }
.wanted p { font-size: 14px; line-height: 1.5; margin: 14px 0; }
.wskills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.wskills span { border: 1px dashed #B99B6B; border-radius: 4px; padding: 3px 8px; font-size: 12.5px; }
.wfoot { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 12px; border-top: 2px solid #5A3A22; font-size: 13.5px; }
.wanted .stamp { right: 18px; bottom: auto; top: 22px; font-size: 16px; }

/* creative dark theme: night-time wood */
html[data-theme="dark"] body.dashbody[data-role="creative"] { background: #17110B; background-image: radial-gradient(circle at 20% 0%, rgba(120,80,30,0.25), transparent 50%); color: #F1E6D0; }
html[data-theme="dark"] [data-role="creative"] .dtop { background: rgba(23,17,11,0.9); border-color: #3A2A1A; }
html[data-theme="dark"] [data-role="creative"] .dsearch, html[data-theme="dark"] [data-role="creative"] .dicon, html[data-theme="dark"] [data-role="creative"] .dcard, html[data-theme="dark"] [data-role="creative"] .kpi2, html[data-theme="dark"] [data-role="creative"] .myfw .fw { background: #251B11; border-color: #3E2E1C; color: #F1E6D0; }
html[data-theme="dark"] [data-role="creative"] .dsearch input { color: #F1E6D0; }
html[data-theme="dark"] [data-role="creative"] .dhead h1 { color: #F4E6C6; }
html[data-theme="dark"] [data-role="creative"] .dhead .sub, html[data-theme="dark"] [data-role="creative"] .muted, html[data-theme="dark"] [data-role="creative"] .dtable small, html[data-theme="dark"] [data-role="creative"] .fine, html[data-theme="dark"] [data-role="creative"] .kpi2 small { color: #BFA780; }
html[data-theme="dark"] [data-role="creative"] .dtable th, html[data-theme="dark"] [data-role="creative"] .dtable td, html[data-theme="dark"] [data-role="creative"] .brow, html[data-theme="dark"] [data-role="creative"] .dtable tfoot td { border-color: #3E2E1C; }
html[data-theme="dark"] [data-role="creative"] .dtable tfoot .tot td { color: #F1E6D0; border-color: #BFA780; }
html[data-theme="dark"] [data-role="creative"] .kpi2 .delta, html[data-theme="dark"] [data-role="creative"] .brow .match { color: #9BD08B; }
html[data-theme="dark"] [data-role="creative"] .small { color: #F2A36B; }
html[data-theme="dark"] [data-role="creative"] .btn.outline-dark { background: #2E2216; border-color: #5A4128; color: #F1E6D0; }
html[data-theme="dark"] .modal.parch { background: #2A1F14; color: #F1E6D0; border-color: #4A3620; background-image: none; }
html[data-theme="dark"] .modal.parch .sub, html[data-theme="dark"] .modal.parch .mmeta small, html[data-theme="dark"] .modal.parch .kicker { color: #BFA780; }
html[data-theme="dark"] .modal.parch .mmeta, html[data-theme="dark"] .modal.parch .dtable td { border-color: #4A3620; }
html[data-theme="dark"] .modal.parch .mx, html[data-theme="dark"] .modal.parch .btn.outline-dark { background: #3A2A1A; border-color: #5A4128; color: #F1E6D0; }
html[data-theme="dark"] .modal.parch .mform input:not([type=checkbox]), html[data-theme="dark"] .modal.parch .mform select { background: #1C140C; border-color: #5A4128; color: #F1E6D0; }
html[data-theme="dark"] .qboard { filter: brightness(0.85); }

@media (max-width: 1100px) { .qcols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .profgrid { grid-template-columns: 1fr; } .wanted { max-width: 380px; } .kpis.three { grid-template-columns: 1fr 1fr; } .dgrid2.even { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .mform, .mmeta { grid-template-columns: 1fr 1fr; } .thumbs { grid-template-columns: 1fr 1fr; } .dtop .npanel { right: 10px; width: calc(100vw - 20px); } .qcols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .note, .poster, .modal, .mback, .crpic svg, a.kpi2 { transition: none; animation: none; } }
@media print { body.printing .dash, body.printing .toast { display: none !important; } body.printing .mback { position: static; background: none; padding: 0; display: block; } body.printing .modal { box-shadow: none; max-height: none; width: 100%; border: none; } body.printing .mx, body.printing .mact { display: none; } }

/* ================= creative side: one big wooden notice board ================= */
body.nbbody { min-height: 100vh; background: #CDB892; background-image: radial-gradient(ellipse at 50% 0%, rgba(255,245,220,0.55), transparent 60%), repeating-linear-gradient(90deg, rgba(90,60,30,0.05) 0 2px, transparent 2px 120px); color: #3A2412; }
html[data-theme="dark"] body.nbbody { background: #140D08; background-image: radial-gradient(ellipse at 50% 0%, rgba(160,100,40,0.22), transparent 60%); color: #F4E6C6; }
html[data-theme] .dtop.nbtop { background: linear-gradient(#5E3D23, #472C18); border-bottom: 3px solid #2E1C0E; color: #F4E6C6; padding: 12px 28px; box-shadow: 0 8px 18px -10px rgba(0,0,0,0.6); }
.nbtop .logo { color: #FFF4E2; }
.nbcrumb { display: flex; align-items: baseline; gap: 8px; font-family: 'IM Fell English', Georgia, serif; font-size: 18px; color: #F4E6C6; }
.nbcrumb a { color: inherit; text-decoration: none; }
.nbcrumb a:hover { text-decoration: underline; }
#crumb:not(:empty)::before { content: "/"; margin-right: 8px; opacity: 0.55; }
html[data-theme] .nbtop .dsearch { flex: 0 1 320px; margin-left: auto; background: rgba(0,0,0,0.22); border-color: rgba(255,240,210,0.22); color: #D9C4A0; }
html[data-theme] .nbtop .dsearch input { color: #F4E6C6; }
.nbtop .dsearch input::placeholder { color: #BFA780; }
.nbtop .themebox { margin-left: 0 !important; border-color: rgba(255,240,210,0.25) !important; }
html[data-theme] .nbtop .themebox button { color: #D9C4A0; }
html[data-theme] .nbtop .themebox button[aria-pressed="true"] { background: #F4E6C6; color: #3A2412; }
html[data-theme] .nbtop .dicon { background: rgba(0,0,0,0.22); border-color: rgba(255,240,210,0.22); color: #F4E6C6; }
.nbtop .dicon .dot { border-color: #472C18; }
.nbtop .dme b { color: #FFF4E2; }
.nbtop .dme small { color: #D9C4A0; }
.nblogout { display: inline-flex; align-items: center; gap: 6px; color: #D9C4A0; text-decoration: none; font-size: 14px; padding: 8px 10px; border-radius: 8px; }
.nblogout:hover { background: rgba(255,240,210,0.1); color: #FFF4E2; }
.nblogout svg { width: 16px; height: 16px; }
.nbpreview { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; color: #6B4A2A; }
.nbpreview svg { width: 15px; height: 15px; }
html[data-theme="dark"] .nbpreview { color: #BFA780; }
.nbmain { max-width: 1480px; margin: 0 auto; padding: 14px 32px 70px; }
.nbmain:focus { outline: none; }
.nbhello { text-align: center; margin: 6px 0 4px; }
.nbhello h1 { font-family: 'Pirata One', 'IM Fell English', serif; font-weight: 400; font-size: 46px; letter-spacing: 0.01em; color: #3A2412; }
.nbhello p { margin: 2px 0 0; font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 17px; color: #6B4A2A; }
html[data-theme="dark"] .nbhello h1 { color: #F4E6C6; }
html[data-theme="dark"] .nbhello p { color: #BFA780; }
.nbback { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 8px 16px 7px; background: linear-gradient(#8E5C31, #6E4526); color: #FFF4E2; border: 2px solid #3E2716; border-radius: 4px; font-family: 'IM Fell English', Georgia, serif; font-size: 16px; text-decoration: none; box-shadow: 0 6px 12px -6px rgba(0,0,0,0.6); transform: rotate(-0.8deg); }
.nbback:hover { transform: rotate(0deg) translateY(-2px); }
.nbback svg { width: 16px; height: 16px; }

/* the board */
.nboard { position: relative; margin-top: 56px; padding: 56px 34px 40px; border: 20px solid #4A2E19; border-radius: 6px;
  background: repeating-linear-gradient(0deg, #6A4527 0 92px, #4E3118 92px 95px), #6A4527;
  box-shadow: inset 0 0 0 3px #2A190C, inset 0 0 60px rgba(0,0,0,0.55), 0 0 0 3px #2A190C, 0 34px 60px -24px rgba(0,0,0,0.75); }
.nboard::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.4; background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(40,20,5,0.3) 30px 31px, transparent 31px 77px), radial-gradient(ellipse at 20% 10%, rgba(255,220,170,0.25), transparent 55%); }
.nboard::after { content: ""; position: absolute; inset: -14px; pointer-events: none; background: radial-gradient(circle at 6px 6px, #8A8A90 0 3px, #2A2A2E 4px, transparent 5px), radial-gradient(circle at calc(100% - 6px) 6px, #8A8A90 0 3px, #2A2A2E 4px, transparent 5px), radial-gradient(circle at 6px calc(100% - 6px), #8A8A90 0 3px, #2A2A2E 4px, transparent 5px), radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #8A8A90 0 3px, #2A2A2E 4px, transparent 5px); }
html[data-theme="dark"] .nboard { filter: brightness(0.92); }
.nbsign { position: absolute; left: 50%; top: -52px; transform: translateX(-50%); z-index: 4; }
.nbsign span { position: relative; display: block; padding: 8px 46px 6px; background: linear-gradient(#946036, #6E4526); color: #F7E8C8; border: 3px solid #3E2716; border-radius: 4px; font-family: 'Pirata One', 'IM Fell English', serif; font-size: 32px; letter-spacing: 0.06em; white-space: nowrap; text-shadow: 0 2px 0 rgba(30,15,5,0.7); box-shadow: 0 12px 20px -10px rgba(0,0,0,0.8); }
.nbsign span::before, .nbsign span::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #B0B0B6, #2A2A2E 70%); }
.nbsign span::before { left: 14px; }
.nbsign span::after { right: 14px; }
.nbsign.big span { font-size: 44px; padding: 8px 64px 4px; }
.nbintro { position: relative; z-index: 1; max-width: 660px; margin: 0 auto 30px; padding: 10px 22px; text-align: center; background: #F4E6C6; color: #3A2412; transform: rotate(-0.6deg); box-shadow: 0 8px 14px -8px rgba(0,0,0,0.7); font-family: 'IM Fell English', Georgia, serif; font-size: 17px; line-height: 1.35; }
.nbtools { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; margin: -8px 0 30px; }
.nbtools .linkbtn { color: #FFE6B0; font-size: 14px; text-decoration: underline; }
.nbgrid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 36px 30px; align-items: start; padding: 6px 6px 10px; }
.nbnone { grid-column: 1 / -1; justify-self: center; margin: 20px 0; padding: 14px 26px; background: #F4E6C6; color: #3A2412; transform: rotate(1deg); font-family: 'IM Fell English', Georgia, serif; font-size: 17px; box-shadow: 0 8px 14px -8px rgba(0,0,0,0.7); }

/* front page: posters arranged like a real notice board */
.nbfront { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 52px; gap: 18px 24px; }
.g-reward { grid-column: 1; grid-row: 1 / span 7; }
.g-fortune { grid-column: 1; grid-row: 8 / span 4; }
.g-arms { grid-column: 2; grid-row: 1 / span 5; }
.g-help { grid-column: 2; grid-row: 6 / span 6; }
.g-decree { grid-column: 3; grid-row: 1 / span 5; }
.g-bounty { grid-column: 3; grid-row: 6 / span 6; }
.g-wanted { grid-column: 4; grid-row: 1 / span 6; }
.g-warn { grid-column: 4; grid-row: 7 / span 5; }
.g-trade { grid-column: 5; grid-row: 1 / span 5; }
.g-attn { grid-column: 5; grid-row: 6 / span 6; }

/* a notice: paper drawn on ::before so torn edges can still cast a shadow */
.pst { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 240px; padding: 30px 18px 22px; border: none; background: none; text-align: center; text-decoration: none; cursor: pointer; overflow: hidden;
  font-family: 'IM Fell English', Georgia, serif; font-size: 15px; line-height: 1.3; color: #2A1A0C; transform: rotate(var(--r)); filter: drop-shadow(0 12px 10px rgba(0,0,0,0.5)); transition: transform 220ms cubic-bezier(.2,1.2,.4,1), filter 220ms; }
.nbfront .pst { min-height: 0; height: 100%; }
.pst::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper, #F4E6C6); box-shadow: inset 0 0 30px var(--burn, rgba(90,50,10,0.35)); clip-path: var(--tear); }
.pst.t0 { --tear: polygon(0 2%, 15% 0, 40% 1.5%, 65% 0, 100% 1%, 98.5% 35%, 100% 70%, 99% 100%, 70% 98.5%, 45% 100%, 20% 98.5%, 0 100%, 1.5% 60%, 0 30%); }
.pst.t1 { --tear: polygon(1% 0, 30% 1.5%, 55% 0, 80% 2%, 100% 0, 99% 25%, 100% 55%, 98.5% 80%, 100% 100%, 75% 98%, 50% 100%, 25% 98.5%, 0 99%, 1.5% 75%, 0 45%, 1% 20%); }
.pst.t2 { --tear: polygon(0 0, 22% 2%, 48% 0.5%, 78% 1.5%, 100% 0, 100% 40%, 98.5% 65%, 100% 98%, 60% 100%, 35% 98.5%, 0 100%, 1.5% 80%, 0 50%, 1.5% 22%); }
.pst:hover, .pst:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.04); z-index: 5; filter: drop-shadow(0 22px 16px rgba(0,0,0,0.55)); }
.pst:focus-visible { outline: 3px solid #F2C76B; outline-offset: 4px; }
.pst .nail { position: absolute; top: 10px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #A8A8AE, #2A2A2E 70%); box-shadow: 0 2px 2px rgba(0,0,0,0.5); z-index: 2; }
.ph { font-family: 'Pirata One', 'IM Fell English', serif; font-size: 36px; line-height: 1; letter-spacing: 0.02em; color: var(--ttl, #3A2412); margin-bottom: 2px; }
.ph.sm { font-size: 28px; }
.pk { font-family: var(--body, 'Inter'), sans-serif; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.pt { font-family: 'IM Fell English', Georgia, serif; font-weight: 400; font-size: 19px; line-height: 1.15; }
.pb { display: block; }
.pb.sm { font-size: 13.5px; opacity: 0.85; }
.pb.red { color: #B3120F; opacity: 1; font-style: italic; }
.pf { font-family: 'Pirata One', serif; font-size: 30px; line-height: 1; color: var(--ttl, #3A2412); }
.big { font-family: 'Pirata One', serif; font-size: 44px; line-height: 1; color: var(--ttl, #3A2412); }
.big.sm { font-size: 34px; }
.pli { display: block; width: 100%; padding-top: 5px; border-top: 1px dashed rgba(60,30,10,0.35); font-style: italic; font-size: 14.5px; }
.pgo { margin-top: auto; font-style: italic; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; }
.pbar { display: block; width: 100%; height: 6px; margin-top: 4px; background: rgba(60,30,10,0.2); border-radius: 3px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: #6E4526; }
.pst .stamp { font-size: 14px; bottom: 12px; }
.seal { position: absolute; right: 14px; bottom: 12px; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #E0404A, #8E0A14 65%, #5E0610); box-shadow: 0 2px 3px rgba(0,0,0,0.5), inset 0 0 0 5px rgba(0,0,0,0.18); }
.seal.sm { width: 32px; height: 32px; right: 12px; bottom: 10px; }
.sheet .seal { right: 26px; bottom: 22px; width: 60px; height: 60px; }
.wp { display: block; width: 110px; aspect-ratio: 1; border: 3px solid #4A2E19; background: #E9D8B4; overflow: hidden; margin: 4px 0; }
.wp svg { width: 100%; height: 100%; display: block; filter: sepia(0.35); }
.pst .cv { width: 100%; aspect-ratio: 4 / 3; border-radius: 3px; flex-shrink: 0; }
.pst .cv b { font-size: 16px !important; }
.pst .cv small { font-size: 9px; }
.pst .cv.v2 .mock b { font-size: 10px !important; }

/* paper kinds, one per category */
.p-reward { --paper: radial-gradient(ellipse at 50% 40%, #F6E3B8 0%, #E3C48C 60%, #C79A5C 100%); --ttl: #A0141A; }
.p-arms { --paper: linear-gradient(170deg, #EFE0BD, #D8BD92); --ttl: #3A2412; }
.p-decree { --paper: linear-gradient(#F9E27A, #E6BB32); --ttl: #1E1406; --burn: rgba(140,90,0,0.35); }
.p-bounty { --paper: radial-gradient(ellipse at 50% 35%, #FBD27E 0%, #EE8F2F 55%, #B24A12 100%); --ttl: #2A0E04; --burn: rgba(90,20,0,0.7); }
.p-help { --paper: linear-gradient(#FAF3E1, #E8D9B6); --ttl: #3A2412; }
.p-help .ph { font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 32px; }
.p-warn { --paper: radial-gradient(ellipse at 50% 40%, #F2DDB0, #CFA266); --ttl: #B3120F; }
.p-attn { --paper: linear-gradient(160deg, #E4DAF6, #B7A3DE); --ttl: #35246A; --burn: rgba(60,30,110,0.35); }
.p-fortune { --paper: radial-gradient(ellipse at 50% 30%, #DA7ADF, #8C2A99 70%, #5E1668); --ttl: #FFE3A0; --burn: rgba(40,0,50,0.6); color: #FFF1FA; }
.p-fortune .pli { border-color: rgba(255,230,250,0.4); }
.p-trade { --paper: radial-gradient(ellipse at 50% 40%, #E9F1D3, #B4C68C); --ttl: #2F4A1C; }
.p-wanted { --paper: radial-gradient(ellipse at 50% 40%, #F3E3C0, #D2B07A); --ttl: #4A2E19; }
.p-new { --paper: repeating-linear-gradient(45deg, #F7ECD4 0 14px, #EFDFBD 14px 28px); --ttl: #8E3A16; justify-content: center; }
.p-new::after { content: ""; position: absolute; inset: 12px; border: 2px dashed #8E5C31; pointer-events: none; }

/* pinned sheets for ledgers and forms */
.sheet { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto 38px; padding: 34px 32px 26px; background: #F7ECD4; color: #3A2A1A; transform: rotate(-0.4deg); box-shadow: 0 18px 28px -16px rgba(0,0,0,0.75); }
.sheet .nail { position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #A8A8AE, #2A2A2E 70%); }
.sheet h2 { margin: 0 0 12px; font-family: 'Pirata One', 'IM Fell English', serif; font-weight: 400; font-size: 34px; color: #5A2E12; }
.sheet p { font-family: 'IM Fell English', Georgia, serif; font-size: 17px; line-height: 1.45; }
.sheet .fine { font-family: inherit; font-size: 12.5px; color: #7A6246; }
.shead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.shead span { font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 17px; }
.sheet .bars .b span { color: #7A6246; }
.sheet.decree { max-width: 780px; background: linear-gradient(#F9E27A, #E6BB32); }
.sheet.decree ol { margin: 0; padding: 0 70px 0 22px; font-family: 'IM Fell English', Georgia, serif; font-size: 18px; line-height: 1.5; display: grid; gap: 6px; }
.fsplit { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; align-items: start; }
.sheet .mform label { color: #3A2A1A; }
.sheet .mform input:not([type=checkbox]), .sheet .mform select, .sheet .mform textarea { background: #FFFAF0; border-color: #D2BB8E; color: #3A2A1A; }
.sheet .btn.primary { background: #8E3A16; }
.sheet .btn.outline-dark { background: #F4E6C6; border-color: #C9A96E; color: #3A2412; }
.nbgrid:has(> .wanted) { grid-template-columns: 380px 1fr; gap: 40px; }
.nbgrid > .wanted { transform: rotate(-1.5deg); }
.nbgrid > .sheet { margin: 0; max-width: none; }
/* modals and chips opened from the board */
[data-role="creative"] .nbtools .chips button { box-shadow: 0 2px 0 #3E2716; }
html[data-theme="dark"] .nbbody .toast { background: #F4E6C6; color: #3A2412; }

@media (max-width: 1180px) {
  .nbfront { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
  .nbfront .pst { grid-row: auto !important; grid-column: auto !important; min-height: 250px; }
  .nbgrid:has(> .wanted), .fsplit { grid-template-columns: 1fr; }
  .nbtop .dme span, .nbtop .dsearch { display: none; }
}
@media (max-width: 700px) { .nbfront { grid-template-columns: 1fr 1fr; } .nboard { padding: 50px 14px 24px; border-width: 12px; } .nbsign.big span { font-size: 32px; padding: 6px 30px 4px; } .nbcrumb { display: none; } }
@media (prefers-reduced-motion: reduce) { .pst, .nbback { transition: none; } }
.nbgrid > .wanted .stamp { top: auto; bottom: 62px; right: 16px; }

/* framework uploads: photos, videos and files */
.upl { display: grid; gap: 8px; }
.ulab { font-size: 13.5px; font-weight: 500; }
.drop { display: grid; justify-items: center; gap: 6px; padding: 26px 18px; border: 2px dashed #C9A96E; border-radius: 12px; background: rgba(255,250,240,0.7); color: #3A2A1A; text-align: center; cursor: pointer; transition: background 160ms, border-color 160ms; }
.drop:hover, .drop.over { background: #FFF3DA; border-color: #8E5C31; }
.drop:focus-visible { outline: 3px solid #F2C76B; outline-offset: 2px; }
.drop.has { padding: 14px 18px; }
.drop.has .dicons { display: none; }
.drop .dicons { display: flex; gap: 10px; color: #8E5C31; }
.drop .dicons svg { width: 26px; height: 26px; }
.drop b { font-size: 15px; }
.drop u { color: #8E3A16; text-underline-offset: 3px; }
.drop span:last-child { font-size: 12.5px; color: #7A6246; }
.ufiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ufiles:empty { display: none; }
.uf { position: relative; display: grid; grid-template-rows: auto auto auto; background: #FFFAF0; border: 1px solid #DDC79E; border-radius: 10px; overflow: hidden; font-size: 12.5px; }
.uf.iscover { border-color: #8E3A16; box-shadow: 0 0 0 2px #8E3A16; }
.uprev { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: #EFE2C4; color: #8E5C31; overflow: hidden; }
.uprev img, .uprev video { width: 100%; height: 100%; object-fit: cover; display: block; }
.uprev > svg { width: 30px; height: 30px; }
.uprev .play { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #FFFFFF; display: grid; place-items: center; pointer-events: none; transition: opacity 200ms; }
.uprev:hover .play { opacity: 0; }
.uprev .play svg { width: 15px; height: 15px; margin-left: 2px; }
.uname { padding: 7px 9px 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usize { padding: 1px 9px 8px; color: #7A6246; }
.ucov { position: absolute; left: 6px; top: 6px; border: none; border-radius: 6px; padding: 3px 7px; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; background: rgba(255,250,240,0.92); color: #3A2A1A; }
.ucov[aria-pressed="true"] { background: #8E3A16; color: #FFFFFF; }
.urm { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border: none; border-radius: 50%; background: rgba(0,0,0,0.6); color: #FFFFFF; cursor: pointer; display: grid; place-items: center; }
.urm svg { width: 14px; height: 14px; }
.ufiles.static { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.ufiles.static .uprev { aspect-ratio: 5 / 3; }
.cv.ucv { background: #2A1F14; }
.cv.ucv img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-theme="dark"] .modal.parch .drop { background: #1C140C; border-color: #5A4128; color: #F1E6D0; }
html[data-theme="dark"] .modal.parch .drop:hover, html[data-theme="dark"] .modal.parch .drop.over { background: #2E2216; }
html[data-theme="dark"] .modal.parch .uf { background: #1C140C; border-color: #4A3620; }
html[data-theme="dark"] .modal.parch .uprev { background: #2E2216; }
html[data-theme="dark"] .modal.parch .usize, html[data-theme="dark"] .modal.parch .drop span:last-child { color: #BFA780; }

/* ---------- The Tavern: jobs, chat room and reviews ---------- */
.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; }
.g-tavern { grid-column: 1 / -1; grid-row: 12 / span 4; }
.p-tavern { --paper: radial-gradient(ellipse at 50% 35%, #7A2A26 0%, #5A1A1A 60%, #3E1012 100%); --ttl: #F7E3B5; --burn: rgba(30,5,0,0.6); color: #F3E2CF; }
.p-tavern::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.06), transparent 60%); }
.g-tavern.pst { padding: 22px 36px 18px; }
.tvrow { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; width: 100%; margin-top: 8px; text-align: left; }
.tvcol { display: grid; align-content: start; gap: 5px; }
.tvcol > b { font-family: 'Pirata One', serif; font-weight: 400; font-size: 21px; color: #F2C76B; }
.tvj { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: baseline; font-size: 14px; border-top: 1px dashed rgba(243,226,207,0.3); padding-top: 4px; }
.tvj em { display: block; font-size: 12px; opacity: 0.75; }
.tvj > span:last-child { font-family: 'Pirata One', serif; font-size: 17px; color: #F4E6C6; }
.p-tavern .pli { border-color: rgba(243,226,207,0.3); }
.sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #3FB950; box-shadow: 0 0 0 3px rgba(63,185,80,0.25), 0 0 8px rgba(63,185,80,0.8); }
.sdot.closing { background: #E3A12F; box-shadow: 0 0 0 3px rgba(227,161,47,0.25), 0 0 8px rgba(227,161,47,0.8); }
.sdot.full { background: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,0.2); }
.nbgrid:empty { display: none; }

/* shared sheet for the tavern pages */
.sheet.tvsheet { max-width: none; transform: rotate(-0.2deg); font-family: var(--body, 'Inter'), sans-serif; }
.tvsheet h2 { margin-bottom: 6px; }
.coav { display: inline-grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; color: #FFFFFF; font-family: var(--head); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; }
.coav.sm { width: 22px; height: 22px; border-radius: 6px; font-size: 9.5px; }
.coav.lg { width: 64px; height: 64px; border-radius: 14px; font-size: 20px; }
.coav.lobby { background: #6E4526; }
.coav svg { width: 18px; height: 18px; }

/* job listings: a server-list style board */
.srvbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 14px; }
.srvsort { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; }
.srvsort select { font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid #D2BB8E; border-radius: 8px; background: #FFFAF0; color: #3A2A1A; }
.srvwrap { overflow-x: auto; border: 1px solid #DDC79E; border-radius: 10px; background: #FFFAF0; }
.srv { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 980px; }
.srv th { position: sticky; top: 0; text-align: left; padding: 10px 12px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #F4E6C6; background: #4A2E19; }
.srv td { padding: 11px 12px; border-top: 1px solid #EADBB9; vertical-align: middle; color: #3A2A1A; }
.srv tbody tr:nth-child(even) td { background: rgba(233,216,180,0.28); }
.srv tbody tr.rowlink:hover td { background: #FBEFD2; }
.srv td b { display: block; font-weight: 600; }
.srv td small { display: block; color: #7A6246; font-size: 12px; margin-top: 1px; }
.srv .co { display: flex; align-items: center; gap: 10px; }
.cap { display: block; width: 90px; height: 6px; border-radius: 3px; background: #E6D5B0; overflow: hidden; }
.cap i { display: block; height: 100%; background: #8E5C31; }

/* chat room */
.tvsheet.chat { display: grid; grid-template-columns: 300px 1fr; gap: 0; padding: 0; overflow: hidden; }
.tvsheet.chat > .nail { z-index: 3; }
.clist { border-right: 1px solid #DDC79E; background: rgba(233,216,180,0.35); display: flex; flex-direction: column; max-height: 620px; overflow-y: auto; }
.clhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 26px 16px 12px; }
.clhead select { font: inherit; font-size: 12.5px; padding: 6px 8px; border: 1px solid #D2BB8E; border-radius: 8px; background: #FFFAF0; color: #3A2A1A; max-width: 130px; }
.cth { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 11px 16px; border: none; border-top: 1px solid rgba(201,169,110,0.4); background: none; font: inherit; color: #3A2A1A; text-align: left; cursor: pointer; }
.cth:hover { background: rgba(255,250,240,0.7); }
.cth.on { background: #FFFAF0; box-shadow: inset 3px 0 0 #8E3A16; }
.ctx { min-width: 0; }
.ctx b { display: block; font-size: 14px; }
.ctx small { display: block; font-size: 12.5px; color: #7A6246; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmeta { display: grid; justify-items: end; gap: 4px; }
.cmeta small { font-size: 11px; color: #7A6246; }
.cbadge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #8E3A16; color: #FFFFFF; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.cpane { display: flex; flex-direction: column; min-width: 0; height: 620px; padding: 0 0 10px; }
.cph { display: flex; align-items: center; gap: 12px; padding: 22px 22px 14px; border-bottom: 1px solid #DDC79E; }
.cph > span:nth-child(2) { flex: 1; }
.cph b { display: block; font-size: 16px; }
.cph small { color: #7A6246; font-size: 12.5px; }
.msgs { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.msg { display: grid; justify-items: start; max-width: 72%; gap: 3px; }
.msg.me { align-self: flex-end; justify-items: end; }
.mwho { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #6B4A2A; }
.bub { padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: #FFFAF0; border: 1px solid #E3CFA6; font-size: 14.5px; line-height: 1.45; color: #3A2A1A; }
.msg.me .bub { border-radius: 14px 14px 4px 14px; background: #6E4526; border-color: #6E4526; color: #FFF4E2; }
.mat { font-size: 11px; color: #9A8466; }
.mfile { display: flex; align-items: center; gap: 10px; }
.mfile svg { width: 22px; height: 22px; }
.mfile b { display: block; font-size: 13.5px; }
.mfile small { font-size: 12px; opacity: 0.8; }
.cform { display: flex; align-items: center; gap: 8px; padding: 10px 18px 4px; border-top: 1px solid #DDC79E; }
.cform input { flex: 1; font: inherit; font-size: 14.5px; padding: 11px 14px; border: 1px solid #D2BB8E; border-radius: 22px; background: #FFFAF0; color: #3A2A1A; }
.cform input:focus { outline: 2px solid #8E3A16; outline-offset: 1px; }
.cform .btn { height: 42px; width: 42px; padding: 0; justify-content: center; border-radius: 50%; }
.cattach { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #6E4526; cursor: pointer; }
.cattach:hover { background: rgba(142,92,49,0.12); }
.cattach svg { width: 19px; height: 19px; }
.cpane .fine { padding: 0 22px; margin: 4px 0 0; }

/* reviews */
.tvrev { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.stars { color: #C98A1B; letter-spacing: 1px; font-size: 14px; }
.stars span { color: #D9C7A3; }
.rsum { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; padding: 6px 0 18px; border-bottom: 1px solid #DDC79E; margin-bottom: 6px; }
.rbig { display: grid; justify-items: center; gap: 2px; }
.rbig b { font-family: 'Pirata One', serif; font-weight: 400; font-size: 54px; line-height: 1; color: #5A2E12; }
.rbig .stars { font-size: 17px; }
.rbig small { color: #7A6246; }
.rdist { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; font-size: 12.5px; color: #6B5438; }
.rdist .cap { width: 100%; }
.rev { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px dashed #D2BB8E; }
.rev:last-child { border-bottom: none; }
.rev p { margin: 4px 0; font-family: 'IM Fell English', Georgia, serif; font-size: 16px; line-height: 1.4; }
.rev small { color: #7A6246; font-size: 12px; }
.corate { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 14px; border-bottom: 1px solid #DDC79E; }
.corate > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border: 1px solid #DDC79E; border-radius: 999px; background: #FFFAF0; font-size: 12.5px; }
.corate em { font-style: normal; font-weight: 700; color: #8E5C31; }
.corate small { color: #9A8466; }
.rstars { border: none; margin: 0; padding: 0; min-width: 0; }
.rstars legend { padding: 0; font-size: 13.5px; font-weight: 500; margin-bottom: 6px; }
.rsel { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rstars label { position: relative; cursor: pointer; font-size: 30px; line-height: 1; color: #D9C7A3; }
.rstars input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rstars label:has(input:checked), .rstars label:has(input:checked) ~ label, .rstars label:hover, .rstars label:hover ~ label { color: #C98A1B; }
.rstars label:has(input:focus-visible) { outline: 2px solid #8E3A16; border-radius: 4px; }

html[data-theme="dark"] .srvwrap, html[data-theme="dark"] .bub, html[data-theme="dark"] .cform input, html[data-theme="dark"] .corate > span { background: #FFFAF0; }
@media (max-width: 1180px) { .g-tavern { grid-column: 1 / -1 !important; } .tvrow { grid-template-columns: 1fr; } .tvrev { grid-template-columns: 1fr; } .tvsheet.chat { grid-template-columns: 1fr; } .clist { max-height: 240px; } }

/* ---------- notice board: quill-pen cursor, inked over anything clickable ---------- */
body.nbbody { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M30 1.5c-7.5 1.2-13.6 5.3-17.6 10.4-2.3 3-4.2 6.8-5.3 10.2l-.8 2.6 2.5-1c3.2-1.2 7-3.2 10.1-5.6 5.2-4.1 9.3-10.1 11.1-16.6z' fill='%23F4EDE0' stroke='%233A2412' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M24 6l2.5 -1' stroke='%233A2412' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M21 9l3 -1.2' stroke='%233A2412' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M18 12l3 -1.4' stroke='%233A2412' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M15 15.5l2.8 -1.4' stroke='%233A2412' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M22 5l-1 2.6' stroke='%233A2412' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M19 8l-1.2 3' stroke='%233A2412' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M16 11l-1.4 3' stroke='%233A2412' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M13 14.5l-1.4 2.8' stroke='%233A2412' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M28.2 3.4 7.6 23.9' stroke='%233A2412' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M8.4 23.1 3.2 28.8l1.3-4.4 2.1-2.1z' fill='%23111' stroke='%23111' stroke-width='.9' stroke-linejoin='round'/%3E%3C/svg%3E") 3 29, auto; }
body.nbbody :is(a, button, select, summary, label, [role="button"], [data-act], .rowlink, input[type="checkbox"], input[type="radio"], input[type="file"]) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M30 1.5c-7.5 1.2-13.6 5.3-17.6 10.4-2.3 3-4.2 6.8-5.3 10.2l-.8 2.6 2.5-1c3.2-1.2 7-3.2 10.1-5.6 5.2-4.1 9.3-10.1 11.1-16.6z' fill='%23F2D58A' stroke='%235A2E12' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M24 6l2.5 -1' stroke='%235A2E12' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M21 9l3 -1.2' stroke='%235A2E12' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M18 12l3 -1.4' stroke='%235A2E12' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M15 15.5l2.8 -1.4' stroke='%235A2E12' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M22 5l-1 2.6' stroke='%235A2E12' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M19 8l-1.2 3' stroke='%235A2E12' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M16 11l-1.4 3' stroke='%235A2E12' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M13 14.5l-1.4 2.8' stroke='%235A2E12' stroke-width='.6' opacity='.55'/%3E%3Cpath d='M28.2 3.4 7.6 23.9' stroke='%235A2E12' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M8.4 23.1 3.2 28.8l1.3-4.4 2.1-2.1z' fill='%23111' stroke='%23111' stroke-width='.9' stroke-linejoin='round'/%3E%3Ccircle cx='3.6' cy='28.4' r='2.3' fill='%238E0017'/%3E%3Ccircle cx='2.9' cy='27.7' r='.6' fill='%23fff' opacity='.6'/%3E%3C/svg%3E") 3 29, pointer !important; }
body.nbbody :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea) { cursor: text !important; }
body.nbbody :is(button[disabled], .btn[disabled]) { cursor: not-allowed !important; }

/* the Tavern: a small board of its own, top right above the notice board */
.nbhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin-top: 6px; }
.nbhead .nbhello { grid-column: 2; margin: 30px 0 0; }
.nbmini { grid-column: 3; justify-self: end; position: relative; width: 390px; margin-top: 44px; padding: 16px; border: 10px solid #4A2E19; border-radius: 6px; transform: rotate(0.8deg);
  background: repeating-linear-gradient(0deg, #6A4527 0 46px, #4E3118 46px 48px), #6A4527; box-shadow: inset 0 0 0 2px #2A190C, inset 0 0 30px rgba(0,0,0,0.5), 0 0 0 2px #2A190C, 0 22px 34px -18px rgba(0,0,0,0.75); }
.nbsign.sm { top: -40px; }
.nbsign.sm span { font-size: 22px; padding: 5px 30px 3px; }
.nbsign.sm span::before { left: 10px; } .nbsign.sm span::after { right: 10px; }
.nbhead + .nboard.front { margin-top: 70px; }
.pst.tvmini { min-height: 0; padding: 22px 20px 14px; gap: 5px; }
.tvstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin: 4px 0 2px; }
.tvstats > span { display: grid; gap: 1px; padding: 6px 4px; border: 1px dashed rgba(243,226,207,0.35); border-radius: 6px; font-size: 12px; line-height: 1.2; }
.tvstats b { font-family: 'Pirata One', serif; font-weight: 400; font-size: 22px; color: #F2C76B; }
.tvmini .tvj { width: 100%; text-align: left; }
.tvmini .pgo { margin-top: 4px; }
@media (max-width: 1180px) { .nbhead { grid-template-columns: 1fr; justify-items: center; } .nbhead .nbhello, .nbmini { grid-column: 1; justify-self: center; } }
/* phones: wide tables scroll inside their card; the notice board header fits the screen */
@media (max-width: 760px) { .dcard { overflow-x: auto; } .nbmini { width: 100%; max-width: 390px; box-sizing: border-box; } .nbhead > * { min-width: 0; max-width: 100%; } html[data-theme] .dtop.nbtop { padding: 10px 14px; gap: 10px; } .nblogout { padding: 8px; } .nblogout span { display: none; } }