:root{--surface:#fff;--soft:#edf3f9;--accent:#315e84;--secondary:#657b95}
html[data-theme=dark]{--ink:#e5edf6;--muted:#a9bbcf;--navy:#bdd5e8;--paper:#0d1728;--line:#2c3c54;--surface:#14243b;--soft:#1b304b;--accent:#b3d8ed;--secondary:#afc1d3;color-scheme:dark}
html[data-theme=light]{--paper:#f5f7fa;--ink:#223b51;--surface:#fff;--soft:#eaf2f7;--line:#d8e3eb;--accent:#315e84;--secondary:#657b95;color-scheme:light}
.header{position:relative;z-index:35;gap:20px}.desktop-nav{gap:24px;white-space:nowrap}.account-nav{margin-left:auto;gap:15px}.theme-toggle{display:flex;align-items:center;gap:7px;background:transparent;border:1px solid #879bb44d;border-radius:20px;padding:6px 11px;font-size:10px;white-space:nowrap}.theme-icon{font-size:15px;line-height:1}.member-chip{display:flex;gap:8px;align-items:center}.member-chip>img{width:39px;height:43px;object-fit:contain;image-rendering:pixelated;background:#8aaac51a;border-radius:7px}.member-chip strong{display:block;font-size:11px;font-weight:500;max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-chip small{display:block;font-size:8px;opacity:.7}.account-nav [data-logout]{background:transparent;font-size:10px;padding:0}
html[data-theme=light] .header,html[data-theme=light] .mobile-nav{background:#f8fcff;color:#264863;border-color:#dbe6ec}html[data-theme=light] .brand small{color:#5e7c91}html[data-theme=light] .desktop-nav a:hover{color:#547a93}html[data-theme=light] .account-nav .nav-join{border-color:#9eb4c7}html[data-theme=light] .mobile-menu>span{background:#2c4f69}
main{position:relative}.login-widget{position:absolute;right:4.6%;top:35px;width:290px;z-index:10;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:25px;box-shadow:0 12px 45px #07172926}.login-widget h2{font:23px/1.5 var(--serif);margin:0 0 17px}.login-widget .eyebrow{font-size:8px;letter-spacing:2px;margin-bottom:12px;color:var(--secondary)}.login-widget .field{margin-bottom:9px}.login-widget input{min-height:40px;padding:9px 12px}.login-widget .button{min-height:42px;padding:9px 14px;font-size:11px}.widget-join{display:block;text-align:center;font-size:10px;color:var(--secondary);margin-top:17px}.widget-character{display:flex;align-items:center;gap:12px;min-height:115px}.widget-character>img{width:90px;height:115px;object-fit:contain;image-rendering:pixelated}.widget-character h2{font-family:var(--sans);font-size:18px;margin-bottom:5px}.widget-character p{font-size:10px;color:var(--secondary);margin:0}.widget-welcome{font-size:11px;color:var(--secondary);margin-top:12px}.widget-logout{display:block;margin:15px auto 0;background:none;font-size:10px;color:var(--secondary)}
html[data-theme=light] .hero-shade{background:linear-gradient(0deg,#153950aa 0%,#15395033 35%,transparent 65%)}html[data-theme=light] .hero-art{content:url('assets/sea-day.png')}.hero-copy{max-width:calc(100% - 96px)}.hero-copy h1{max-width:760px}.hero-caption{color:#e4edf6}
.panel,.article-content,.auth-shell,.stat,.table-wrap,.permission-message,.login-widget{background:var(--surface);border-color:var(--line);color:var(--ink)}.home-guide{background:var(--soft);color:var(--ink)}.home-guide h2,.home-guide h3,.page-title h1,.article-content h1,.article-content h2,.download-info h2,.section-heading h2,.auth-panel h1,.panel h2,.admin-welcome h2{color:var(--ink)}.form-intro,.page-title>p:last-child,.article-content p,.article-content li,.admin-welcome p,.download-info p,.form-bottom,.field-note,.account-overview p{color:var(--secondary)}.field input,.field textarea,.field select{background:var(--paper);border-color:var(--line);color:var(--ink)}.field>span{color:var(--secondary)}.field input::placeholder,.field textarea::placeholder{color:var(--muted)}.button-dark{background:#244568;color:#f4f8fc}.button-line{background:transparent;border-color:var(--line);color:var(--ink)}.download-card{background:var(--surface);border-color:var(--line);color:var(--ink)}.download-card h2,.download-card p{color:var(--ink)}.small-notice{background:var(--soft);color:var(--secondary)}.stat>span,.stat strong{color:var(--ink)}th{background:var(--soft);color:var(--secondary)}td,th,.character-list li,.side-nav,.side-nav a{border-color:var(--line)}.news-row{border-color:var(--line);color:var(--ink)}.news-row strong{color:var(--ink)}.news-row time,.news-row .category,.news-row .arrow{color:var(--secondary)}.news-filters button,.side-nav a{color:var(--secondary)}.news-filters button.active,.side-nav a.current{color:var(--accent)}.table-wrap td button{color:var(--ink);border-color:var(--line)}.pre-line{white-space:pre-wrap;overflow-wrap:anywhere}.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}.loading-message{font-size:12px;color:var(--secondary);padding:20px}
.community-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}.board-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.board-tabs a,.board-tabs button{background:transparent;padding:7px 13px;border-radius:20px;color:var(--secondary);font-size:12px;white-space:nowrap}.board-tabs .active{background:var(--soft);color:var(--accent);font-weight:600}.write-link{min-height:40px;padding:8px 18px;white-space:nowrap}.board-search{display:flex;justify-content:flex-end;gap:8px;margin:22px 0}.board-search input{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:9px 14px;width:250px;font-size:12px;color:var(--ink)}.board-search button{background:var(--soft);padding:8px 17px;border-radius:4px;font-size:12px}.board-list{border-top:1px solid var(--line)}.board-row{display:grid;grid-template-columns:76px minmax(0,1fr) 110px 85px;align-items:center;gap:15px;padding:22px 8px;border-bottom:1px solid var(--line)}.board-row:hover{background:var(--soft)}.board-category{font-size:10px;color:var(--secondary)}.board-title{font-size:14px;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-title small{font-size:11px;color:var(--secondary);margin-left:8px}.board-author,.board-date{font-size:10px;color:var(--secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pin-label{display:inline-block;background:#dfc69626;color:var(--accent);border:1px solid #b49b6933;border-radius:3px;padding:0 6px;font-size:9px;margin-right:7px}.empty-board{padding:70px 25px;text-align:center;border:1px solid var(--line);background:var(--surface);border-radius:5px}.empty-board h2{font-size:20px;margin-bottom:9px}.empty-board p{font-size:12px;color:var(--secondary);margin:0}.board-pagination{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:26px;font-size:12px}.board-pagination a{border:1px solid var(--line);padding:7px 15px;border-radius:4px}.editor-actions,.post-actions{display:flex;justify-content:flex-end;gap:10px;align-items:center}.post-editor{max-width:900px;margin-inline:auto}.post-editor textarea{min-height:300px;line-height:1.9;resize:vertical;font-size:13px}.post-meta{display:flex;align-items:center;gap:15px;font-size:11px;color:var(--secondary);margin:0 0 28px;padding-bottom:25px;border-bottom:1px solid var(--line)}.post-body{font-size:14px;line-height:2.1;white-space:pre-wrap;overflow-wrap:anywhere;min-height:140px}.post-actions{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}.post-actions .button{font-size:10px;padding:8px 16px;min-height:38px}.comments-section{margin-top:30px;padding:30px;background:var(--surface);border:1px solid var(--line);border-radius:5px}.comments-section h2{font-size:18px}.comment{padding:20px 0;border-bottom:1px solid var(--line)}.comment-head{display:flex;align-items:center;gap:12px;font-size:11px}.comment time{font-size:9px;color:var(--secondary)}.comment p{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0 8px}.comment-buttons{display:flex;gap:15px;justify-content:flex-end}.comment-buttons button{background:none;font-size:10px;color:var(--secondary)}.comment-edit textarea{min-height:90px;width:100%;background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:12px}.comment-edit button{background:var(--soft);padding:6px 15px;margin:8px 6px 0 0;font-size:11px}.comment-form{margin-top:24px}.comment-form textarea{min-height:100px}.content-editor-note{font-size:11px;color:var(--secondary);margin-block:15px}.content-editor textarea{min-height:400px;font:13px/2 var(--sans);resize:vertical}.content-editor select{width:100%}.admin-edit-link{display:inline-block;font-size:10px;border:1px solid var(--line);padding:5px 12px;border-radius:4px;color:var(--accent);margin-top:15px;background:var(--surface)}.hero-copy .admin-edit-link{color:#e3ebf4;background:#16334b99}.character-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}.character-card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:15px;text-align:center}.character-card.selected{border-color:#77accd}.character-card img{width:95px;height:110px;object-fit:contain;image-rendering:pixelated}.character-card strong{display:block;font-size:12px}.character-card p{font-size:10px;margin-block:5px 10px}.character-card button{background:var(--soft);font-size:10px;padding:5px 12px;border:1px solid var(--line);border-radius:3px}.character-card button:disabled{opacity:.65}.help-inline{font-size:11px;color:var(--secondary)}.comment-status{font-size:11px;color:#cc7885}.content-body{white-space:normal}.content-body p{white-space:pre-line}.community-editor-warning{margin-bottom:20px;color:var(--secondary);font-size:12px}
.hero-copy h1{text-shadow:0 2px 15px #07172a99}.hero-copy>p{text-shadow:0 1px 6px #061a28aa}.theme-toggle{min-height:29px;font-size:11px}
.content-confirm{width:min(440px,calc(100% - 36px));padding:30px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:0 24px 80px #0006}.content-confirm::backdrop{background:#071323ad;backdrop-filter:blur(3px)}.content-confirm h2{font-size:22px;line-height:1.5;margin:8px 0 14px}.content-confirm .eyebrow{font-size:9px;color:var(--secondary);letter-spacing:2px}.confirm-description{font-size:13px;line-height:1.9;color:var(--secondary);margin:0;white-space:pre-line}.content-confirm .form-status{margin:12px 0;font-size:12px;white-space:pre-line}.content-confirm .editor-actions{margin-top:22px}.content-confirm .button{min-height:42px;padding:10px 20px}.button-danger{background:#a83e50;color:#fff;border:1px solid #a83e50}.button-danger:hover{background:#8d3040}.text-danger{color:#bd485b!important}.content-notice{background:var(--soft);border:1px solid var(--line);border-left:3px solid #66a58f;border-radius:5px;color:var(--ink);padding:13px 18px;font-size:12px;line-height:1.8;margin:0 0 22px}main>.content-notice{max-width:1200px;margin:24px auto;padding-inline:22px}.content-row-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}.content-row-actions button{border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);font-size:11px;padding:7px 12px}.managed-board-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.managed-board-row .board-row{border-bottom:0;grid-template-columns:65px minmax(0,1fr) 90px}.managed-board-row .board-date{display:none}.editor-delete{margin-right:auto}.post-unavailable{text-align:center;padding:35px 0}.post-unavailable h1{font-size:27px}.post-unavailable p{margin-bottom:24px}button:disabled{cursor:wait}.content-confirm button:focus-visible,.content-row-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media(max-width:650px){.content-confirm{padding:24px}.content-confirm h2{font-size:20px}.managed-board-row{gap:4px}.managed-board-row .board-row{grid-template-columns:45px minmax(0,1fr)}.content-row-actions{gap:5px}.content-row-actions button{font-size:10px;padding:7px 9px}.editor-actions{flex-wrap:wrap}.editor-delete{margin-right:0}.content-notice{font-size:11px}.content-confirm .editor-actions{flex-wrap:nowrap}main>.content-notice{margin:16px 20px}}
@media(min-width:901px) and (max-width:1250px){.header{padding-inline:25px;gap:15px}.desktop-nav{gap:18px;font-size:11px}.account-nav{gap:10px}.member-chip strong{max-width:70px}.account-nav [data-logout]{display:none}.brand>span{font-size:22px;letter-spacing:3px}}
@media(max-width:900px){.login-widget{width:260px;right:30px;top:25px;padding:22px}.account-nav{gap:12px}.mobile-nav:not([hidden]){flex-wrap:wrap}.hero h1{max-width:620px}.board-row{grid-template-columns:60px minmax(0,1fr) 90px;gap:10px}.board-date{display:none}}
@media(max-width:650px){.login-widget{position:relative;top:auto;right:auto;width:calc(100% - 40px);margin:25px auto 0;padding:23px}.login-widget h2{font-size:23px}.login-widget .field input{min-height:44px}.hero-copy{max-width:none}.header{gap:9px}.account-nav{gap:10px}.theme-toggle{padding:6px 8px}.theme-toggle [data-theme-label]{display:none}.member-chip>img{width:30px;height:36px}.member-chip strong{max-width:70px;font-size:10px}.member-chip small{font-size:7px}.account-nav [data-admin]{font-size:8px}.header .brand>span{font-size:20px;letter-spacing:2px}.header .brand img{width:26px;height:26px}.header .brand{gap:7px}.header .brand small{font-size:6px}.community-toolbar{align-items:flex-start;gap:12px}.board-tabs{gap:2px}.board-tabs a,.board-tabs button{padding:6px 10px;font-size:10px}.write-link{font-size:10px;padding:7px 12px;gap:8px;min-height:36px}.board-search input{width:100%}.board-search{margin-block:18px}.board-row{grid-template-columns:48px minmax(0,1fr);gap:5px 10px;padding-block:17px}.board-title{font-size:12px}.board-author{grid-column:2}.board-category{align-self:start;font-size:9px}.post-body{font-size:13px}.post-meta{font-size:10px;flex-wrap:wrap;gap:9px}.comments-section{padding:23px}.post-editor textarea{min-height:250px}.post-actions{flex-wrap:wrap}.character-grid{gap:9px}.character-card{padding:12px 8px}.character-card img{width:85px;height:100px}.content-editor textarea{min-height:340px}.widget-character>img{width:80px;height:100px}.hero{height:580px}.board-pagination{font-size:11px}.content-editor-note{font-size:10px}}
