*{box-sizing:border-box}body{margin:0;background:#0e1119;color:#f4f4f4;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}.site-header{height:82px;border-bottom:1px solid #202532;display:flex;align-items:center;justify-content:space-between;padding:0 6vw}.brand{display:flex;align-items:center;gap:12px}.brand strong{display:block;font-size:22px}.brand span{display:block;color:#d6a318;font-size:11px;letter-spacing:4px;margin-top:3px}.crest{width:48px;height:48px;border:1px solid #d6a318;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#d6a318;font-family:Georgia,serif;font-weight:700}.back-site{color:#c5c7ce;text-decoration:none}.wrap{max-width:1050px;margin:0 auto;padding:72px 24px 90px}.eyebrow{color:#d6a318;letter-spacing:5px;font-size:12px;font-weight:700;text-align:center}.hero{text-align:center;margin-bottom:42px}.hero h1{font-size:44px;margin:14px 0}.hero p{color:#aeb2bd;max-width:650px;margin:0 auto;line-height:1.6}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.card{border:1px solid #666d7b;border-radius:16px;background:#151923;padding:28px}.card h2{margin-top:0}.field{margin:18px 0}.field label{display:block;color:#c4c7cf;margin-bottom:8px;font-size:14px;font-weight:600}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border-radius:10px;border:1px solid #313747;background:#10141d;color:#fff;font:inherit}.field textarea{min-height:130px;resize:vertical}.btn{display:inline-block;border:0;border-radius:999px;background:#e0ab18;color:#111;padding:12px 22px;font-weight:800;cursor:pointer;text-decoration:none}.btn.secondary{background:transparent;border:1px solid #606777;color:#fff}.btn.danger{background:transparent;border:1px solid #9c4242;color:#ffb6b6}.actions{display:flex;gap:10px;flex-wrap:wrap}.flash{background:#1e2d21;border:1px solid #3c7048;padding:14px 18px;border-radius:10px;margin-bottom:22px}.error{background:#321d1d;border:1px solid #7b3c3c;padding:14px 18px;border-radius:10px;margin-bottom:22px;color:#ffd0d0}.tabs{display:flex;gap:24px;border-bottom:1px solid #444b59;margin-bottom:25px}.tabs a{color:#aaa;text-decoration:none;padding:0 0 12px}.tabs a.active{color:#e0ab18;border-bottom:2px solid #e0ab18}.item{border:1px solid #454b58;border-radius:14px;padding:20px;margin:15px 0;background:#151923}.meta{color:#9096a3;font-size:13px}.item h3{margin:0 0 7px}.toprow{display:flex;justify-content:space-between;gap:20px;align-items:center}.file-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #2a303c}.file-row:last-child{border-bottom:0}.small{font-size:13px;color:#9fa5b1}footer{text-align:center;color:#757b87;border-top:1px solid #202532;padding:28px 20px;font-size:13px}@media(max-width:760px){.grid{grid-template-columns:1fr}.hero h1{font-size:36px}.site-header{padding:0 20px}.back-site{font-size:13px}.wrap{padding-top:45px}.toprow{align-items:flex-start;flex-direction:column}}

/* ===== Co-Writing Workspace v2 ===== */
.workspace-top,
.workspace-song-head{margin-bottom:22px}

.admin-utility-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.7fr);
  gap:20px;
  margin-bottom:34px
}

.song-list{display:flex;flex-direction:column;gap:10px}
.song-choice{
  display:flex;
  flex-direction:column;
  gap:4px;
  border:1px solid #343b49;
  border-radius:10px;
  padding:12px 14px;
  text-decoration:none;
  color:#f4f4f4;
  background:#10141d
}
.song-choice span{font-size:12px;color:#9198a5}
.song-choice.active{
  border-color:#d6a318;
  box-shadow:0 0 0 1px rgba(214,163,24,.25)
}

.writer-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(330px,390px);
  gap:18px;
  align-items:stretch;
  margin-top:18px
}

.writer-column,
.chat-panel{
  border:1px solid #454b58;
  border-radius:15px;
  background:#121720;
  overflow:hidden
}

.writer-column{
  padding:18px;
  min-width:0
}

