:root{--bg:#f7f5ef;--paper:#fffefa;--ink:#33382f;--muted:#717366;--line:#deded3;--accent:#656e58;--soft:#eceee4;--danger:#913e32;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0;font-size:15px;line-height:1.65}a{color:inherit;text-underline-offset:5px}button,input,textarea,select{font:inherit}button,a,input,textarea,select{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}button,.button{border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:12px 22px;display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;border-radius:2px;transition:background .18s,transform .18s}button:hover,.button:hover{background:#4f5849}button.secondary,.button.secondary{background:transparent;color:var(--ink);border-color:var(--line)}button.secondary:hover{background:var(--soft)}button.small{font-size:13px;padding:7px 12px;min-height:38px}button.danger{color:var(--danger)}button.link{border:0;background:transparent;color:var(--ink);padding:8px}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.skip{position:absolute;top:-100px;left:16px;background:white;padding:12px;z-index:9}.skip:focus{top:12px}header{height:108px;margin:0 5.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:25px}.brand{text-decoration:none;font-family:Georgia,'Times New Roman',serif;font-size:48px;letter-spacing:-4px;line-height:.85;display:inline-block}.brand span{display:block;font-family:Arial,sans-serif;font-size:8px;letter-spacing:4px;margin-top:13px;margin-left:5px}.header-note,.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.8px}.header-note{color:var(--muted)}.header-link{font-size:12px;text-decoration:none}.header-link span{padding-left:15px}.hero{max-width:1330px;margin:0 auto;padding:80px 6% 95px;display:grid;grid-template-columns:1.1fr .9fr;gap:8%;align-items:center}.eyebrow{color:var(--accent);margin:0 0 26px}h1,h2,h3,p{margin-top:0}h1,h2,.display{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-1.6px;line-height:1.22}h1{font-size:clamp(42px,4.7vw,70px);margin-bottom:28px}h1 em,h2 em{font-weight:400;color:var(--accent)}.hero .intro{max-width:415px;color:var(--muted);line-height:1.9;margin-bottom:32px}.quiet{font-size:12px;color:var(--muted);margin-top:17px}.art{position:relative;background:#e8e5dc;min-height:510px;border-radius:48% 48% 2px 2px;overflow:hidden;display:flex;align-items:center;justify-content:center}.art:before{content:'';position:absolute;inset:19px;border:1px solid #faf9f1;border-radius:48% 48% 2px 2px}.art svg{width:90%;height:auto;color:#92977d;z-index:1}.art-caption{position:absolute;bottom:35px;font-family:Georgia,serif;font-style:italic;color:#636950;font-size:18px}.story{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:65px 7%;display:grid;grid-template-columns:1.1fr .9fr;gap:10%;max-width:1400px;margin:auto}.story h2{font-size:36px}.story p{color:var(--muted);margin:0;max-width:480px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:55px;max-width:1160px;padding:70px 5%;margin:auto}.step-number{color:var(--accent);font-family:Georgia,serif;font-style:italic;font-size:22px}.steps h3{font-family:Georgia,serif;font-weight:400;font-size:24px;margin:14px 0}.steps p{font-size:14px;color:var(--muted)}.access{background:var(--soft);text-align:center;padding:65px 24px}.access h2{font-size:38px}.access p{color:var(--muted)}.access form{max-width:580px;margin:28px auto 0;display:flex;gap:10px}.access input{flex:1;min-width:0}.page{max-width:1060px;margin:auto;padding:60px 35px 85px}.page-head{text-align:center;margin-bottom:40px}.page-head h1{font-size:56px}.page-head p{color:var(--muted)}.date-label{display:inline-block;border-top:1px solid var(--line);padding-top:18px;font-size:12px;letter-spacing:1px}.progress-panel{border:1px solid var(--line);background:var(--paper);padding:25px 30px;margin-bottom:32px}.between{display:flex;justify-content:space-between;align-items:center;gap:18px}.muted{color:var(--muted)}.subtle{font-size:12px;color:var(--muted)}progress{width:100%;height:4px;appearance:none;border:0;display:block;margin-top:18px;background:var(--line)}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--accent)}progress::-moz-progress-bar{background:var(--accent)}.tabs{display:flex;border-bottom:1px solid var(--line);gap:28px;margin-bottom:25px}.tabs button{border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);border-radius:0;padding:16px 6px}.tabs button.active{border-color:var(--accent);color:var(--ink)}.check-group{border-bottom:1px solid var(--line)}summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:18px;padding:25px 0}summary::-webkit-details-marker{display:none}.group-number{font:italic 19px Georgia,serif;color:var(--accent)}summary h2{font-size:25px;letter-spacing:-.4px;margin:0;flex:1}summary .count{font-size:12px;color:var(--muted)}summary:after{content:'+';font-size:23px;font-weight:300}details[open]>summary:after{content:'−'}.check-item{display:flex;gap:17px;border-top:1px solid #ecece4;padding:20px 0 20px 35px;align-items:flex-start;cursor:pointer}.check-item input{appearance:none;width:23px;height:23px;border:1px solid #939a85;border-radius:50%;flex:none;margin:3px 0 0;padding:0;background:transparent;cursor:pointer}.check-item input:checked{background:var(--accent);border-color:var(--accent)}.check-item input:checked:after{content:'✓';color:white;display:block;text-align:center;font-size:15px;line-height:21px}.check-item strong{display:block;font-size:15px;font-weight:500}.check-item span span{display:block;color:var(--muted);font-size:13px;line-height:1.7;margin-top:5px}.check-item:has(input:checked) strong{color:var(--muted)}.closing{text-align:center;padding:45px 15px 10px}.closing h2{font-size:30px}.closing p{color:var(--muted)}footer{border-top:1px solid var(--line);margin:0 5.5%;padding:36px 0;display:flex;justify-content:space-between;align-items:center;gap:25px}.brand.small{font-size:37px}footer p{font-size:12px;margin:0}footer p span,footer>a:last-child{font-size:11px;color:var(--muted)}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:12px 24px;z-index:20;max-width:90vw;border-radius:3px;display:none}#toast.visible{display:block}.loading,.error-page{text-align:center;padding:90px 20px}.error{color:var(--danger);font-size:14px;margin:12px 0}.login{max-width:450px;margin:70px auto 100px;padding:30px}.login h1{font-size:38px}label.field{display:block;font-size:12px;margin-bottom:18px}input,textarea,select{display:block;background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:11px 12px;width:100%;color:var(--ink);margin-top:6px;min-height:45px}textarea{min-height:95px;resize:vertical}.admin{max-width:1260px;padding:45px 5%;margin:auto}.admin h1{font-size:38px;margin:6px 0 12px}.admin h2{font-size:28px;letter-spacing:-.5px}.actions{display:flex;gap:8px;flex-wrap:wrap}.admin-toolbar{margin:28px 0}.couple-card{border:1px solid var(--line);background:var(--paper);padding:25px;margin-bottom:15px;display:grid;grid-template-columns:1.2fr 1fr auto;gap:25px;align-items:center}.couple-card h2{margin:0 0 8px;font-size:26px}.couple-card p{margin:0;font-size:12px;color:var(--muted)}.badge{font-size:10px;background:var(--soft);padding:4px 8px;letter-spacing:1px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.panel{border:1px solid var(--line);background:var(--paper);padding:28px;margin:25px 0}.editor-group{border:1px solid var(--line);padding:22px;margin:20px 0;background:var(--paper)}.editor-group h3{font-weight:500}.editor-item{border-top:1px solid var(--line);padding:18px 0}.editor-head{display:grid;grid-template-columns:1fr 160px;gap:15px}.check-inline{display:flex;gap:10px;align-items:center;font-size:12px}.check-inline input{width:18px;min-height:18px;margin:0;accent-color:var(--accent)}.editor-item .field{margin:10px 0}.savebar{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:15px 0;display:flex;justify-content:space-between;align-items:center;z-index:2}.outstanding{padding-left:20px;font-size:13px}.outstanding li{margin:7px 0}.search{max-width:350px}.empty{padding:35px;color:var(--muted);text-align:center}.hidden{display:none!important}@media(max-width:760px){header{height:85px;margin:0 6%}.header-note{display:none}.brand{font-size:41px}.header-link{font-size:10px}.header-link span{padding-left:4px}.hero{padding:48px 7% 55px;grid-template-columns:1fr;gap:40px}.hero h1{font-size:46px}.hero .intro{font-size:14px}.art{min-height:370px;max-width:400px;width:100%;justify-self:center}.art svg{width:80%;max-height:340px}.story{grid-template-columns:1fr;gap:12px;padding:45px 7%}.story h2{font-size:31px}.steps{grid-template-columns:1fr;gap:22px;padding:40px 7%}.steps>div{display:grid;grid-template-columns:35px 1fr;gap:0 13px}.steps h3{margin:0 0 10px}.steps p{grid-column:2}.access h2{font-size:30px}.access form{flex-direction:column}.page{padding:40px 6% 60px}.page-head h1{font-size:42px}.page-head .eyebrow{font-size:9px}.progress-panel{padding:20px}.between{align-items:flex-start;flex-wrap:wrap}.tabs{gap:20px}.tabs button{font-size:13px}summary{gap:12px}summary h2{font-size:22px}.check-item{padding-left:0}footer{align-items:flex-start;flex-wrap:wrap;padding:30px 0;gap:25px}footer p{font-size:11px}footer>a:last-child{width:100%}.admin{padding:30px 6%}.admin h1{font-size:32px}.couple-card{grid-template-columns:1fr;gap:15px;padding:20px}.form-grid,.editor-head{grid-template-columns:1fr}.panel,.editor-group{padding:18px}.savebar{gap:12px}.savebar span{font-size:11px}.login{margin:35px auto 65px}.actions button{min-height:42px}.date-label{letter-spacing:0;font-size:11px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.check-item input{min-height:23px}.tabs button{min-height:48px}
.editor-group>summary{padding:2px 0}.editor-group[open]>summary{margin-bottom:20px}.editor-group>summary h2{font-size:23px}
/* NYNA V1.1: wordmark, couple heading and private notes. */
.brand,.brand.small{font-family:'Times New Roman',Times,serif;letter-spacing:1px;font-size:43px;line-height:.9}.brand span{letter-spacing:4.5px;font-size:8px;text-align:center;margin-left:4px}.brand.small{font-size:34px}.brand.small span{font-size:7px;letter-spacing:3px}
h1,h2,.display{font-family:'Times New Roman',Times,serif}.journey-title{text-align:center;margin-bottom:30px}.journey-title>span{display:block;font-family:'Times New Roman',Times,serif;font-size:30px;letter-spacing:4px;color:var(--ink)}.journey-title>p{font-size:13px;letter-spacing:3px;color:var(--accent);margin:10px 0 0}.contact-details p{margin:0 0 5px;font-size:12px}.contact-details a{color:var(--ink)}.couple-notes{margin:40px 0 0;padding:36px;border:1px solid var(--line);background:var(--paper)}.couple-notes h2{font-size:33px;letter-spacing:-.6px;margin-bottom:15px}.couple-notes .eyebrow{margin-bottom:15px}.couple-notes>p.muted{max-width:650px;font-size:14px}.couple-notes textarea{min-height:165px;line-height:1.8;background:#faf9f5}.notes-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:16px}.notes-bottom p{font-size:12px;color:var(--muted);margin:0;max-width:70%}.notes-bottom button{flex:none}.client-note-content{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:760px){.brand{font-size:33px}.brand span{font-size:7px;letter-spacing:3px}.journey-title>span{font-size:28px}.journey-title>p{font-size:11px;letter-spacing:2px}.couple-notes{padding:24px 20px}.couple-notes h2{font-size:28px}.notes-bottom{align-items:flex-start;flex-direction:column}.notes-bottom p{max-width:100%}.contact-details{flex:1;min-width:200px}.contact-details p{font-size:11px;line-height:1.8}}
.motion-surface{position:relative;isolation:isolate;overflow:hidden}.ambient{position:absolute;inset:0;z-index:-1;pointer-events:none}.ambient video{width:100%;height:100%;object-fit:cover;display:block}.art{background:#e9e6de}.art .ambient{z-index:0}.art:before{z-index:1}.art .ambient video{opacity:.8;filter:sepia(.12)}.art-caption{z-index:2;letter-spacing:1px}.motion-toggle{position:absolute;bottom:12px;right:14px;z-index:3;padding:5px 9px;min-height:30px;border-color:#c9c9bc;background:rgba(247,245,239,.9);color:var(--ink);font-size:10px}.motion-toggle:hover{background:var(--paper)}.motion-toggle[hidden]{display:none}.access .ambient{opacity:.12;filter:saturate(.2)}.access{background:transparent}.page-head.motion-surface{padding:45px 25px 55px;border:1px solid var(--line)}.page-head .ambient{opacity:.22;filter:sepia(.25)}.page-head .journey-title,.page-head h1,.page-head>p,.page-head .date-label{position:relative}.page-head h1{margin-bottom:22px}@media(max-width:760px){.page-head.motion-surface{padding:35px 16px 55px}.page-head .journey-title>p{font-size:10px;letter-spacing:1.8px}.page-head h1{font-size:40px}.page-head>p{font-size:13px}.art{min-height:380px}.motion-toggle{font-size:10px}}
:root{--bg:#faf7ef;--soft:#eef0e5;--line:#dfdfcf}.hero{position:relative}.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:url('/media/flowers.jpg') center/cover;opacity:.045;filter:sepia(.3)}.art .ambient video{opacity:1;filter:saturate(.65) brightness(1.1);object-position:43% center}.art-caption{color:#fffefa;text-shadow:0 1px 8px #33382f}.art:before{border-color:#ffffff80}.page-head .ambient{opacity:.13;filter:saturate(.5)}.story{background:#f0f1e7}.access .ambient{opacity:.15;filter:saturate(.55)}dialog{width:min(480px,calc(100% - 36px));padding:42px 34px 28px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:4px}dialog::backdrop{background:rgba(41,48,36,.38);backdrop-filter:blur(5px)}dialog h2{font-size:34px;margin-bottom:16px}dialog .eyebrow{margin-bottom:16px}dialog .muted{font-size:14px}dialog form button{width:100%}.dialog-close{position:absolute;right:10px;top:10px;padding:2px 10px;font-size:24px;line-height:1.3}body:has(dialog[open]){overflow:hidden}@media(max-width:760px){dialog{padding:40px 24px 24px}dialog h2{font-size:30px}.art .ambient video{object-position:43% center}}
/* Align homepage background panels and their content to one shared frame. */
.hero,.story{width:89%;max-width:1400px;margin-inline:auto;padding-inline:clamp(28px,6vw,100px)}
.hero{padding-top:80px;padding-bottom:80px;gap:7%;grid-template-columns:1.1fr .9fr;isolation:isolate}
.hero:before{background-position:center center;opacity:.035}
.story{grid-template-columns:1.1fr .9fr;gap:7%}
@media(max-width:760px){.hero,.story{width:88%;padding-inline:0}.hero{grid-template-columns:1fr;padding-top:45px;padding-bottom:45px;gap:35px}.hero:before{inset:0 -6.82%}.story{width:100%;padding:40px 6%;grid-template-columns:1fr;gap:12px}}
/* Full-bleed homepage backgrounds with a centered, readable content area. */
.hero,.story{width:100%;max-width:none;margin-inline:0;padding-inline:max(6%,calc((100% - 1200px)/2))}
@media(max-width:760px){.hero,.story{width:100%;padding-inline:6%}.hero:before{inset:0}}
/* Compact NYNA wordmark spacing. */
.brand,.brand.small{letter-spacing:-2px}
.brand span,.brand.small span{margin-top:8px;margin-left:1px;letter-spacing:2.5px}
@media(max-width:760px){.brand,.brand.small{letter-spacing:-1.5px}.brand span,.brand.small span{margin-top:7px;letter-spacing:2px}}
#attachments-area{margin-top:28px;border-top:1px solid var(--line);padding-top:24px}.attachment-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.attachment-heading h3{font-family:'Times New Roman',serif;font-size:24px;font-weight:400;margin:0}.upload-label{position:relative;cursor:pointer;font-size:13px}.upload-label input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.attachment-row{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line);padding:14px 0}.attachment-row>span{flex:1;min-width:0;overflow-wrap:anywhere}.attachment-row strong{font-size:13px;font-weight:400}.attachment-row small{display:block;color:var(--muted);font-size:11px}#attachment-status{font-size:13px;overflow-wrap:anywhere}.upload-label:focus-within{outline:2px solid var(--accent);outline-offset:3px}

/* System settings remain readable on narrow phones. */
.admin code { overflow-wrap:anywhere; word-break:break-word; }
.admin .field, .admin .form-grid > * { min-width:0; }
.admin form > button + .subtle { margin-top:14px; }

/* Compact customer register, with readable stacked rows on phones. */
.imports-table {width:100%;border-collapse:collapse;background:#fffefa;font-size:14px;border:1px solid var(--border,#deddd0)}
.imports-table caption {text-align:left}
.imports-table th,.imports-table td {padding:15px 16px;text-align:left;border-bottom:1px solid #e6e4da;vertical-align:middle;overflow-wrap:anywhere}
.imports-table thead th {background:#eeeee5;color:#52594a;font-size:12px;font-weight:600;white-space:nowrap}
.imports-table tbody th {font-family:inherit;font-size:15px;font-weight:600;min-width:180px}
.imports-table tbody tr:hover {background:#f7f7ef}
.import-date {font-variant-numeric:tabular-nums;white-space:nowrap}
.imports-table td a {text-underline-offset:4px;font-variant-numeric:tabular-nums}
.import-status {display:inline-block;color:#666d5b;font-size:12px;line-height:1.5}
.import-status.needs-review {color:#795628;background:#f6efe2;padding:4px 8px;border-radius:3px}
.imports-table .import-action {text-align:right;white-space:nowrap}
.imports-table button {margin:0;min-height:40px}
.sr-only {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){
.imports-table,.imports-table tbody {display:block;border:0;background:transparent}
.imports-table thead {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.imports-table tr {display:block;background:#fffefa;border:1px solid #deddd0;margin-bottom:12px;padding:16px}
.imports-table th,.imports-table td {display:block;border:0;padding:5px 0;min-width:0}
.imports-table tbody th {font-size:16px;padding-bottom:10px}
.imports-table td[data-label] {display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px}
.imports-table td[data-label]::before {content:attr(data-label);font-size:12px;color:#686e60}
.imports-table .import-action {padding-top:12px;text-align:left}
.imports-table .import-action button {width:100%}
}

.customer-metrics{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:13px;color:var(--muted,#737768)}.customer-metrics strong{color:#34382e;font-size:16px;margin-right:3px}input[readonly]{background:#f5f4ed;color:#606554}

.delivery-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.delivery-actions .check-inline{margin:0;white-space:nowrap}.import-warning{display:block;color:#876446;margin-top:5px;max-width:190px}#copy-fallback{padding:18px;border:1px solid #dddccc;margin-bottom:20px}

.tabs[aria-label="Checklist dành cho"]{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:0;margin:32px 0}.tabs[aria-label="Checklist dành cho"] button{font-weight:750;font-size:22px;border:1px solid #d9daca;border-radius:2px;padding:18px;color:#555c49}.tabs[aria-label="Checklist dành cho"] button.active{background:#e9ecdf;border:2px solid #687158;color:#303729}.split-notes{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:26px}.audience-note{padding:24px;border:1px solid #ddded1}.audience-note h3,.admin-note-section h3{font-weight:750;font-family:Arial,sans-serif;font-size:20px}.legacy-note,.admin-note-section{padding:18px 0;border-bottom:1px solid #ddded1}.split-notes textarea{width:100%}@media(max-width:640px){.split-notes{grid-template-columns:1fr;gap:18px}.audience-note{padding:18px}.tabs[aria-label="Checklist dành cho"] button{font-size:20px}}

/* Read-only customer report */
.customer-report{margin:32px 0;color:#35382e}.report-intro{text-align:center;padding:28px 16px 40px}.report-intro h2{font-size:36px;margin:12px 0}.report-person{background:#faf6ee;border:1px solid #d8cebf;padding:40px;margin:0 0 28px}.report-person>header{text-align:center;border-bottom:1px solid #d8cebf;padding-bottom:24px;margin-bottom:28px}.report-person>header h2{font-family:"Times New Roman",serif;font-size:48px;font-weight:700;margin:8px 0}.report-columns{columns:2;column-gap:48px}.report-category{break-inside:avoid;margin-bottom:28px}.report-category h3{font-size:14px;font-family:Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #d8cebf;padding-bottom:12px;color:#6b5b49}.report-category ul{list-style:none;padding:0;margin:0}.report-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid #e7dfd2;break-inside:avoid}.report-mark{flex:none;width:24px;height:24px;border:1px solid #858a77;text-align:center;line-height:22px;border-radius:3px}.is-done .report-mark{background:#626d56;color:white}.report-item>div{min-width:0;flex:1}.report-item strong{font-size:17px}.report-status{display:block;font-size:12px;color:#60644f;margin-top:3px}.is-pending .report-status{color:#78512c;font-weight:700}.report-item p{font-size:14px;line-height:1.65;margin:6px 0 0;color:#68685c}.report-note{margin-top:26px;border-top:1px solid #d8cebf;padding-top:20px}.report-note h3{font-weight:700;font-size:20px}.report-note p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}.report-shared,.report-files{padding:24px 32px;background:#fffdf8;border:1px solid #d8cebf;margin-bottom:20px}.profile-settings{border-top:1px solid #d8cebf;padding:24px 0}.profile-settings>summary{font-size:18px;font-weight:700;cursor:pointer;padding:10px 0}.customer-report{overflow-wrap:anywhere}@media(max-width:700px){.report-columns{columns:1}.report-person{padding:24px 18px}.report-person>header h2{font-size:38px}.report-intro h2{font-size:29px}.report-shared,.report-files{padding:20px 18px}.report-item strong{font-size:16px}}
.report-person>header{display:block;width:auto;max-width:none;min-height:0;padding:0 0 24px;position:static;background:transparent}.report-person>header p{margin:10px 0}

.attachment-preview{width:min(1000px,94vw);max-width:94vw;padding:20px;max-height:94dvh;background:var(--paper,#faf8f1);border:1px solid #dcdccc}.attachment-preview::backdrop{background:rgb(30 32 27 / .65)}.attachment-preview-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.attachment-preview-bar h2{font:inherit;font-weight:600;overflow-wrap:anywhere;margin:0}.attachment-preview-bar button{flex-shrink:0}.attachment-preview img{display:block;max-width:100%;max-height:75dvh;object-fit:contain;margin:auto}.attachment-preview iframe{display:block;width:100%;height:75dvh;border:0}.attachment-row{flex-wrap:wrap}.attachment-row>span{min-width:0;overflow-wrap:anywhere}@media(max-width:600px){.attachment-preview{padding:12px}.attachment-preview-bar{gap:8px}}

#sync-lark-stop[hidden]{display:none}

/* ==========================================================================
   NYNA CONCEPT STUDIO (concept.nyna.io.vn & concept.oriai.io.vn)
   Shotpik-Inspired Minimalist Rounded UI (Monochrome + Red Accent)
   ========================================================================== */
.concept-studio-app {
 --sp-bg: #F4F5F7;
 --sp-surface: #FFFFFF;
 --sp-subtle: #F1F2F4;
 --sp-subtle-hover: #E5E7EB;
 --sp-border: #E5E7EB;
 --sp-border-strong: #D1D5DB;
 --sp-text: #111827;
 --sp-text-secondary: #4B5563;
 --sp-text-muted: #6B7280;
 --sp-red: #D92D20;
 --sp-red-hover: #B91C1C;
 --sp-red-soft: #FEF2F2;
 --sp-green: #16A34A;
 --sp-dark-pill: #18181B;
 font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 background: var(--sp-bg);
 color: var(--sp-text);
}

.concept-studio-app h1,
.concept-studio-app h2,
.concept-studio-app h3,
.concept-studio-app .display {
 font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 letter-spacing: -0.02em;
 font-weight: 700;
}

/* Floating Pill Top Header (Matching Image 2 & Image 3) */
.concept-studio-app header {
 max-width: 1320px;
 height: 56px;
 margin: 12px auto 0;
 padding: 0 20px;
 background: var(--sp-surface);
 border: 1px solid var(--sp-border);
 border-radius: 999px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
 position: sticky;
 top: 10px;
 z-index: 60;
}

.concept-studio-app .brand {
 font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
 font-size: 19px;
 font-weight: 800;
 letter-spacing: -0.5px;
 line-height: 1;
 color: var(--sp-text);
 display: inline-flex;
 align-items: baseline;
 gap: 6px;
}

.concept-studio-app .brand span {
 display: inline;
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.08em;
 color: var(--sp-text-muted);
 margin: 0;
}

.concept-studio-app .header-note {
 background: var(--sp-subtle);
 color: var(--sp-text-secondary);
 padding: 6px 14px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0;
}

.concept-studio-app .header-link {
 background: var(--sp-subtle);
 color: var(--sp-text);
 padding: 7px 14px;
 border-radius: 999px;
 font-size: 12.5px;
 font-weight: 600;
 transition: background 0.15s;
}

.concept-studio-app .header-link:hover {
 background: var(--sp-subtle-hover);
}

.concept-studio-app .header-link span {
 padding-left: 4px;
}

/* Main White Rounded Container (Matching Image 2 & Image 3) */
.sp-shell {
 max-width: 1320px;
 margin: 12px auto 110px;
 padding: 0 12px;
}

.sp-container {
 background: var(--sp-surface);
 border: 1px solid var(--sp-border);
 border-radius: 20px;
 padding: 20px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* 1. Homepage (/) on concept.* */
.sp-home-banner {
 position: relative;
 height: 220px;
 border-radius: 16px;
 overflow: hidden;
 background: #1F2937;
 display: flex;
 align-items: flex-end;
 padding: 24px;
 margin-bottom: 20px;
}

.sp-home-banner img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: 0.8;
}

.sp-home-banner::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(17,24,39,0.1) 0%, rgba(17,24,39,0.75) 100%);
}

.sp-home-banner-content {
 position: relative;
 z-index: 2;
 color: #FFFFFF;
 max-width: 680px;
}

.sp-home-banner-content h1 {
 font-size: clamp(22px, 3.2vw, 32px);
 margin: 0 0 6px;
 color: #FFFFFF;
}

.sp-home-banner-content p {
 font-size: 14px;
 color: rgba(255, 255, 255, 0.88);
 margin: 0;
}

.sp-home-access-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 flex-wrap: wrap;
 padding: 18px 20px;
 background: var(--sp-subtle);
 border-radius: 16px;
 margin-bottom: 24px;
}

.sp-home-phone-form {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 flex: 1;
 max-width: 520px;
}

.sp-home-phone-form input {
 flex: 1;
 min-width: 200px;
 margin: 0;
 height: 42px;
 min-height: 42px;
 border-radius: 999px;
 border: 1px solid var(--sp-border-strong);
 background: #FFFFFF;
 padding: 0 16px;
 font-size: 14px;
}

.sp-home-steps {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 gap: 14px;
}

.sp-step-card {
 border: 1px solid var(--sp-border);
 border-radius: 14px;
 padding: 16px;
 background: #FFFFFF;
}

.sp-step-card strong {
 display: inline-block;
 background: var(--sp-subtle);
 color: var(--sp-text);
 font-size: 12px;
 font-weight: 700;
 padding: 3px 10px;
 border-radius: 999px;
 margin-bottom: 8px;
}

.sp-step-card h3 {
 font-size: 15px;
 margin: 0 0 4px;
}

.sp-step-card p {
 font-size: 13px;
 color: var(--sp-text-muted);
 margin: 0;
}


/* Rich Homepage Sections for Concept Portal */
.sp-home-section {
 margin-top: 28px;
 padding-top: 24px;
 border-top: 1px solid var(--sp-border);
}

.sp-home-sec-head {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 margin-bottom: 14px;
}

.sp-home-eyebrow {
 display: inline-block;
 background: var(--sp-subtle);
 color: var(--sp-text);
 font-size: 11.5px;
 font-weight: 700;
 padding: 3px 10px;
 border-radius: 999px;
 margin-bottom: 6px;
 letter-spacing: 0.01em;
}

.sp-home-eyebrow.red {
 background: var(--sp-red-soft);
 color: var(--sp-red);
}

.sp-home-sec-title {
 font-size: clamp(18px, 2.2vw, 21px);
 font-weight: 700;
 margin: 0 0 3px;
 color: var(--sp-text);
}

.sp-home-sec-sub {
 font-size: 13px;
 color: var(--sp-text-muted);
 margin: 0;
}

.sp-pkg-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 gap: 14px;
}

.sp-pkg-card {
 border: 1px solid var(--sp-border);
 border-radius: 16px;
 padding: 18px;
 background: #FFFFFF;
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.sp-pkg-card.featured {
 border: 2px solid var(--sp-red);
}

.sp-pkg-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 flex-wrap: wrap;
}

.sp-pkg-tag {
 background: var(--sp-subtle);
 color: var(--sp-text);
 padding: 3px 10px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 700;
}

.sp-pkg-tag.dark {
 background: var(--sp-dark-pill);
 color: #FFFFFF;
}

.sp-pkg-limit {
 background: var(--sp-red-soft);
 color: var(--sp-red);
 padding: 3px 10px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 700;
}

.sp-pkg-limit.solid {
 background: var(--sp-red);
 color: #FFFFFF;
}

.sp-pkg-card h3 {
 font-size: 16px;
 font-weight: 700;
 margin: 2px 0 0;
}

.sp-pkg-card p {
 font-size: 13px;
 color: var(--sp-text-muted);
 margin: 0;
 line-height: 1.5;
}

.sp-pkg-specs {
 margin-top: auto;
 padding-top: 10px;
 border-top: 1px dashed var(--sp-border);
 display: flex;
 flex-direction: column;
 gap: 5px;
 font-size: 12.5px;
 color: var(--sp-text-secondary);
}

.sp-guide-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 gap: 14px;
}

.sp-guide-card {
 border: 1px solid var(--sp-border);
 border-radius: 14px;
 padding: 16px;
 background: #F9FAFB;
}

.sp-guide-badge {
 display: inline-block;
 background: #FFFFFF;
 border: 1px solid var(--sp-border);
 color: var(--sp-text);
 font-size: 12px;
 font-weight: 700;
 padding: 3px 10px;
 border-radius: 999px;
 margin-bottom: 8px;
}

.sp-guide-card h3 {
 font-size: 15px;
 margin: 0 0 4px;
}

.sp-guide-card p {
 font-size: 13px;
 color: var(--sp-text-muted);
 margin: 0;
 line-height: 1.5;
}

.sp-faq-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 12px;
}

.sp-faq-card {
 border: 1px solid var(--sp-border);
 border-radius: 14px;
 padding: 15px 16px;
 background: #FFFFFF;
}

.sp-faq-card h4 {
 font-size: 14px;
 font-weight: 700;
 margin: 0 0 5px;
 color: var(--sp-text);
}

.sp-faq-card p {
 font-size: 13px;
 color: var(--sp-text-muted);
 margin: 0;
 line-height: 1.5;
}

.sp-home-search {
 display: flex;
 align-items: center;
 gap: 8px;
 background: var(--sp-subtle);
 border-radius: 999px;
 padding: 0 14px;
 height: 36px;
 min-width: 210px;
}

.sp-home-search input {
 border: 0;
 background: transparent;
 outline: none;
 font-size: 13px;
 color: var(--sp-text);
 width: 100%;
 margin: 0;
 padding: 0;
 height: 34px;
 min-height: 34px;
}

/* 2. Client Concept Page (/<slug>) — Exact Shotpik Image 2 & Image 3 Layout */
.sp-cover-banner {
 position: relative;
 min-height: 175px;
 border-radius: 14px;
 overflow: hidden;
 background: #374151;
 margin-bottom: 14px;
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 padding: 18px 22px;
}

.sp-cover-banner img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 35%;
}

.sp-cover-banner::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.74) 100%);
}

.sp-cover-content {
 position: relative;
 z-index: 2;
 display: flex;
 flex-direction: column;
 gap: 8px;
 min-width: 0;
}

.sp-cover-title {
 color: #FFFFFF;
 font-size: clamp(22px, 3vw, 28px);
 font-weight: 700;
 margin: 0;
 line-height: 1.2;
 text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.sp-cover-badge {
 position: absolute;
 top: 12px;
 right: 12px;
 z-index: 2;
 background: rgba(255, 255, 255, 0.22);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 color: #FFFFFF;
 border: 1px solid rgba(255, 255, 255, 0.3);
 padding: 5px 12px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 500;
}

/* Meta & Action Row (Image 3 + Package & Limit Below Customer Name) */
.sp-meta-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 padding-bottom: 14px;
 border-bottom: 1px solid var(--sp-border);
}

.sp-meta-info {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.sp-meta-line {
 font-size: 13.5px;
 color: var(--sp-text-muted);
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
}

.sp-meta-line strong {
 color: var(--sp-text);
 font-weight: 600;
}

.sp-package-line {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

.sp-package-pill {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 background: rgba(255, 255, 255, 0.2);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 border: 1px solid rgba(255, 255, 255, 0.28);
 color: #FFFFFF;
 padding: 4px 11px;
 border-radius: 999px;
 font-size: 12.5px;
 font-weight: 600;
}

.sp-limit-pill {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 background: rgba(225, 29, 72, 0.9);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 border: 1px solid rgba(255, 255, 255, 0.25);
 color: #FFFFFF;
 padding: 4px 11px;
 border-radius: 999px;
 font-size: 12.5px;
 font-weight: 600;
}

.sp-status-ok {
 font-size: 12.5px;
 color: var(--sp-green);
 font-weight: 500;
 display: inline-flex;
 align-items: center;
 gap: 5px;
}

.sp-action-pills {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

.sp-btn-pill {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 padding: 8px 15px;
 min-height: 36px;
 border-radius: 999px;
 font-size: 12.5px;
 font-weight: 600;
 border: 1px solid var(--sp-border);
 background: var(--sp-surface);
 color: var(--sp-text);
 transition: all 0.15s;
}

.sp-btn-pill:hover {
 background: var(--sp-subtle);
 border-color: var(--sp-border-strong);
}

.sp-btn-pill.primary {
 background: var(--sp-red);
 border-color: var(--sp-red);
 color: #FFFFFF;
}

.sp-btn-pill.primary:hover {
 background: var(--sp-red-hover);
}

.sp-btn-pill.is-sent {
 background: var(--sp-green);
 border-color: var(--sp-green);
 color: #FFFFFF;
}

/* Toolbar: Clickable Status Pills (Concept / Đã chọn / Ghi chú) + Wrapped Category Tabs */
.sp-toolbar-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 padding: 14px 0;
}

.sp-counters {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

.sp-stat-filter-btn {
 background: var(--sp-subtle);
 color: var(--sp-text-secondary);
 border: 1px solid transparent;
 padding: 6px 13px;
 min-height: 34px;
 border-radius: 999px;
 font-size: 12.5px;
 font-weight: 600;
 display: inline-flex;
 align-items: center;
 gap: 5px;
 transition: all 0.15s;
}

.sp-stat-filter-btn:hover {
 background: var(--sp-subtle-hover);
 color: var(--sp-text);
}

.sp-stat-filter-btn.active {
 background: var(--sp-dark-pill);
 border-color: var(--sp-dark-pill);
 color: #FFFFFF;
}

/* Wrapped Segmented Category Tabs — NEVER clipped on mobile! */
.sp-filter-Right {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
}

.sp-filter-group {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 4px;
 background: var(--sp-subtle);
 padding: 4px;
 border-radius: 14px;
}

.sp-filter-tab {
 border: 0;
 background: transparent;
 color: var(--sp-text-secondary);
 padding: 7px 12px;
 min-height: 34px;
 border-radius: 10px;
 font-size: 12.5px;
 font-weight: 600;
 display: inline-flex;
 align-items: center;
 gap: 5px;
 transition: all 0.15s;
}

.sp-filter-tab:hover {
 color: var(--sp-text);
}

.sp-filter-tab.active {
 background: var(--sp-surface);
 color: var(--sp-text);
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.sp-filter-cnt {
 font-size: 11px;
 color: var(--sp-text-muted);
 font-weight: 600;
}

.sp-view-toggle {
 display: inline-flex;
 background: var(--sp-subtle);
 padding: 3px;
 border-radius: 999px;
 gap: 2px;
}

.sp-view-btn {
 border: 0;
 background: transparent;
 color: var(--sp-text-secondary);
 padding: 6px 11px;
 min-height: 30px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 600;
}

.sp-view-btn.active {
 background: var(--sp-surface);
 color: var(--sp-text);
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* View 1: Shotpik Album Grid (Image 2) */
.sp-album-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 20px 16px;
 margin-top: 4px;
}

.sp-card {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.sp-card-thumb {
 position: relative;
 aspect-ratio: 4 / 3;
 border-radius: 16px;
 overflow: hidden;
 background: var(--sp-subtle);
 cursor: pointer;
 border: 2px solid transparent;
 transition: transform 0.18s ease, border-color 0.18s ease;
}

.sp-card-thumb:hover {
 transform: translateY(-2px);
}

.sp-card.is-selected .sp-card-thumb {
 border-color: var(--sp-red);
}

.sp-card-thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

.sp-heart-btn {
 position: absolute;
 top: 10px;
 left: 10px;
 z-index: 3;
 height: 32px;
 min-height: 32px;
 padding: 0 11px;
 border-radius: 999px;
 border: 0;
 background: rgba(255, 255, 255, 0.92);
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
 color: var(--sp-text);
 font-size: 12px;
 font-weight: 600;
 display: inline-flex;
 align-items: center;
 gap: 5px;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.sp-heart-btn.is-selected {
 background: var(--sp-red);
 color: #FFFFFF;
}

.sp-photo-count {
 position: absolute;
 bottom: 10px;
 right: 10px;
 z-index: 2;
 background: rgba(17, 24, 39, 0.68);
 backdrop-filter: blur(4px);
 color: #FFFFFF;
 padding: 3px 9px;
 border-radius: 999px;
 font-size: 11px;
 font-weight: 500;
}

.sp-card-title {
 font-size: 14.5px;
 font-weight: 600;
 color: var(--sp-text);
 margin: 2px 0 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 6px;
 cursor: pointer;
}

.sp-card-sub {
 font-size: 12.5px;
 color: var(--sp-text-muted);
 margin: 0;
}

.sp-card-note {
 width: 100%;
 margin: 2px 0 0;
 border: 1px solid var(--sp-border);
 background: #F9FAFB;
 border-radius: 10px;
 padding: 7px 10px;
 min-height: 36px;
 font-size: 12.5px;
 color: var(--sp-text);
 transition: border-color 0.15s, background 0.15s;
}

.sp-card-note:focus {
 outline: none;
 background: #FFFFFF;
 border-color: var(--sp-text);
}

/* View 2: Clean Shotpik Split-View (2 Columns: Left Concept List + Right Portrait Photo Grid) */
.sp-split-layout {
 display: grid;
 grid-template-columns: 330px minmax(0, 1fr);
 gap: 20px;
 align-items: start;
 margin-top: 6px;
}

.sp-split-sidebar {
 border: 1px solid var(--sp-border);
 border-radius: 16px;
 background: var(--sp-surface);
 overflow: hidden;
 max-height: 76vh;
 overflow-y: auto;
 position: sticky;
 top: 76px;
}

.sp-split-group-title {
 padding: 9px 14px;
 background: var(--sp-subtle);
 font-size: 11.5px;
 font-weight: 700;
 color: var(--sp-text-secondary);
 border-bottom: 1px solid var(--sp-border);
 display: flex;
 justify-content: space-between;
}

.sp-split-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 10px 12px;
 border-bottom: 1px solid var(--sp-border);
 cursor: pointer;
 transition: background 0.12s;
}

.sp-split-item:hover {
 background: #F9FAFB;
}

.sp-split-item.active {
 background: var(--sp-subtle);
}

.sp-split-item img,
.sp-split-thumb-fallback {
 width: 48px;
 height: 48px;
 border-radius: 10px;
 object-fit: cover;
 flex-shrink: 0;
 background: var(--sp-subtle);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 11px;
 font-weight: 700;
 color: var(--sp-text-muted);
}

.sp-split-info {
 flex: 1;
 min-width: 0;
}

.sp-split-info h4 {
 font-size: 13.5px;
 font-weight: 600;
 margin: 0 0 2px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.sp-split-info p {
 font-size: 11.5px;
 color: var(--sp-text-muted);
 margin: 0;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.sp-split-pick {
 width: 30px;
 height: 30px;
 min-height: 30px;
 padding: 0;
 border-radius: 999px;
 border: 1px solid var(--sp-border-strong);
 background: #FFFFFF;
 color: var(--sp-text-secondary);
 font-size: 12px;
 flex-shrink: 0;
}

.sp-split-pick.is-selected {
 background: var(--sp-red);
 border-color: var(--sp-red);
 color: #FFFFFF;
}

/* Mobile Wrapped Concept Selector for Split View (Zero Clipping!) */
.sp-mobile-concept-chips {
 display: none;
 flex-wrap: wrap;
 gap: 6px;
 margin-bottom: 12px;
}

.sp-mobile-chip {
 border: 1px solid var(--sp-border);
 background: #FFFFFF;
 color: var(--sp-text-secondary);
 padding: 6px 11px;
 min-height: 34px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 600;
 display: inline-flex;
 align-items: center;
 gap: 5px;
}

.sp-mobile-chip.active {
 background: var(--sp-dark-pill);
 border-color: var(--sp-dark-pill);
 color: #FFFFFF;
}

.sp-mobile-chip.is-selected {
 border-color: var(--sp-red);
}

.sp-split-stage {
 border: 1px solid var(--sp-border);
 border-radius: 16px;
 padding: 18px;
 background: #FFFFFF;
}

.sp-stage-header {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 padding-bottom: 14px;
 border-bottom: 1px solid var(--sp-border);
 margin-bottom: 14px;
}

.sp-stage-photos-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 10px;
 margin-bottom: 14px;
}

.sp-stage-photo-item {
 position: relative;
 aspect-ratio: 3 / 4;
 border-radius: 12px;
 overflow: hidden;
 background: var(--sp-subtle);
 cursor: pointer;
}

.sp-stage-photo-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

/* Floating Bottom Bar */
.sp-bottom-dock {
 position: fixed;
 bottom: 16px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 80;
 width: min(560px, calc(100vw - 24px));
 background: rgba(24, 24, 27, 0.95);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 color: #FFFFFF;
 padding: 8px 10px 8px 16px;
 border-radius: 999px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.sp-dock-info {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 13px;
 font-weight: 500;
 min-width: 0;
}

.sp-dock-badge {
 background: var(--sp-red);
 color: #FFFFFF;
 padding: 2px 9px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 700;
 flex-shrink: 0;
}

.sp-dock-btn {
 background: var(--sp-red);
 color: #FFFFFF;
 border: 0;
 padding: 8px 15px;
 min-height: 36px;
 border-radius: 999px;
 font-size: 12.5px;
 font-weight: 600;
 white-space: nowrap;
 flex-shrink: 0;
}

.sp-dock-btn.is-sent {
 background: var(--sp-green);
}

/* Shotpik Album Detail Dialog (Image 3) */
.sp-dialog {
 width: min(1040px, 95vw);
 max-height: 92dvh;
 border-radius: 20px;
 border: 1px solid var(--sp-border);
 background: #FFFFFF;
 padding: 20px;
 overflow-y: auto;
}

.sp-dialog-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 flex-wrap: wrap;
 padding-bottom: 14px;
 border-bottom: 1px solid var(--sp-border);
 margin-bottom: 14px;
}

.sp-dialog-photos {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 12px;
 margin-top: 14px;
}

.sp-dialog-photo {
 position: relative;
 aspect-ratio: 3 / 4;
 border-radius: 12px;
 overflow: hidden;
 background: var(--sp-subtle);
}

.sp-dialog-photo img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

/* Admin Concept Editor & Report */
.concept-editor-item{background:var(--bg);padding:20px;margin:16px 0;border:1px solid var(--line);border-radius:12px}
.concept-media-manager{border:1px dashed var(--line);background:var(--paper);padding:16px;margin-top:12px;border-radius:10px}
.concept-url-adder{display:flex;gap:8px;margin-bottom:12px}
.concept-url-adder input{margin:0;flex:1}
.concept-thumbs-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:10px}
.concept-thumb-card{border:1px solid var(--line);padding:6px;background:var(--bg);display:flex;flex-direction:column;gap:6px;border-radius:8px}
.concept-thumb-card img{width:100%;height:90px;object-fit:cover;display:block;border-radius:6px}
.concept-thumb-card button{width:100%;padding:4px 8px;min-height:30px;font-size:12px}

.report-concepts-list{display:grid;gap:14px}
.report-concept-item{display:flex;gap:16px;padding:16px;background:#ffffff;border:1px solid #e5e7eb;border-radius:14px;align-items:flex-start}
.report-concept-thumb{width:110px;height:82px;object-fit:cover;border:1px solid #e5e7eb;border-radius:10px;flex:none}
.report-concept-info{flex:1;min-width:0}
.report-concept-note{margin:8px 0 0;padding:10px 12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;font-size:14px}

.concept-gallery-dialog{max-height:92dvh;overflow-y:auto;border-radius:18px}
.concept-gallery-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px}
.concept-gallery-item{margin:0;border:1px solid #e5e7eb;background:#f9fafb;padding:4px;border-radius:12px}
.concept-gallery-item img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:9px}

/* Responsive Breakpoints (Tablet & Mobile Phones) */
@media(max-width:1024px){
 .sp-album-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 .sp-split-layout {
  grid-template-columns: 1fr;
 }
 .sp-split-sidebar {
  display: none;
 }
 .sp-mobile-concept-chips {
  display: flex;
 }
 .sp-stage-photos-grid,
 .sp-dialog-photos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
}

@media(max-width:760px){
 .concept-studio-app header {
  margin: 8px 10px 0;
  height: 50px;
  padding: 0 14px;
 }
 .sp-shell {
  padding: 0 8px;
 }
 .sp-container {
  padding: 14px;
  border-radius: 16px;
 }
 .sp-cover-banner {
  height: 130px;
  padding: 14px 16px;
 }
 .sp-album-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 10px;
 }
 .sp-stage-photos-grid,
 .sp-dialog-photos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
 }
 .sp-filter-group {
  width: 100%;
 }
 .sp-filter-tab {
  flex: 1 1 auto;
  justify-content: center;
  padding: 6px 9px;
  font-size: 12px;
 }
 .concept-url-adder{flex-direction:column}
 .report-concept-item{flex-direction:column}
 .report-concept-thumb{width:100%;height:160px}
}

@media(max-width:420px){
 .sp-album-grid {
  grid-template-columns: 1fr;
 }
}