:root{
  --bg:#FAF6EE; --surface:#FFFFFF; --surface-2:#F3EBDA; --wash:#EFE4CC;
  --text-1:#2A241E; --text-2:#5C5348; --text-3:#948A79;
  --accent:#96703B; --accent-strong:#7A5A2C; --accent-soft:#F1E4C7; --border:#E6DBC3;
  --ok:#4C7A57; --ok-soft:#E3ECE2; --pending:#A9793F; --pending-soft:#F1E4C7;
  --danger:#A4483B; --danger-soft:#F6E3DF;
  --shadow: 0 1px 2px rgba(42,36,30,.05), 0 10px 28px rgba(42,36,30,.07);
}
*{box-sizing:border-box;}
html,body{ height:100%; }
body{ margin:0; background:var(--bg); color:var(--text-1); font-family:'Work Sans',system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.55; }
img,svg{ max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--accent-soft); }
.mono{ font-family:'IBM Plex Mono',monospace; }
[hidden]{ display:none !important; }

/* estado de salvamento */
.save-state{ position:fixed; top:14px; right:14px; z-index:50; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; background:var(--text-1); color:var(--bg); padding:7px 12px; border-radius:999px; box-shadow:var(--shadow); opacity:0; transform:translateY(-4px); transition:opacity .2s, transform .2s; pointer-events:none; }
.save-state.show{ opacity:1; transform:none; }
.save-state.err{ background:var(--danger); }