.writer-column-head,
.chat-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid #303643;
  padding-bottom:14px;
  margin-bottom:15px
}

.writer-column-head h2,
.chat-head h2{
  margin:3px 0 0;
  font-size:21px
}

.writer-label{
  color:#d6a318;
  letter-spacing:2px;
  font-size:10px;
  font-weight:800
}

.owner-pill{
  display:inline-block;
  white-space:nowrap;
  border:1px solid #856b18;
  color:#e7bb3a;
  background:#211d10;
  border-radius:999px;
  padding:5px 9px;
  font-size:11px
}

.read-only-pill{
  border-color:#49505d;
  color:#a9aeb8;
  background:#171b23
}

.writer-form{
  display:flex;
  flex-direction:column;
  min-height:625px
}

.compact-field{margin:0 0 13px}
.small-note{min-height:82px!important}

.lyric-field{
  display:flex;
  flex:1;
  flex-direction:column
}

.lyrics-editor{
  min-height:500px!important;
  flex:1;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important;
  line-height:1.6!important;
  font-size:15px!important
}

.lyrics-readonly{
  min-height:625px;
  white-space:pre-wrap;
  overflow:auto;
  background:#0e1219;
  border:1px solid #2c323e;
  border-radius:10px;
  padding:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  line-height:1.6;
  font-size:15px;
  color:#edf0f5
}

.writer-note{
  border:1px solid #333a47;
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:14px;
  background:#10141c
}
.writer-note p{margin-bottom:0}

