/* Shared full-screen Digital Lounge theme for every interior page. */
:root{--ink:#f6f5ef!important;--muted:#d0d6d9!important;--paper:#212c35!important;--card:#2a3843!important;--line:#f6f5ef30!important;--blue:#8aa5b6!important;--sky:#334959!important;--green:#a9c0ce!important;--bg:#19242d!important;--fg:#f6f5ef!important;--mut:#d0d6d9!important;--acc:#8aa5b6!important;--cur:#8aa5b644!important;--ok:#99b8cb!important}
html{background:#19242d!important}
body{position:relative;isolation:isolate;min-height:100vh;overflow-x:hidden;background:radial-gradient(ellipse at 84% 30%,#1b6ab152 0,transparent 36%),linear-gradient(120deg,#1a2834 0%,#2a3b49 60%,#546c7d 100%)!important;color:#f5f9fe!important}
body:before,body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body:before{background:linear-gradient(145deg,transparent 35%,#f6f5ef0c 35.1%,transparent 62%),linear-gradient(35deg,transparent 55%,#79bbf812 55.1%,transparent 78%),radial-gradient(circle at 70% 74%,#a3bfd018 0 9%,transparent 9.2%)}
body:after{inset:25% -10% -30% 38%;opacity:.3;transform:perspective(700px) rotateX(62deg) rotateZ(-28deg);transform-origin:center;background-image:linear-gradient(#d4e1e926 1px,transparent 1px),linear-gradient(90deg,#d4e1e926 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(transparent,#000 15%,#000 80%,transparent)}
.wrap{position:relative;z-index:1;max-width:1440px!important;padding:0 clamp(18px,4vw,48px)!important}
.top{background:#19242dd9!important;border-bottom:1px solid #f6f5ef20!important;backdrop-filter:blur(16px)}
.brand,.brand:visited{color:#f5f9fe!important}.brand i{background:#a7c2d3!important;box-shadow:0 0 16px #a7c2d377!important}
.nav,.nav a{color:#e7ecee!important}.nav a:hover{color:#c6d7e1!important}
.login-link{color:#f5f9fe!important;border-color:#f6f5ef55!important}.login-link:hover{color:#c6d7e1!important;border-color:#c6d7e1!important}
main,.board,.recipe-main,.music-main,.admin-main,.login-shell,.signup-shell{color:#f5f9fe!important}
.note{border-color:#f6f5ef2c!important;color:#d0d6d9!important}.note strong{color:#fff!important}.note a{color:#f5f9fe!important}
.eyebrow{color:#c6d7e1!important}
input,textarea,select{background:#19242dd9!important;color:#f5f9fe!important;border-color:#f6f5ef35!important;caret-color:#6ab3f7}
input::placeholder,textarea::placeholder{color:#abbfd3!important;opacity:1}
input:focus,textarea:focus,select:focus{outline:2px solid #a1bbcc!important;outline-offset:2px}
button,.tool,.btn,.actions button,.board-pager button,.music-pager button{background:#334451!important;color:#f5f9fe!important;border-color:#f6f5ef3d!important}
button:hover,.tool:hover,.btn:hover,.actions button:hover,.board-pager button:hover,.music-pager button:hover{border-color:#b4cad7!important}
.btn.blue,.submit,.actions .submit,.write,.comment-form button{background:#8aa5b6!important;color:#212c35!important;border-color:#8aa5b6!important}
.btn.red,.danger{color:#ffaaa5!important}
.admin-main .section,.login-card,.signup-card,.recipe,.player-panel,.empty,.comment,.import-card,.manage-card,.form,.box,.stat,.post,.board-tabs,.search-row,.music-toolbar{background:#2a3843eF!important;color:#f5f9fe!important;border-color:#f6f5ef2c!important;box-shadow:0 14px 42px #02132438}
.admin-main .section h2,.recipe h2,.post h2,.form h2,.form h3,.detail h2,.login-card h1,.signup-card h1,.admin-title h1,.recipe-head h1{color:#f5f9fe!important}
.admin-title p,.security-note,.item small,.login-card .sub,.signup-card .sub,.below,.note-text,.recipe-head p,.recipe p,.post p,.post .by,.comment-head,.comment-body,.music-count,.player-artist,.player-state,.admin-hint,.status,.empty,.comment-login{color:#d0d6d9!important}
.item,.music-pager,.track-list,.post,.comment-area,.section .item{border-color:#f6f5ef24!important}
.item strong,.post-title,.track-name,.comment strong{color:#f5f9fe!important}
.recipe:hover,.studio-card:hover{border-color:#b4cad7!important}
.recipe .meta,.post .by,.attachment-link,.comment-toggle,.signup-line a,.home-link{color:#c6d7e1!important}
.board-hero,.portfolio-mode .board-hero{background:radial-gradient(ellipse at 82% 20%,#7e98a850,transparent 35%),linear-gradient(120deg,#1a2834,#2a3b49 60%,#546c7d)!important;border:1px solid #f6f5ef28!important;color:#f5f9fe!important;box-shadow:0 18px 50px #0213243a}
.board-hero .eyebrow{color:#c6d7e1!important}.board-head p,.portfolio-mode .board-head p{color:#d1dfec!important}
.board-hero:before,.portfolio-mode .board-hero:before{background:linear-gradient(25deg,#b1c3cd22 0 28%,#f6f5ef12 28% 61%,#7087962b 61%)!important}
.board-hero:after,.portfolio-mode .board-hero:after{background:#a3bfd0!important;opacity:.16!important;box-shadow:0 0 0 24px #a1bbcc33,0 0 55px #67829477!important}
.board-tabs{background:transparent!important;border-color:#f6f5ef30!important;box-shadow:none!important}
.board-tab{background:#2a3843cc!important;color:#e7ecee!important;border-color:#f6f5ef32!important}.board-tab.active{background:#8aa5b6!important;color:#212c35!important;border-color:#8aa5b6!important}
.post-list{background:transparent!important;border-color:#f6f5ef25!important}.post{background:#2a3843eF!important}.post p{color:#d1dfec!important}.post small,.secret-badge{color:#d0d6d9!important}
.comment{background:#23303a!important}.comment-form input{background:#19242d!important;color:#fff!important}.attachment-preview{background:#2a3843!important;border-color:#f6f5ef35!important}
.form label,.secret-option{color:#d1dfec!important}.form input,.form textarea,.form select,.formrow input,.admin-main input,.admin-main select{background:#19242d!important;color:#f5f9fe!important;border-color:#f6f5ef35!important}
dialog{background:#2a3843!important;color:#f5f9fe!important;border-color:#f6f5ef35!important;box-shadow:0 24px 70px #0008!important}dialog::backdrop{background:#04101dd1!important}
.player-panel{background:linear-gradient(125deg,#2a3843,#2a3b49)!important;border-color:#f6f5ef2d!important}.music-hero{background:radial-gradient(ellipse at 82% 20%,#7e98a850,transparent 35%),linear-gradient(120deg,#1a2834,#2a3b49 60%,#546c7d)!important}.genre-chip{background:#2a3843!important;color:#e2e8eb!important;border-color:#f6f5ef35!important}.genre-chip.active{background:#8aa5b6!important;color:#212c35!important;border-color:#8aa5b6!important}.track-row{background:transparent!important;color:#f5f9fe!important;border-color:#f6f5ef22!important}.track-row:hover,.track-row.active{background:#8aa5b629!important}.track-genre{color:#a1cffa!important;background:#67829433!important}.empty{background:#2a3843eF!important;border-color:#f6f5ef38!important}
.recipe{background:linear-gradient(145deg,#334451,#212c35)!important}.recipe:hover{box-shadow:0 14px 36px #02132455!important}.tool.dark{background:#8aa5b6!important;color:#212c35!important;border-color:#8aa5b6!important}
#target{color:#f5f9fe!important}#target .pen{color:#d0d6d9!important}#inp,.paste-text,.manage-card input{background:#19242d!important;color:#fff!important;border-color:#f6f5ef35!important}.stat b,.big{color:#c3d6e0!important}.k{color:#f5f9fe!important;border-color:#f6f5ef28!important;box-shadow:inset 0 1px #f6f5ef08}.k .a,.k .m,.ko .a{color:#d0d6d9!important}.k .j{color:#f5f9fe!important}.k.next{background:#8aa5b677!important;outline-color:#c6d7e1!important}.tabs button,.custom-tab{background:#2a3843!important;color:#e7ecee!important;border-color:#f6f5ef35!important}.tabs button.on,.custom-tab button.on{background:#8aa5b6!important;color:#212c35!important;border-color:#8aa5b6!important}.import-info{background:#19242d!important;color:#e2e8eb!important}
@media(max-width:760px){.wrap{padding:0 18px!important}.top{background:#19242dee!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Compact board masthead with its board switcher in the hero. */
.board{max-width:1280px!important;padding-top:20px!important}
.board-hero{min-height:0!important;margin:18px 0 22px!important;padding:28px 34px!important}
.board-head{align-items:center!important;gap:22px!important}
.board-heading{min-width:240px}
.board-heading h1{font-size:clamp(34px,4vw,48px)!important}
.board-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:1;min-width:0}
.board-tabs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:0!important;margin:0!important;border:0!important}
.board-tab{border-radius:24px!important;padding:10px 15px!important;white-space:nowrap;text-decoration:none!important;transition:background .18s,border-color .18s,transform .18s}
.board-tab:hover{transform:translateY(-1px);border-color:#b4cad7!important}
.board-actions .write{flex:none;border-radius:9px!important;padding:12px 18px!important;white-space:nowrap}
@media(max-width:1000px){.board-head{align-items:flex-start!important;flex-direction:column}.board-actions{width:100%;justify-content:space-between}.board-tabs{justify-content:flex-start}}
@media(max-width:640px){.board-hero{padding:24px 20px!important}.board-actions{align-items:flex-start;flex-direction:column}.board-tabs{gap:6px}.board-tab{padding:8px 11px!important;font-size:13px}}
/* Improve typing prompt size and special-key label readability. */
#target{font-size:clamp(28px,3.4vw,48px)!important}
.k{font-size:13px!important}
.k .m{font-size:12px!important;color:#e7ecee!important;font-weight:600}
.k .a{font-size:12px!important;color:#e7ecee!important}
.ko .a{font-size:10px!important;color:#d0d6d9!important}
/* Keep every virtual keyboard key on the same dark surface for legible labels. */
#kb .k{background:#334451!important;color:#e7ecee!important;border-color:#f6f5ef35!important}
#kb .k .m,#kb .k .a{color:#e2e8eb!important}
#kb .k.next{background:#8aa5b677!important;border-color:#c6d7e1!important}

/* Shared site header on the standalone typing page. */
.typing-site-header{position:relative;z-index:2}
.typing-site-header .top{height:76px;display:flex;align-items:center;justify-content:space-between}
.typing-site-header .brand{font:650 21px -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;letter-spacing:-.04em;white-space:nowrap}
.typing-site-header .nav{display:flex;align-items:center;gap:clamp(10px,1.7vw,25px);font-size:14px}
.typing-site-header .nav a{white-space:nowrap}
@media(max-width:760px){.typing-site-header .top{height:auto;min-height:66px;gap:12px;flex-wrap:wrap;padding:12px 0}.typing-site-header .brand{font-size:18px}.typing-site-header .nav{gap:10px;flex-wrap:wrap;font-size:12px}}

/* Match interior page logo placement and typography to the home header. */
.wrap>.top{width:100vw;max-width:none!important;height:80px!important;margin-left:calc(50% - 50vw)!important;padding:18px max(calc((100vw - 1320px)/2),5.2%)!important;box-sizing:border-box}
.wrap>.top .brand,.typing-site-header .brand{font-size:21px!important;font-weight:700!important;letter-spacing:.02em!important;line-height:1.2!important;white-space:nowrap}
.wrap>.top .brand i,.typing-site-header .brand i{width:10px!important;height:10px!important;margin:0 9px 1px 0!important;background:#a7c2d3!important;box-shadow:0 0 18px #a7c2d3a0!important}
@media(max-width:760px){.wrap>.top{height:auto!important;min-height:80px;padding:14px 5.2%!important}.wrap>.top .brand,.typing-site-header .brand{font-size:18px!important}}
.typing-site-header{width:100%;max-width:none!important;margin:0!important;padding:0!important}
.typing-site-header .top{width:100vw;max-width:none!important;height:80px!important;margin-left:calc(50% - 50vw)!important;padding:18px max(calc((100vw - 1320px)/2),5.2%)!important;box-sizing:border-box}
@media(max-width:760px){.typing-site-header .top{height:auto!important;min-height:80px;padding:14px 5.2%!important}}
/* Center a lone portfolio card so the layout stays balanced. */
.portfolio-mode .post-list>.post:only-child{grid-column:1/-1;width:min(100%,900px);justify-self:center}

.playback-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:12px 0}
.playback-controls button{border-radius:9px;padding:9px 13px;font-weight:650}
.playback-controls button.active{background:#8aa5b6!important;color:#212c35!important;border-color:#8aa5b6!important}

.play-all{flex:none;border:1px solid #8aa5b6!important;background:#8aa5b6!important;color:#212c35!important;border-radius:999px!important;padding:10px 17px!important;font-weight:750!important;white-space:nowrap}
.play-all:hover{background:#c4d5de!important;border-color:#c4d5de!important}
.playback-controls button,.music-pager button{border-radius:999px!important}
@media(max-width:700px){.play-all{align-self:flex-start}}

/* Match the requested rounded music panel and lift transport row by 3 mm. */
.player-panel{border-radius:24px!important}
.playback-controls{transform:translateY(-11px);margin-bottom:-11px}
.playback-controls button,.music-pager button,.play-all{border-radius:999px!important}

.playback-controls{transform:translateY(-11px);margin-bottom:-11px}
.playback-controls button,.play-all{border-radius:999px!important}
.player-controls audio{border-radius:999px;overflow:hidden}

/* Music transport buttons form one square-edged toolbar; keep 3 mm before audio. */
.playback-controls{display:flex;flex-wrap:nowrap;gap:0!important;transform:none!important;margin:0 0 11px!important}
.playback-controls button,.playback-controls .play-all{flex:0 0 auto;border-radius:0!important;margin:0!important;box-shadow:none!important}
.playback-controls button+button{border-left-color:#f6f5ef55!important}

.play-all.active{background:#b6cad6!important;color:#212c35!important;border-color:#b6cad6!important}
/* The inactive whole-play toggle matches the other transport buttons. */
.playback-controls .play-all:not(.active){background:#334451!important;color:#f5f9fe!important;border-color:#f6f5ef3d!important}
.player-panel{border-radius:32px!important}

.playback-controls button{height:38px!important;padding:6px 9px!important;font-size:13px!important;line-height:1!important;white-space:nowrap}
.playback-controls .play-all{height:38px!important;padding:6px 12px!important;font-size:13px!important;line-height:1!important;white-space:nowrap}
@media(max-width:700px){.playback-controls{flex-wrap:wrap!important}.playback-controls button,.playback-controls .play-all{height:36px!important;padding:6px 8px!important;font-size:12px!important}}

.playback-controls button{height:32px!important;padding:4px 7px!important;font-size:11px!important;letter-spacing:-.025em}
.playback-controls .play-all{height:32px!important;padding:4px 9px!important;font-size:11px!important;letter-spacing:-.025em}
@media(max-width:700px){.playback-controls button,.playback-controls .play-all{height:30px!important;padding:4px 6px!important;font-size:10px!important}}

/* Board tabs: keep one row and expose the first tab; scroll only when there are more boards than fit. */
.board-head{align-items:flex-end!important}
.board-actions{width:68%!important;max-width:68%!important;flex:0 1 68%!important;min-width:0!important;gap:6px!important;align-items:center!important}
.board-tabs{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:center!important;gap:4px!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;scrollbar-width:thin!important;padding:5px 0!important}
.board-tab{flex:0 0 auto!important;padding:5px 7px!important;font-size:11px!important;line-height:1.2!important}
.board-tab-icon{width:13px!important;height:13px!important;flex:none!important}
@media(max-width:1000px){.board-head{align-items:flex-start!important;flex-direction:column!important}.board-actions{width:100%!important;max-width:100%!important;flex:0 0 auto!important}.board-tabs{justify-content:flex-start!important}}
@media(max-width:640px){.board-actions{align-items:center!important;flex-direction:row!important}.board-tabs{flex-wrap:nowrap!important;gap:4px!important}.board-tab{padding:5px 7px!important;font-size:11px!important}}


/* Board header positioning: center the board switcher and anchor writing at the far right. */
@media(min-width:1001px){
  .board-heading{flex:0 0 32%!important;width:32%!important}
  .board-actions{width:auto!important;max-width:none!important;flex:1 1 68%!important;justify-content:flex-end!important;gap:12px!important}
  .board-tabs{flex:0 1 auto!important;justify-content:flex-end!important;max-width:calc(100% - 110px)!important}
  .board-tabs.overflows{justify-content:flex-start!important}
  .board-actions .write{margin-left:0!important}
}

/* Mobile shared header: keep the brand on its own row and wrap full labels. */
@media(max-width:760px){
  .wrap>.top,.typing-site-header .top{
    height:auto!important;min-height:0!important;width:100vw!important;
    margin-left:calc(50% - 50vw)!important;padding:14px 18px!important;
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;
    justify-content:flex-start!important;gap:12px!important;box-sizing:border-box!important
  }
  .wrap>.top .brand,.typing-site-header .brand{font-size:18px!important;white-space:nowrap!important}
  .wrap>.top .nav,.typing-site-header .nav{
    width:100%!important;min-width:0!important;display:flex!important;flex-wrap:wrap!important;
    align-items:center!important;justify-content:flex-start!important;gap:8px 14px!important;
    font-size:13px!important;line-height:1.4!important
  }
  .wrap>.top .nav a,.typing-site-header .nav a{
    flex:0 0 auto!important;white-space:nowrap!important;word-break:keep-all!important;
    overflow-wrap:normal!important;font-size:13px!important
  }
  .wrap>.top .login-link,.typing-site-header .login-link{padding:6px 9px!important}

  /* Let all board destinations wrap into rows; keep the write action below them. */
  .board-head{align-items:flex-start!important;flex-direction:column!important;gap:14px!important}
  .board-heading{width:100%!important;min-width:0!important;flex:0 0 auto!important}
  .board-actions{width:100%!important;max-width:100%!important;min-width:0!important;flex:0 0 auto!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important}
  .board-tabs{width:100%!important;max-width:100%!important;min-width:0!important;flex:0 0 auto!important;
    display:flex!important;flex-wrap:wrap!important;overflow:visible!important;white-space:normal!important;
    justify-content:flex-start!important;align-items:center!important;gap:7px!important;padding:4px 0!important}
  .board-tab{flex:0 0 auto!important;white-space:nowrap!important;padding:7px 9px!important;font-size:12px!important}
  .board-actions .write{align-self:flex-end!important}
}
@media(max-width:420px){
  .wrap>.top,.typing-site-header .top{padding-left:15px!important;padding-right:15px!important}
  .wrap>.top .nav,.typing-site-header .nav{gap:7px 11px!important}
  .wrap>.top .nav a,.typing-site-header .nav a{font-size:12px!important}
  .board-hero{padding:22px 16px!important}
  .board-tab{padding:6px 8px!important;font-size:11px!important}
}

/* Keep the entire typing keyboard in view without sacrificing readable key labels. */
#kb .kr{margin-bottom:3px!important}
#kb .k{height:clamp(34px,5vh,54px)!important}

/* Digital Lounge shared identity and responsive navigation. */
.brand{display:inline-flex!important;align-items:center!important;gap:11px!important;color:#f5f9fe!important;font-size:18px!important;font-weight:750!important;letter-spacing:-.045em!important;text-decoration:none!important}
.brand-mark{position:relative;display:inline-grid;width:32px;height:32px;place-items:center;overflow:hidden;border:1px solid #b8cddb33;border-radius:11px;background:linear-gradient(145deg,#223445,#3c586d);box-shadow:0 5px 14px #09192966;flex:none}
.brand-mark i{position:absolute;display:block;width:12px;height:17px;border:1.5px solid #d3e4ee;border-radius:8px 8px 4px 4px;transform:rotate(-38deg)}
.brand-mark i:nth-child(1){left:6px;top:8px}.brand-mark i:nth-child(2){left:12px;top:5px;opacity:.78}.brand-mark i:nth-child(3){left:16px;top:10px;opacity:.55}
.top{position:relative!important;z-index:30!important}
.nav-toggle{display:none;width:42px;height:42px;place-items:center;border:1px solid #f6f5ef40;border-radius:12px;background:#334451;color:#f5f9fe;cursor:pointer}
.nav-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media(max-width:760px){
  .wrap>.top{position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-height:68px!important;height:auto!important;padding:12px 18px!important}
  .wrap>.top>.brand{min-width:0!important;white-space:nowrap!important;font-size:16px!important}
  .wrap>.top>.nav-toggle{display:grid!important;margin-left:auto!important;flex:none!important}
  .wrap>.top>.nav{position:absolute!important;top:calc(100% - 1px)!important;right:12px!important;left:12px!important;z-index:50!important;display:none!important;max-height:calc(100dvh - 92px)!important;overflow:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;padding:12px!important;border:1px solid #f6f5ef35!important;border-radius:15px!important;background:#2a3843f7!important;box-shadow:0 18px 42px #02132470!important}
  .wrap>.top>.nav.is-open{display:grid!important}
  .wrap>.top>.nav>a{display:flex!important;min-width:0!important;min-height:42px!important;align-items:center!important;padding:0 10px!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#e7ecee!important;font-size:12px!important;white-space:normal!important}
  .wrap>.top>.nav>a:hover,.wrap>.top>.nav>a:focus-visible{background:#f6f5ef12!important;color:#b7d0e1!important}
  .wrap>.top>.nav>.login-link{border:1px solid #f6f5ef40!important}
}
@media(prefers-reduced-motion:reduce){.nav-toggle,.wrap>.top>.nav{scroll-behavior:auto!important;transition:none!important}}

@media(max-width:760px){
  .typing-site-header>.top{position:relative!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-height:68px!important;height:auto!important;padding:12px 18px!important}
  .typing-site-header>.top>.brand{min-width:0!important;white-space:nowrap!important;font-size:16px!important}
  .typing-site-header>.top>.nav-toggle{display:grid!important;margin-left:auto!important;flex:none!important}
  .typing-site-header>.top>.nav{position:absolute!important;top:calc(100% - 1px)!important;right:12px!important;left:12px!important;z-index:50!important;display:none!important;max-height:calc(100dvh - 92px)!important;overflow:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;padding:12px!important;border:1px solid #dde4e735!important;border-radius:15px!important;background:#2a3843f7!important;box-shadow:0 18px 42px #02132470!important}
  .typing-site-header>.top>.nav.is-open{display:grid!important}
  .typing-site-header>.top>.nav>a{display:flex!important;min-width:0!important;min-height:42px!important;align-items:center!important;padding:0 10px!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#e7ecee!important;font-size:12px!important;white-space:normal!important}
  .typing-site-header>.top>.nav>.login-link{border:1px solid #dde4e740!important}
}

/* Board identity sits comfortably beside the Digital Lounge mark. */
.board-hero,.portfolio-mode .board-hero{background:radial-gradient(ellipse at 82% 20%,#a9bdc747,transparent 37%),linear-gradient(120deg,#212f3a,#374b59 62%,#576d7b)!important;border-color:#dce4e836!important}
.board-hero:before,.portfolio-mode .board-hero:before{background:linear-gradient(25deg,#b7c8d218 0 28%,#f6f5ef0d 28% 61%,#94a9b620 61%)!important}
.board-hero:after,.portfolio-mode .board-hero:after{background:#a9bdc7!important;box-shadow:0 0 0 24px #a9bdc722,0 0 55px #859dab55!important}
.board-title-icon{width:46px!important;height:46px!important;border-radius:13px!important;object-fit:contain!important}

/* Messenger palette: calm midnight blue with warm ivory accents. */
.chat-card,.presence-card{background:#162c43!important;border-color:#8497ab70!important;box-shadow:0 20px 48px #0a172455!important}
.chat-top,.presence-top{background:#1e3750!important;border-color:#8497ab55!important;color:#f5f0e4!important}
.room-tabs,.chat-compose{background:#122539!important;border-color:#8497ab55!important}
.room-tab{background:#233e59!important;border-color:#8497ab90!important;color:#e8edf2!important}
.room-tab.active{background:#e8dfca!important;border-color:#e8dfca!important;color:#223548!important}
.messages{background:#152b41!important}
.message-meta,.message-time{color:#c6cfd9!important}
.message-bubble{background:#233c55!important;border-color:#7b91a7!important;color:#f5f2e9!important}
.message-row.mine .message-bubble{background:#e8dfca!important;border-color:#e8dfca!important;color:#273748!important}
.chat-compose textarea{background:#122539!important;border-color:#8395a8!important;color:#f5f2e9!important}
.chat-compose textarea:focus{outline-color:#e8dfca!important}
.chat-compose textarea::placeholder{color:#bec8d1!important}
.send-button,.group-start{background:#e8dfca!important;border-color:#e8dfca!important;color:#273748!important}
.send-button:hover,.group-start:hover{background:#f2ead8!important}
.online-count,.side-section-title{color:#d8dee3!important}
.presence-list li{background:#233c55!important;border-color:#8497ab55!important;color:#f3f1ea!important}
.presence-list li:focus-within,.presence-list li:hover{background:#2c4965!important;border-color:#c7bda8!important}
.member-open:hover,.conversation-open:hover{color:#f0dfb5!important}
.member-select{accent-color:#e8dfca!important}
.conversation-open{background:#233c55!important;border-color:#8497ab80!important;color:#f3f1ea!important}
.conversation-open.active{background:#2e4a66!important;border-color:#e8dfca!important}
.side-help,.chat-empty,.typing-note{color:#c6cfd9!important}
.leave-conversation{border-color:#d7c9ae!important;color:#e8dfca!important}
.conversation-closed-notice{background:#253648!important;border-color:#8497ab55!important;color:#f0dfb5!important}