/* login */
#login{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 20px;
  background: radial-gradient(1200px 600px at 15% -10%, #FBF3E1 0%, transparent 60%), radial-gradient(900px 500px at 110% 10%, #F4E6C8 0%, transparent 55%), var(--bg); }
.login-card{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:38px 34px 30px; box-shadow:0 1px 3px rgba(42,36,30,.06), 0 24px 60px rgba(42,36,30,.12); text-align:center; }
.login-mark{ width:46px; height:46px; margin:0 auto 16px; border-radius:12px; background:linear-gradient(155deg,#D8B989,#96703B); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(150,112,59,.35); }
.login-mark svg{ width:22px; height:22px; color:#fff; }
.login-card h1{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:26px; margin:0 0 2px; }
.login-card .sub{ font-size:12.5px; color:var(--text-3); font-family:'IBM Plex Mono',monospace; letter-spacing:.04em; text-transform:uppercase; margin-bottom:26px; }
.field{ text-align:left; margin-bottom:14px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:6px; }
.field input, .field select{ width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:10px; background:var(--bg); font-size:14.5px; color:var(--text-1); font-family:inherit; }
.field input:focus, .field select:focus, textarea:focus, .story-field input:focus{ outline:2px solid var(--accent-soft); outline-offset:1px; border-color:var(--accent); }
.login-btn{ width:100%; padding:12px; border:none; border-radius:10px; background:var(--accent-strong); color:#fff; font-size:14.5px; font-weight:600; margin-top:6px; }
.login-btn:hover{ background:var(--accent); }
.login-btn:disabled{ opacity:.6; cursor:wait; }
.login-forgot{ display:block; margin:14px auto 0; font-size:12.5px; color:var(--text-3); background:none; border:none; text-decoration:underline; }
.login-note{ margin-top:24px; padding-top:16px; border-top:1px solid var(--border); font-size:11.5px; color:var(--text-3); line-height:1.6; }
.msg{ font-size:12.5px; border-radius:9px; padding:9px 12px; margin-bottom:12px; text-align:left; }
.msg.err{ background:var(--danger-soft); color:var(--danger); }
.msg.ok{ background:var(--ok-soft); color:var(--ok); }
.msg.info{ background:var(--surface-2); color:var(--text-2); }

/* app */
#app{ display:none; min-height:100vh; }
#app.on{ display:flex; }
.sidebar{ width:236px; flex:none; background:var(--surface); border-right:1px solid var(--border); padding:22px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand{ display:flex; align-items:center; gap:10px; padding:0 6px 20px; margin-bottom:14px; border-bottom:1px solid var(--border); }
.brand .mark{ width:30px; height:30px; border-radius:8px; background:linear-gradient(155deg,#D8B989,#96703B); flex:none; }
.brand .name{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:18px; line-height:1.1; }
.brand .name small{ display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); font-weight:600; margin-top:2px; }
.nav{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.nav button{ display:flex; align-items:center; gap:11px; text-align:left; border:none; background:none; color:var(--text-2); padding:9px 10px; border-radius:9px; font-size:13.5px; font-weight:500; width:100%; }
.nav button svg{ width:17px; height:17px; flex:none; opacity:.75; }
.nav button:hover{ background:var(--surface-2); color:var(--text-1); }
.nav button.active{ background:var(--accent-soft); color:var(--accent-strong); font-weight:600; }
.nav button.active svg{ opacity:1; }
.sidebar-foot{ border-top:1px solid var(--border); padding-top:14px; margin-top:10px; }
.couple-chip{ display:flex; align-items:center; gap:9px; padding:6px; }
.couple-chip .av{ width:30px; height:30px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-weight:600; color:var(--accent-strong); font-size:13px; flex:none; }
.couple-chip .who{ font-size:12.5px; font-weight:600; color:var(--text-1); line-height:1.2; min-width:0; }
.couple-chip .who small{ display:block; font-weight:400; color:var(--text-3); font-size:11px; }
.logout{ margin:8px 6px 0; width:calc(100% - 12px); border:1px solid var(--border); background:transparent; color:var(--text-2); padding:7px; border-radius:8px; font-size:12px; font-weight:600; }
.logout:hover{ background:var(--surface-2); }
.main{ flex:1; min-width:0; padding:34px 44px 60px; max-width:960px; }
@media (max-width:860px){
  .sidebar{ width:76px; padding:18px 10px; }
  .brand .name, .nav button span, .couple-chip .who{ display:none; }
  .brand{ justify-content:center; }
  .nav button{ justify-content:center; }
  .main{ padding:26px 18px 60px; }
}
.view{ display:none; }
.view.active{ display:block; animation:fade .25s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.view-head{ margin-bottom:24px; }
.eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.view-head h1{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:32px; margin:0 0 4px; }
.view-head .sub{ color:var(--text-3); font-size:14px; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); }
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px; }
.pill.ok{ background:var(--ok-soft); color:var(--ok); }
.pill.pending{ background:var(--pending-soft); color:var(--pending); }
.pill.muted{ background:var(--surface-2); color:var(--text-3); }
.pill.danger{ background:var(--danger-soft); color:var(--danger); }
.progress{ height:6px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.progress i{ display:block; height:100%; background:linear-gradient(90deg,#C9A465,#96703B); border-radius:999px; transition:width .3s; }

/* Início */
.countdown-card{ padding:26px 28px; background:linear-gradient(155deg,#FBF3E1,#F3E6C8); border:1px solid var(--border); }
.countdown-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.countdown-num{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:700; font-size:64px; line-height:1; color:var(--accent-strong); }
.countdown-label{ font-size:13px; color:var(--text-2); margin-top:2px; }
.countdown-date{ text-align:right; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-2); }
.milestones{ display:flex; gap:6px; margin-top:20px; flex-wrap:wrap; }
.ms{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; padding:5px 9px; border-radius:7px; background:rgba(255,255,255,.55); color:var(--text-3); border:1px solid rgba(150,112,59,.18); }
.ms.done{ color:var(--ok); }
.ms.next{ background:var(--accent-strong); color:#fff; border-color:var(--accent-strong); }
.hist-card{ display:block; width:100%; text-align:left; padding:22px 24px; margin-top:14px; border:1px solid var(--border); color:inherit; }
.hist-card .row{ display:flex; justify-content:space-between; align-items:baseline; }
.hist-card .t{ font-size:14px; font-weight:600; }
.hist-card .pct{ font-size:13px; color:var(--accent-strong); font-weight:600; }
.hist-card .progress{ margin-top:12px; }
.hist-card .hint{ font-size:12px; color:var(--text-3); margin-top:10px; }

/* Nossa História / Música */
.hist-quote{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:19px; line-height:1.5; color:var(--text-2); margin-bottom:22px; max-width:640px; }
.hist-section{ margin-bottom:30px; }
.hist-section h2{ font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; font-weight:600; margin:0 0 4px; }
.hist-section .hd{ font-size:12.5px; color:var(--text-3); margin-bottom:16px; }
.story-field{ margin-bottom:16px; }
.story-field .q{ font-size:14px; margin-bottom:4px; font-weight:500; }
.story-field .hint{ font-size:12px; color:var(--text-3); margin-bottom:8px; }
.story-field textarea, .story-field input{ width:100%; font-family:inherit; font-size:13.5px; color:var(--text-1); background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; resize:vertical; }
.prog-card{ padding:18px 22px; }

/* Destaques de Nossa História (curados pela equipe) */
.highlight{ background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-bottom:10px; overflow:hidden; }
.highlight summary{ list-style:none; cursor:pointer; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:'Cormorant Garamond',Georgia,serif; font-size:17px; font-weight:600; }
.highlight summary::-webkit-details-marker{ display:none; }
.highlight summary svg{ width:16px; height:16px; color:var(--text-3); transition:transform .15s; flex:none; }
.highlight[open] summary svg{ transform:rotate(180deg); }
.highlight-body{ padding:0 18px 16px; font-size:13.5px; color:var(--text-2); line-height:1.6; white-space:pre-wrap; }

/* Sugestões de tópicos em Nossa Música */
.music-suggestions-box{ margin:4px 0 20px; }
.music-suggestions-box .tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-strong); font-weight:600; margin-bottom:8px; }
.music-suggestions{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; counter-reset:ms; }
.music-suggestions li{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--text-2); counter-increment:ms; }
.music-suggestions li::before{ content:counter(ms); font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:11px; color:var(--accent); background:var(--accent-soft); border-radius:50%; width:19px; height:19px; flex:none; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.prog-card .row{ display:flex; justify-content:space-between; font-size:12px; color:var(--text-3); margin-bottom:8px; }
.music-block{ background:linear-gradient(155deg,#FBF3E1,#F3E6C8); border:1px solid var(--border); border-radius:14px; padding:22px 24px; }
.music-block .tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-strong); font-weight:600; margin-bottom:6px; }
.music-block p.expl{ font-size:12.5px; color:var(--text-2); margin:2px 0 16px; }
.audio-card{ padding:20px 22px; display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.audio-card .ic{ width:44px; height:44px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex:none; }
.audio-card .ic svg{ width:18px; height:18px; color:var(--accent-strong); }
.audio-card.rec .ic{ background:var(--danger-soft); }
.audio-card.rec .ic svg{ color:var(--danger); }
.audio-card .grow{ flex:1; min-width:0; }
.audio-card .t{ font-weight:600; font-size:13.5px; }
.audio-card .d{ font-size:12px; color:var(--text-3); }
.audio-list{ margin-bottom:18px; display:flex; flex-direction:column; gap:8px; }
.audio-item{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:11px; flex-wrap:wrap; }
.audio-item .t{ font-size:13px; font-weight:600; }
.audio-item .d{ font-size:12px; color:var(--text-3); }
.audio-item audio{ width:100%; height:34px; }
.btn-ghost{ border:1px solid var(--border); background:transparent; color:var(--text-1); padding:8px 14px; border-radius:8px; font-size:12.5px; font-weight:600; }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-solid{ border:none; background:var(--accent-strong); color:#fff; padding:8px 14px; border-radius:8px; font-size:12.5px; font-weight:600; }
.btn-solid:hover{ background:var(--accent); }
.btn-danger{ border:1px solid var(--danger); background:transparent; color:var(--danger); padding:8px 14px; border-radius:8px; font-size:12.5px; font-weight:600; }
.btn-danger:hover{ background:var(--danger-soft); }
button:disabled{ opacity:.45; cursor:not-allowed; }
a.btn-ghost, a.btn-solid{ text-decoration:none; display:inline-block; }

/* Guia */
.ebook-card{ display:flex; gap:20px; padding:24px; align-items:center; }
.ebook-cover{ width:96px; height:128px; border-radius:8px; background:linear-gradient(155deg,#E2CDA1,#96703B); flex:none; box-shadow:var(--shadow); }
.ebook-info h3{ font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; margin:0 0 4px; }
.ebook-info p{ font-size:13px; color:var(--text-3); margin:0 0 14px; }

/* Referências */
.add-ref{ display:flex; gap:10px; margin-bottom:10px; }
.add-ref input{ flex:1; padding:11px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); font-size:13.5px; font-family:inherit; }
.add-ref button{ border:none; background:var(--accent-strong); color:#fff; padding:0 18px; border-radius:10px; font-size:13px; font-weight:600; }
.add-ref-hint{ font-size:12px; color:var(--text-3); margin:0 0 18px; }
.moodboard{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
@media (max-width:700px){ .moodboard{ grid-template-columns:repeat(2,1fr); } }
.mood-card{ border-radius:13px; overflow:hidden; border:1px solid var(--border); background:var(--surface); }
.mood-img{ aspect-ratio:4/3; display:flex; align-items:flex-end; padding:10px; }
.mood-img .host{ font-family:'IBM Plex Mono',monospace; font-size:11px; background:rgba(255,255,255,.8); padding:3px 8px; border-radius:6px; color:var(--text-2); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mood-card .cap{ padding:9px 11px; font-size:12px; color:var(--text-2); font-weight:500; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.mood-card .cap a{ color:var(--accent-strong); font-weight:600; text-decoration:none; }
.fav{ color:var(--text-3); font-size:16px; background:none; border:none; padding:0 2px; }
.fav.on{ color:var(--accent-strong); }
.ref-cat-nav{ margin-bottom:10px; }
.back-link{ display:inline-block; background:none; border:none; color:var(--accent-strong); font-size:13px; font-weight:600; cursor:pointer; padding:0; margin-bottom:6px; }
.cover-card{
  position:relative; border-radius:13px; overflow:hidden; border:1px solid var(--border);
  aspect-ratio:4/3; cursor:pointer; display:flex; align-items:flex-end;
  background-size:cover; background-position:center; background-color:var(--surface);
}
.cover-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(30,20,10,.72) 0%, rgba(30,20,10,.12) 55%, rgba(30,20,10,0) 100%);
}
.cover-card .cover-label{ position:relative; z-index:1; padding:10px 12px; color:#fff; width:100%; }
.cover-card .cover-label .name{ font-weight:700; font-size:14px; }
.cover-card .cover-label .count{ font-size:11.5px; opacity:.9; }
.sec-title{ font-family:'Cormorant Garamond',Georgia,serif; font-size:19px; margin:0 0 10px; }
.empty{ font-size:13px; color:var(--text-3); font-style:italic; padding:6px 0 18px; }

/* Evento / Contrato */
.evento-group{ margin-bottom:26px; }
.evento-group h2{ font-family:'Cormorant Garamond',Georgia,serif; font-size:19px; margin:0 0 10px; letter-spacing:.02em; }
.evento-item{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--border); font-size:13.5px; }
.evento-item:first-child{ border-top:none; }
.evento-item svg{ width:15px; height:15px; color:var(--ok); flex:none; }
.evento-item .box{ width:15px; height:15px; flex:none; }
.evento-item.off{ color:var(--text-3); }
.contract-card{ padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.contract-card .t{ font-weight:600; font-size:14.5px; }
.contract-card .d{ font-size:12.5px; color:var(--text-3); margin-top:2px; }

/* Acompanhamento */
.acomp-block{ padding:20px 22px; margin-bottom:14px; }
.acomp-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.acomp-head h3{ font-family:'Cormorant Garamond',Georgia,serif; font-size:19px; margin:0; }
.stage-track{ display:flex; gap:4px; margin:12px 0 10px; }
.stage-track i{ height:5px; flex:1; border-radius:4px; background:var(--surface-2); }
.stage-track i.done{ background:var(--ok); }
.stage-track i.now{ background:var(--accent-strong); }
.acomp-current{ font-size:14px; color:var(--text-1); font-weight:600; }
.acomp-desc{ font-size:12.5px; color:var(--text-3); margin-top:3px; }

/* Entrega */
.entrega{ padding:20px 22px; margin-bottom:14px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.entrega .ic{ width:40px; height:40px; border-radius:10px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex:none; }
.entrega .ic svg{ width:19px; height:19px; color:var(--accent-strong); }
.entrega .t{ font-weight:600; font-size:14.5px; }
.entrega .d{ font-size:12px; color:var(--text-3); margin-top:2px; }
.entrega .actions{ margin-left:auto; display:flex; gap:8px; }
.notice{ padding:16px 20px; font-size:13px; color:var(--text-2); }

/* Admin */
.admin-wrap{ max-width:1000px; margin:0 auto; padding:30px 20px 80px; }
.admin-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
.admin-top h1{ font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:30px; margin:0; }
.admin-top .who{ font-size:12px; color:var(--text-3); }
.row-flex{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:700px){ .grid-2{ grid-template-columns:1fr; } }
.panel{ padding:20px 22px; margin-bottom:16px; }
.panel h2{ font-family:'Cormorant Garamond',Georgia,serif; font-size:20px; margin:0 0 12px; }
.couple-row{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-top:1px solid var(--border); flex-wrap:wrap; }
.couple-row:first-child{ border-top:none; }
.couple-row .grow{ flex:1; min-width:180px; }
.couple-row .t{ font-weight:600; }
.couple-row .d{ font-size:12px; color:var(--text-3); }
.reminders{ border-color:var(--pending); border-width:1px; }
.reminders h2{ display:flex; align-items:center; gap:8px; }
.reminder-row{ display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-top:1px solid var(--border); flex-wrap:wrap; }
.reminder-row:first-of-type{ border-top:none; padding-top:4px; }
.reminder-row .grow{ flex:1; min-width:220px; }
.reminder-row .t{ font-weight:600; margin-bottom:6px; }
.reminder-row .t .mono{ color:var(--pending); font-size:11px; }
.reminder-text{ font-size:13px; color:var(--text-2); background:var(--surface-2); border-radius:10px; padding:10px 12px; line-height:1.5; }
.checks-group{ margin:8px 0 14px; }
.checks-group:last-child{ margin-bottom:0; }
.checks-group-label{ font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.checks{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 16px; margin:0; }
@media (max-width:640px){ .checks{ grid-template-columns:repeat(2,1fr); } }
.checks label{ display:flex; gap:8px; align-items:center; font-size:13px; line-height:1.3; cursor:pointer; }
.checks input[type=checkbox]{ accent-color:var(--accent-strong); width:16px; height:16px; margin:0; flex:none; cursor:pointer; }
.cover-inputs{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 16px; margin:8px 0 14px; }
@media (max-width:640px){ .cover-inputs{ grid-template-columns:1fr; } }
.qa{ border-top:1px solid var(--border); padding:12px 0; }
.qa:first-child{ border-top:none; }
.qa .q{ font-size:12px; color:var(--text-3); margin-bottom:4px; }
.qa .a{ font-size:13.5px; white-space:pre-wrap; }
.qa .a.none{ color:var(--text-3); font-style:italic; }
.stage-row{ display:flex; gap:10px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.stage-row label{ min-width:120px; font-size:13px; font-weight:600; }
.stage-row select, .stage-row input[type=url], .stage-row input[type=text]{ padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg); font-family:inherit; font-size:13px; }
.stage-row input[type=url]{ flex:1; min-width:180px; }
.stage-row textarea{ padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg); font-family:inherit; font-size:13px; resize:vertical; }