:root { --ink:#312925; --muted:#7d716b; --line:#e5ddd8; --paper:#fffdf9; --accent:#8d583f; --accent2:#385f65; --danger:#b23d3d; --bg:#f3efeb; }
* { box-sizing: border-box; }
html,body { margin:0; min-height:100%; color:var(--ink); background:var(--bg); font-family:Inter,"Segoe UI",Arial,sans-serif; }
a { color:var(--accent); }
button,input,select,textarea { font:inherit; }
.auth-page { display:grid; min-height:100vh; place-items:center; padding:24px; background:radial-gradient(circle at top,#fffaf1 0,#eee6df 70%); }
.auth-card { width:min(430px,100%); padding:36px; border:1px solid rgba(111,77,58,.14); border-radius:18px; background:rgba(255,255,255,.92); box-shadow:0 20px 70px rgba(74,50,39,.13); }
.auth-card h1 { margin:3px 0 9px; font-family:Georgia,serif; font-size:29px; }.auth-card p { color:var(--muted); line-height:1.55; }
.eyebrow { margin:0!important; color:var(--accent)!important; font-size:11px; font-weight:800; letter-spacing:.16em; }
label { display:block; margin:16px 0; color:#51443d; font-size:13px; font-weight:700; }
input,select,textarea { width:100%; margin-top:6px; border:1px solid var(--line); border-radius:9px; padding:11px 12px; background:#fff; outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(141,88,63,.12); }
.button { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:9px; padding:11px 16px; background:var(--accent); color:#fff; text-decoration:none; font-weight:700; cursor:pointer; }
.button:hover { filter:brightness(.95); }.button:disabled { opacity:.58; cursor:wait; }.button.wide { width:100%; }.button.compact { padding:8px 12px; font-size:13px; }
.button.secondary { border:1px solid #c8b8ae; background:#fff; color:#59453c; }.button.ghost { background:transparent; color:var(--danger); }
.muted { color:var(--muted); font-size:12px; }.notice { margin:15px 0; border-radius:8px; padding:11px 13px; background:#eef4f3; color:#31575a; font-size:13px; line-height:1.45; }.notice.success { background:#e8f4ed;color:#23613e; }.notice.danger { background:#fbeaea;color:#962d2d; }
.admin-bar { position:sticky; z-index:30; top:0; min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:9px 18px; border-bottom:1px solid var(--line); background:rgba(255,253,249,.96); box-shadow:0 3px 15px rgba(51,38,32,.06); }
.admin-bar>div { display:flex; align-items:center; gap:12px; }.admin-bar nav { display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.save-state { border-radius:999px; padding:4px 9px; background:#edf4f0; color:#3d6a55; font-size:11px; }.save-state.error { background:#f9e7e7;color:var(--danger); }
.nav-button,.nav-link { border:0; border-radius:8px; padding:8px 10px; background:transparent; color:#62534c; text-decoration:none; font-size:13px; cursor:pointer; }.nav-button:hover,.nav-button.active,.nav-link:hover { background:#eee6df; color:#45342c; }.danger-link { color:var(--danger); }
.editor-help { position:relative; z-index:2; padding:8px 15px; background:#385f65; color:#fff; text-align:center; font-size:12px; line-height:1.4; }
.preview-stage { height:calc(100vh - 94px); overflow:auto; padding:22px; }.preview-shell { min-height:640px; height:auto; margin:0 auto; overflow:visible; border-radius:12px; background:#fff; box-shadow:0 10px 35px rgba(52,40,34,.15); transition:width .2s; }
.preview-shell.desktop { width:min(960px,100%); }.preview-shell.mobile { width:min(420px,100%); }.preview-shell iframe { display:block; width:100%; min-height:640px; height:640px; border:0; border-radius:12px; }
.modal[hidden] { display:none; }.modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; }.modal-backdrop { position:absolute; inset:0; background:rgba(25,21,19,.7); backdrop-filter:blur(3px); }
.modal-card { position:relative; z-index:1; width:min(840px,100%); max-height:calc(100vh - 40px); overflow:auto; border-radius:16px; padding:24px; background:#fff; box-shadow:0 24px 80px rgba(0,0,0,.3); }.modal-card h2 { margin:0 0 3px; }.modal-x { position:absolute; right:12px; top:8px; border:0; background:transparent; color:#6d5f58; font-size:28px; cursor:pointer; }
.image-actions { display:flex; gap:8px; flex-wrap:wrap; margin:17px 0; }.crop-stage { height:min(52vh,460px); display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#292725; }.crop-stage img { display:block; max-width:100%; }.crop-placeholder { padding:20px; color:#cbc3bd; text-align:center; }
.crop-controls { display:flex; gap:7px; flex-wrap:wrap; margin:10px 0 16px; }.crop-controls button { border:1px solid var(--line); border-radius:7px; padding:7px 10px; background:#f8f5f2; cursor:pointer; }.modal-card footer { display:flex; align-items:center; justify-content:flex-end; gap:9px; }.modal-card footer .muted { margin-right:auto; }
.link-editor { width:min(620px,100%); }.link-editor label { margin:17px 0; }.link-editor textarea { resize:vertical; min-height:70px; }.field-note { display:block; margin-top:5px; color:var(--muted); font-size:11px; font-weight:400; }.link-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:5px 0 20px; }.link-editor footer { padding-top:15px; border-top:1px solid var(--line); }
.gift-editor { width:min(900px,100%); }.gift-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:24px; align-items:start; margin:12px 0 22px; }.gift-fields { display:grid; grid-template-columns:1fr 1fr; column-gap:14px; }.gift-fields label:first-child,.gift-fields label:nth-child(3),.gift-fields label:nth-child(4) { grid-column:1/-1; }.gift-fields label { margin:8px 0; }.optional { color:var(--muted); font-size:11px; font-weight:400; }.gift-preview { position:sticky; top:0; padding:16px; border:1px solid var(--line); border-radius:13px; background:#faf7f4; text-align:center; }.gift-preview>span { display:block; margin-bottom:10px; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }.gift-qr-box { aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border:1px solid #ddd3cc; border-radius:10px; background:#fff; }.gift-qr-box img { display:block; width:100%; height:100%; object-fit:contain; }.gift-preview strong,.gift-preview small { display:block; margin-top:9px; overflow-wrap:anywhere; }.gift-preview small { color:var(--muted); line-height:1.4; }.gift-editor footer { padding-top:15px; border-top:1px solid var(--line); }
.guest-editor { width:min(650px,100%); }.guest-editor label { margin:17px 0; }.guest-divider { display:flex; align-items:center; gap:10px; margin:22px 0 0; color:var(--accent); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.guest-divider:before,.guest-divider:after { content:""; height:1px; flex:1; background:var(--line); }.copy-field { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; }.copy-field input { min-width:0; }.copy-field .button { height:42px; margin-top:6px; white-space:nowrap; }.guest-editor footer { padding-top:15px; border-top:1px solid var(--line); }
.date-editor { width:min(520px,100%); }.date-editor label { margin:20px 0; }.date-editor input[type="date"] { font-size:17px; }.calendar-date-preview { margin:-5px 0 22px; border:1px solid #eadbd1; border-radius:10px; padding:14px; background:#fff8f0; color:#8d3f35; font-family:Georgia,serif; font-size:18px; text-align:center; text-transform:capitalize; }.date-editor footer { padding-top:15px; border-top:1px solid var(--line); }
.responses-wrap { width:min(1500px,100%); margin:auto; padding:24px; }.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }.stats article { padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--paper); box-shadow:0 4px 16px rgba(58,42,34,.05); }.stats span { display:block; color:var(--muted); font-size:12px; }.stats strong { display:block; margin-top:5px; font-size:27px; }
.panel { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--paper); }.filters { display:grid; grid-template-columns:minmax(220px,1fr) 180px 180px auto; gap:9px; padding:14px; border-bottom:1px solid var(--line); }.filters input,.filters select { margin:0; }
.table-scroll { overflow:auto; }table { width:100%; border-collapse:collapse; min-width:1050px; }th,td { padding:12px 13px; border-bottom:1px solid #eee7e2; text-align:left; vertical-align:top; font-size:13px; }th { position:sticky; top:0; background:#f7f2ee; color:#75675f; font-size:11px; letter-spacing:.04em; text-transform:uppercase; }td small { display:block; margin-top:4px; color:var(--muted); }.message-cell { max-width:320px; white-space:pre-wrap; line-height:1.45; }.attendance { display:inline-block; border-radius:999px; padding:5px 8px; font-size:11px; font-weight:700; }.attendance.yes { background:#e6f3eb;color:#246543; }.attendance.no { background:#f9e9e8;color:#a63838; }.attendance.maybe { background:#fff0cf;color:#8a641d; }.status-select { min-width:125px; margin:0; padding:7px; }.icon-delete { width:29px; height:29px; border:0; border-radius:7px; background:#fae9e8; color:var(--danger); font-size:20px; cursor:pointer; }.empty { padding:35px; color:var(--muted); text-align:center; }.danger-text { color:var(--danger); }
.qtv-page { min-height:100vh; background:#f3efeb; }.qtv-wrap { width:min(1600px,100%); margin:auto; padding:24px; }.qtv-stats small { display:block; margin-top:7px; color:var(--muted); font-size:11px; line-height:1.4; }.qtv-panel { overflow:visible; }.qtv-toolbar { display:grid; grid-template-columns:minmax(260px,1fr) 220px auto; gap:10px; padding:14px; border-bottom:1px solid var(--line); }.qtv-toolbar input,.qtv-toolbar select { margin:0; }.qtv-table { min-width:1250px; }.qtv-table td:first-child { min-width:260px; }.qtv-table code { display:inline-block; margin-top:6px; border-radius:5px; padding:3px 6px; background:#eee8e3; color:#745949; font-size:11px; }.row-links { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }.row-links a { font-size:11px; font-weight:700; }.expiry-badge,.site-status { display:inline-block; margin-top:7px; border-radius:999px; padding:5px 8px; font-size:11px; font-weight:800; white-space:nowrap; }.expiry-badge { background:#fbe8e5; color:#a62e2e; }.site-status.active { background:#e5f3e9; color:#21663d; }.site-status.inactive { background:#eee9e6; color:#746761; }.site-actions { display:flex; flex-wrap:wrap; gap:5px; min-width:240px; }.site-actions button { border:1px solid #ddd1c9; border-radius:7px; padding:6px 8px; background:#fff; color:#5c4c44; font-size:11px; font-weight:700; cursor:pointer; }.site-actions button:hover { border-color:#a98c7b; }.site-actions .warning { color:#956115; background:#fff7df; }.site-actions .success { color:#21663d; background:#eaf6ed; }.site-actions .danger { color:#a52f2f; background:#fff0ef; }.site-editor { width:min(820px,100%); }.site-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }.site-form-grid label { margin:10px 0; }.site-notes-field { grid-column:1/-1; }.issued-links { margin:18px 0; border:1px solid #bcdcca; border-radius:12px; padding:16px; background:#f2fbf5; }.issued-links>strong { display:block; color:#266543; }.issued-links label { margin:13px 0; }.site-editor footer,.issued-editor footer { margin-top:18px; padding-top:15px; border-top:1px solid var(--line); }.issued-editor { width:min(680px,100%); }
@media(max-width:850px){.admin-bar{align-items:flex-start;flex-direction:column}.admin-bar nav{justify-content:flex-start}.preview-stage{height:calc(100vh - 145px);padding:10px}.stats{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr 1fr}.filters input{grid-column:1/-1}.gift-layout{grid-template-columns:1fr}.gift-preview{position:static;width:min(280px,100%);margin:auto}.qtv-toolbar{grid-template-columns:1fr 180px}.qtv-toolbar button{grid-column:1/-1}.site-form-grid{grid-template-columns:1fr}.site-notes-field{grid-column:auto}}
@media(max-width:520px){.auth-card{padding:25px}.responses-wrap,.qtv-wrap{padding:12px}.stats{gap:8px}.stats article{padding:13px}.filters,.qtv-toolbar{grid-template-columns:1fr}.filters input,.qtv-toolbar button{grid-column:auto}.modal{padding:8px}.modal-card{padding:18px}.crop-stage{height:45vh}.modal-card footer{flex-wrap:wrap}.gift-fields{grid-template-columns:1fr}.gift-fields label{grid-column:auto!important}.copy-field{grid-template-columns:1fr}.copy-field .button{width:100%;margin-top:0}}
.music-editor { width:min(720px,100%); }.music-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:18px 0; }.music-mode-grid label { display:flex; align-items:center; gap:8px; margin:0; border:1px solid var(--line); border-radius:9px; padding:11px; background:#fbf9f7; cursor:pointer; }.music-mode-grid input { width:auto; margin:0; }.music-source[hidden] { display:none !important; }.music-source { margin:13px 0; border:1px solid var(--line); border-radius:10px; padding:4px 14px; background:#faf7f4; }.music-preview { display:flex; align-items:center; gap:12px; margin:15px 0 20px; }.music-preview span { color:var(--muted); font-size:12px; }.music-editor footer { padding-top:15px; border-top:1px solid var(--line); }
.layout-editor { width:min(680px,100%); }.hidden-section-list { display:grid; gap:9px; min-height:100px; margin:20px 0; }.hidden-section-row { display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:#faf8f6; }.hidden-section-row strong { display:block; font-size:14px; }.hidden-section-row small { display:block; margin-top:4px; color:var(--muted); }.hidden-section-empty { display:grid; min-height:110px; place-items:center; border:1px dashed #d8cbc3; border-radius:11px; padding:20px; color:var(--muted); text-align:center; }.layout-editor footer { padding-top:15px; border-top:1px solid var(--line); }.layout-editor footer .button.ghost { margin-right:auto; }
.share-editor { width:min(1040px,100%); }.share-layout { display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:24px; align-items:start; margin:13px 0 22px; }.share-fields label { margin:10px 0 15px; }.share-fields textarea { min-height:105px; resize:vertical; }.share-fields .image-actions { margin:10px 0 5px; }.share-upload-block { margin:14px 0; border:1px solid var(--line); border-radius:11px; padding:13px; background:#fcfaf8; }.share-upload-block>strong { display:block; color:#51443d; font-size:13px; }.share-preview { position:sticky; top:0; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#f4f6f8; }.share-preview>span { display:block; padding:13px 15px 10px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.08em; text-align:center; text-transform:uppercase; }.share-image-box { aspect-ratio:1.9048; display:grid; place-items:center; overflow:hidden; border-block:1px solid #dddfe3; background:linear-gradient(135deg,#eee6df,#d8c8bc); }.share-image-box img { display:block; width:100%; height:100%; object-fit:cover; }.share-image-box img:not([src]) { visibility:hidden; }.social-card-copy { padding:14px 16px 16px; background:#f0f3f6; }.social-card-copy strong { display:block; overflow:hidden; color:#17191c; font-size:18px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }.social-card-copy p { display:-webkit-box; min-height:38px; margin:5px 0 7px; overflow:hidden; color:#545b62; font-size:14px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.social-card-copy small { display:block; overflow:hidden; color:#737a81; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.favicon-upload-row { display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:center; }.favicon-box { width:64px; height:64px; display:grid; place-items:center; overflow:hidden; border:1px solid #d9d0ca; border-radius:10px; background:#eeeae7; }.favicon-box img { display:block; width:100%; height:100%; object-fit:cover; }.favicon-box img:not([src]) { visibility:hidden; }.favicon-upload-row .image-actions { margin-top:4px; }.seo-toggle { display:flex; align-items:flex-start; gap:10px; margin:17px 0!important; border:1px solid var(--line); border-radius:11px; padding:13px; background:#fbf9f7; cursor:pointer; }.seo-toggle input { width:auto; margin:3px 0 0; accent-color:var(--accent2); }.seo-toggle span,.seo-toggle strong,.seo-toggle small { display:block; }.seo-toggle small { margin-top:4px; color:var(--muted); font-weight:400; line-height:1.4; }.share-editor footer { padding-top:15px; border-top:1px solid var(--line); }
.qtv-stats { grid-template-columns:repeat(5,1fr); }.qtv-assets-grid { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(520px,1.28fr); gap:18px; margin-top:18px; align-items:start; }.asset-panel { overflow:visible; }.asset-panel>header { padding:17px 18px; border-bottom:1px solid var(--line); }.asset-panel h2 { margin:0 0 5px; font-size:18px; }.asset-panel p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }.asset-panel-body { padding:16px 18px; }.asset-panel-body label { margin:5px 0 13px; }.asset-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }.music-library-form { display:grid; grid-template-columns:1fr 1.4fr 1.2fr auto; gap:9px; align-items:end; }.music-library-form label { margin:0; }.music-library-form .button { height:42px; white-space:nowrap; }.music-table { min-width:760px; }.music-table audio { width:220px; height:34px; }.music-table .site-actions { min-width:120px; }
@media(max-width:1100px){.qtv-stats{grid-template-columns:repeat(3,1fr)}.qtv-assets-grid{grid-template-columns:1fr}.music-library-form{grid-template-columns:1fr 1fr}.music-library-form .button{align-self:end}}
@media(max-width:650px){.music-mode-grid{grid-template-columns:1fr}.music-library-form{grid-template-columns:1fr}.qtv-stats{grid-template-columns:repeat(2,1fr)}.share-layout{grid-template-columns:1fr}.share-preview{position:static;order:-1}.favicon-upload-row{grid-template-columns:1fr}.hidden-section-row{align-items:flex-start;flex-direction:column}.hidden-section-row .button{width:100%}}
.showcase-settings-panel code { border-radius:5px; padding:2px 5px; background:#f0e9e4; color:#7a5040; font-size:11px; }
.showcase-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.showcase-settings-grid label { margin:6px 0 12px; }
.showcase-message-field { grid-column:1/-1; }
.showcase-message-field textarea { resize:vertical; }
.music-library-panel { grid-column:1/-1; }
@media(max-width:720px){.showcase-settings-grid{grid-template-columns:1fr}.showcase-message-field{grid-column:auto}.music-library-panel{grid-column:auto}}