.original-files{
  border-top:1px solid #303643;
  margin-top:18px;
  padding-top:14px
}
.original-files h3{font-size:14px}
.mini-file{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid #262c37;
  padding:9px 0;
  font-size:12px
}
.mini-file a{color:#e0ab18}

.chat-panel{
  height:760px;
  display:flex;
  flex-direction:column;
  padding:16px
}

.chat-head{flex:0 0 auto}

.chat-thread{
  flex:1 1 auto;
  overflow-y:auto;
  padding:2px 3px 12px;
  display:flex;
  flex-direction:column;
  gap:11px;
  scrollbar-width:thin
}

.chat-empty{
  color:#858c99;
  font-size:13px;
  text-align:center;
  padding:35px 15px
}

.chat-message{
  max-width:92%;
  border-radius:13px;
  padding:10px 11px;
  border:1px solid #343b47
}

.chat-mine{
  align-self:flex-end;
  background:#211c0f;
  border-color:#6b5717
}

.chat-other{
  align-self:flex-start;
  background:#181d27
}

.chat-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#939aa7;
  font-size:10px;
  margin-bottom:6px
}
.chat-meta strong{color:#e3b22a}
.chat-text{
  white-space:pre-wrap;
  line-height:1.45;
  font-size:13px
}

.chat-attachment{
  margin-top:9px;
  border:1px solid #303744;
  border-radius:9px;
  background:#0e1219;
  padding:9px
}

.chat-file-name{
  overflow-wrap:anywhere;
  font-size:11px;
  font-weight:700;
  margin-bottom:7px
}

.chat-attachment audio{
  width:100%;
  height:32px;
  display:block;
  margin:5px 0 8px
}

.chat-download{
  display:inline-block;
  color:#e5b525;
  font-size:11px;
  text-decoration:none;
  font-weight:700
}

.chat-compose{
  flex:0 0 auto;
  border-top:1px solid #303643;
  padding-top:12px
}

.chat-compose textarea{
  width:100%;
  min-height:82px;
  resize:vertical;
  border:1px solid #303744;
  background:#0e1219;
  color:#fff;
  border-radius:10px;
  padding:11px;
  font:inherit
}

.attach-button{
  display:inline-block;
  margin-top:9px;
  border:1px solid #505866;
  border-radius:999px;
  padding:7px 11px;
  cursor:pointer;
  font-size:11px;
  font-weight:700
}

.attach-button input{
  position:absolute;
  left:-9999px
}

.chat-file-help{
  color:#7f8693;
  font-size:10px;
  margin:6px 0 9px
}

.chat-send{width:100%}
.delete-submission{margin-top:28px}

@media(max-width:1180px){
  .writer-workspace{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }
  .chat-panel{
    grid-column:1 / -1;
    height:560px
  }
}

@media(max-width:760px){
  .admin-utility-grid,
  .writer-workspace{
    grid-template-columns:1fr
  }
  .lyrics-readonly,
  .lyrics-editor{
    min-height:420px!important
  }
  .writer-form{min-height:0}
  .chat-panel{
    grid-column:auto;
    height:560px
  }
}


.copy-side-form{
  margin-top:14px
}
.copy-side-btn{
  width:100%
}


/* ===== Workspace proportion refinement v4 =====
   Keep normal portal pages at their existing width.
   Only co-writing pages expand across more of the screen.
*/
body:has(.writer-workspace) .wrap{
  max-width:1450px;
}

/* Lyrics get the majority of the horizontal space.
   Chat becomes a narrower right-hand sidebar.
*/
.writer-workspace{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(270px,310px);
}

/* Keep the chat compact while still tall enough for a useful history. */
.chat-panel{
  height:760px;
}

/* Give lyric panes a little more breathing room on the wider layout. */
.writer-column{
  padding:20px;
}

/* Collapse sooner on smaller laptop/tablet screens so nothing feels cramped. */
@media(max-width:1250px){
  body:has(.writer-workspace) .wrap{
    max-width:1150px;
  }

  .writer-workspace{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }

  .chat-panel{
    grid-column:1 / -1;
    height:520px;
  }
}


/* ===== Soft Cream Theme v5 =====
   User-selected background: #F7EDC8
   High-contrast controls: black buttons with gold/white text.
*/
:root{
  --cream-page:#F7EDC8;
  --cream-card:#FFF9E8;
  --cream-input:#FFFDF6;
  --cream-deep:#EFE0A9;
  --ink:#171717;
  --ink-soft:#4B463B;
  --line:#746B59;
  --black:#111317;
  --black-2:#1C1F25;
  --gold:#D6A318;
  --gold-bright:#F0BE24;
  --danger:#8B2525;
}

body{
  background:var(--cream-page);
  color:var(--ink);
}

.site-header{
  background:var(--black);
  border-bottom:1px solid #2A2E36;
  color:#F6F6F6;
}

.site-header .brand strong{color:#F6F6F6}
.site-header .brand span,
.crest{color:var(--gold-bright);border-color:var(--gold)}
.back-site{color:#ECECEC}
.back-site:hover{color:var(--gold-bright)}

.wrap{
  color:var(--ink);
}

.hero p,
.meta,
.small{
  color:var(--ink-soft);
}

.eyebrow,
.writer-label{
  color:#775800;
}

/* General cards and records */
.card,
.item{
  background:var(--cream-card);
  color:var(--ink);
  border-color:#6F6758;
  box-shadow:0 2px 8px rgba(42,34,12,.08);
}

.card h1,.card h2,.card h3,
.item h1,.item h2,.item h3{
  color:var(--ink);
}

/* Forms: light fields, strong dark text */
.field label{
  color:#2C2923;
}

.field input,
.field textarea,
.field select,
.chat-compose textarea,
select{
  background:var(--cream-input);
  color:#151515;
  border-color:#756D5E;
}

.field input::placeholder,
.field textarea::placeholder,
.chat-compose textarea::placeholder{
  color:#777066;
}

/* Buttons: deliberately dark for strong contrast */
.btn{
  background:var(--black);
  color:var(--gold-bright);
  border:1px solid var(--black);
  box-shadow:none;
}

.btn:hover{
  background:#292C32;
  color:#FFD85B;
}

.btn.secondary{
  background:var(--black);
  border:1px solid var(--black);
  color:#FFFFFF;
}

.btn.secondary:hover{
  background:#292C32;
  color:#FFFFFF;
}

.btn.danger{
  background:var(--danger);
  border:1px solid var(--danger);
  color:#FFFFFF;
}

.btn.danger:hover{
  background:#A72E2E;
  color:#FFFFFF;
}

/* Tabs and links */
.tabs{
  border-bottom-color:#988D76;
}
.tabs a{color:#4F493E}
.tabs a.active{
  color:#5F4600;
  border-bottom-color:#8C6800;
}

.file-row{
  border-bottom-color:#B7AA8E;
}

a{
  text-underline-offset:2px;
}

/* Co-writing workspace */
.writer-column,
.chat-panel{
  background:var(--cream-card);
  color:var(--ink);
  border-color:#554F44;
  box-shadow:0 2px 8px rgba(42,34,12,.08);
}

.writer-column-head,
.chat-head{
  border-bottom-color:#B6AA90;
}

.writer-column-head h2,
.chat-head h2{
  color:var(--ink);
}

.owner-pill{
  background:var(--black);
  color:var(--gold-bright);
  border-color:var(--black);
}

.read-only-pill{
  background:#34363B;
  color:#FFFFFF;
  border-color:#34363B;
}

.writer-note{
  background:#F4E8BD;
  border-color:#9A8E72;
  color:var(--ink);
}

.writer-note strong{color:#151515}

.lyrics-readonly{
  background:var(--cream-input);
  border-color:#71695A;
  color:#171717;
}

.lyrics-editor{
  background:var(--cream-input)!important;
  color:#171717!important;
  border-color:#71695A!important;
}

.original-files{
  border-top-color:#B8AC91;
}

.original-files h3{color:#171717}

.mini-file{
  border-top-color:#C0B397;
  color:#171717;
}

.mini-file a,
.chat-download{
  color:#5E4500;
  font-weight:800;
}

/* Chat */
.chat-panel{
  background:#F5E9C1;
}

.chat-empty{
  color:#625B4E;
}

.chat-message{
  border-color:#7D735F;
}

.chat-mine{
  background:var(--black);
  border-color:var(--black);
  color:#FFFFFF;
}

.chat-mine .chat-meta strong{
  color:var(--gold-bright);
}
.chat-mine .chat-meta span{
  color:#D7D7D7;
}

.chat-other{
  background:#FFFDF6;
  color:#171717;
  border-color:#8E836D;
}

.chat-other .chat-meta strong{
  color:#6B4F00;
}
.chat-other .chat-meta span{
  color:#625B4E;
}

.chat-attachment{
  background:#FFF9E8;
  border-color:#857A65;
  color:#171717;
}

.chat-compose{
  border-top-color:#B1A589;
}

.attach-button{
  background:var(--black);
  color:#FFFFFF;
  border-color:var(--black);
}

.attach-button:hover{
  background:#292C32;
}

.chat-file-help{
  color:#5D574C;
}

/* Song selection area now below workspace */
.admin-below-workspace{
  margin-top:46px;
  padding-top:8px;
}

.section-divider-title{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
  color:#5D4500;
  font-weight:800;
  letter-spacing:2px;
  font-size:11px;
}

.section-divider-title::before,
.section-divider-title::after{
  content:"";
  height:1px;
  background:#9D9178;
  flex:1;
}

.admin-below-workspace .admin-utility-grid{
  margin-bottom:0;
}

.song-choice{
  background:#FFFDF6;
  color:#171717;
  border-color:#807662;
}

.song-choice span{
  color:#625B50;
}

.song-choice.active{
  background:#F2E1A5;
  border-color:#3E392E;
  box-shadow:0 0 0 1px rgba(62,57,46,.18);
}

footer{
  color:#625C50;
  border-top-color:#A79B82;
}

/* Status messages remain high-contrast. */
.flash{
  background:#E3F0D8;
  color:#173516;
  border-color:#66815E;
}

.error{
  background:#F7DADA;
  color:#6B1111;
  border-color:#A35B5B;
}

/* Keep the wide lyric-first proportions selected earlier. */
body:has(.writer-workspace) .wrap{
  max-width:1450px;
}

.writer-workspace{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(270px,310px);
}

/* Mobile/tablet */
@media(max-width:1250px){
  body:has(.writer-workspace) .wrap{
    max-width:1150px;
  }
  .writer-workspace{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .chat-panel{
    grid-column:1 / -1;
  }
}

@media(max-width:760px){
  .writer-workspace,
  .admin-utility-grid{
    grid-template-columns:1fr;
  }
}