/* ChiCong Studio — quiet typography, warm surfaces, generous space. */
:root {
  --paper:#f8f7f4; --surface:#fff; --ink:#272e29; --muted:#687168;
  --line:#e2e5dd; --green:#304e40; --green-light:#edf2ec;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --gutter:clamp(24px,4.5vw,72px);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.5; }
a,button,input,textarea,select { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #7d9c89; outline-offset:4px; }
img { display:block; width:100%; height:auto; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; line-height:1.15; letter-spacing:-.035em; }
h1 { font-size:clamp(44px,5.6vw,76px); }
h2 { font-size:clamp(32px,3.6vw,48px); }
h3 { font-size:28px; }
p { color:var(--muted); }
em { font-weight:400; }
.icon { display:inline-block; width:19px; height:19px; flex-shrink:0; vertical-align:middle; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.label { font:500 11px/1.6 var(--sans); letter-spacing:.16em; color:var(--muted); margin-bottom:22px; }
.page-width,.public-nav,.public-footer { width:calc(100% - var(--gutter)*2); max-width:1280px; margin-inline:auto; }
.wordmark { min-width:0; overflow-wrap:anywhere; display:inline-flex; flex-direction:column; align-items:flex-start; font:36px/1.1 var(--serif); letter-spacing:-1.7px; }
.wordmark span { font:500 10px/1.6 var(--sans); letter-spacing:.14em; margin-top:8px; text-transform:uppercase; overflow-wrap:anywhere; }
.public-nav { min-height:112px; display:flex; align-items:center; justify-content:space-between; gap:40px; border-bottom:1px solid var(--line); }
.public-nav>.wordmark { min-width:0; }
.public-nav nav { display:flex; gap:36px; align-items:center; font-size:13px; }
.public-nav nav a { padding:10px 0; color:var(--muted); border-bottom:1px solid transparent; }
.public-nav nav a:hover,.public-nav nav a[aria-current] { color:var(--ink); border-color:var(--green); }
.mobile-menu { display:none; }
.btn,.small-btn { min-height:46px; border:1px solid var(--green); border-radius:5px; background:var(--green); color:white; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 21px; font-size:13px; line-height:1.5; font-weight:500; transition:background .18s,border-color .18s; }
.btn:hover { background:#233e32; border-color:#233e32; }
.btn-outline { border-color:#b6bcb2; background:transparent; color:var(--ink); }
.btn-outline:hover { background:var(--ink); border-color:var(--ink); color:white; }
.small-btn { min-height:42px; border-color:var(--line); background:var(--surface); color:var(--ink); padding:10px 16px; }
.small-btn:hover { border-color:#b9c3b7; background:#f4f6f0; }
.underlink,.link-btn { border:0; border-bottom:1px solid #a4b1a3; padding:5px 0; background:none; font-size:13px; display:inline-flex; align-items:center; gap:8px; line-height:1.5; color:var(--green); }
.underlink:hover,.link-btn:hover { border-color:var(--green); color:#172f23; }
.new-hero { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,88px); padding:60px 0 80px; align-items:stretch; }
.hero-copy { display:flex; flex-direction:column; align-items:flex-start; padding-top:30px; }
.hero-copy h1 { font-size:clamp(48px,5.1vw,74px); line-height:1.08; letter-spacing:-.05em; max-width:580px; }
.hero-copy>p:not(.label) { max-width:370px; font-size:15px; line-height:1.9; margin-top:28px; }
.hero-copy .btn { margin-top:30px; }
.hero-foot { margin-top:auto; padding-top:48px; display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.hero-visual { display:block; position:relative; min-height:590px; overflow:hidden; background:#edece6; }
.hero-visual img { height:100%; object-fit:cover; }
.hero-visual:after { content:''; position:absolute; inset:65% 0 0; background:linear-gradient(transparent,#17221a66); pointer-events:none; }
.image-label { position:absolute; bottom:24px; left:26px; right:26px; z-index:1; color:#fff; font-family:var(--serif); font-size:25px; }
.hero-visual.is-empty:after { display:none; }
.hero-visual.is-empty .image-label { color:#697362; font:11px var(--sans); letter-spacing:.12em; text-align:center; text-transform:uppercase; }
.empty-cover { background:#eceee7; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-height:250px; width:100%; height:100%; color:#6d7668; text-align:center; font-size:13px; }
.empty-cover>.icon { width:26px; height:26px; opacity:.7; }
.hero-placeholder { padding:46px; background:#e9ece3; }
.placeholder-frame { border:1px solid #bac4b4; width:100%; height:100%; min-height:460px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 22px; }
.placeholder-frame>.icon { width:30px; height:30px; margin-bottom:28px; color:#83927d; }
.placeholder-frame>span { font:clamp(27px,2.9vw,41px)/1.25 var(--serif); letter-spacing:-.035em; color:#52634d; }
.placeholder-frame>small { font-size:10px; letter-spacing:.12em; margin-top:32px; color:#626f5c; }
.featured { padding:68px 0 80px; border-top:1px solid var(--line); }
.section-top { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; margin-bottom:40px; }
.album-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.album-card { display:block; min-width:0; }
.album-card img { height:410px; object-fit:cover; transition:filter .2s; }
.album-card:hover img { filter:brightness(.94); }
.album-meta { padding:20px 0; }
.album-meta .label { margin-bottom:9px; font-size:10px; }
.album-meta h3 { font-size:25px; overflow-wrap:anywhere; }
.album-grid>.empty-state { grid-column:1/-1; }
.note-section { border-top:1px solid var(--line); padding:76px 12%; text-align:center; }
.note-section>p:not(.label) { font:clamp(27px,3vw,40px)/1.5 var(--serif); letter-spacing:-.035em; color:var(--ink); }
.note-section .underlink { margin-top:28px; }
.public-cta { border-top:1px solid var(--line); text-align:center; padding:84px 0; }
.public-cta h2 { font-size:clamp(38px,4.4vw,60px); margin-bottom:30px; }
.footer-main { padding:40px 0; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer-main p,.footer-main>div { font-size:13px; }
.footer-main>div { display:flex; flex-direction:column; gap:8px; }
.footer-bottom { padding:22px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:22px; color:var(--muted); font-size:11px; }
.page-title { padding:68px 0 48px; }
.page-title h1 { max-width:950px; margin-bottom:24px; }
.page-title>p:not(.label) { max-width:570px; font-size:15px; line-height:1.9; }
.portfolio-section { padding-bottom:76px; }
.filter-row { display:flex; flex-wrap:wrap; gap:28px; border-block:1px solid var(--line); padding:15px 0; margin-bottom:36px; }
.filter-row button { min-height:38px; border:0; border-bottom:1px solid transparent; background:none; padding:6px 0; font-size:13px; color:var(--muted); }
.filter-row button.active { color:var(--green); border-bottom-color:var(--green); }
.album-line { border-top:1px solid var(--line); padding-top:22px; margin-top:32px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:13px; color:var(--muted); }
.photo-section { padding-bottom:80px; }
.photo-grid { columns:3; column-gap:24px; }
.photo-item { break-inside:avoid; margin-bottom:28px; }
.photo-open { border:0; padding:0; background:none; display:block; width:100%; }
.photo-open img { width:100%; height:auto; }
.photo-info { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; font-size:12px; overflow-wrap:anywhere; }
.photo-info>span { min-width:0; }
.pick { border:1px solid var(--line); background:transparent; width:44px; height:44px; border-radius:50%; font-size:22px; flex-shrink:0; }
.pick.picked { background:var(--green); border-color:var(--green); color:white; }
.client-toolbar { position:sticky; top:12px; z-index:2; display:flex; align-items:center; gap:18px; padding:20px 24px; margin-bottom:30px; background:#fbfbf8f5; backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:8px; }
.client-toolbar>div { margin-right:auto; }
.client-toolbar strong { font-size:15px; font-weight:500; }
.client-toolbar p { font-size:13px; margin-top:3px; }
.success-note { background:var(--green-light); color:var(--green); border:1px solid #dce6d9; border-radius:6px; padding:16px 20px; font-size:14px; margin-bottom:24px; }
.gallery-lock { max-width:540px; text-align:center; padding:72px 0 90px; }
.gallery-lock h1 { font-size:50px; }
.gallery-lock>p { font-size:15px; margin:22px 0; }
.gallery-lock form { text-align:left; max-width:370px; margin:32px auto 0; }
.gallery-lock .btn { width:100%; }
.lock-icon { display:grid; place-items:center; width:60px; height:60px; border:1px solid #d7dfd2; border-radius:50%; margin:28px auto; color:var(--green); }
.lock-icon .icon { width:24px; height:24px; }
.about-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding-bottom:85px; }
.about-art img { max-height:660px; object-fit:cover; }
.about-art .empty-cover { min-height:470px; }
.about-layout h2 { margin-bottom:26px; }
.long-copy { white-space:pre-line; font-size:16px; line-height:1.9; margin-bottom:24px; }
.about-layout .btn { margin-top:28px; }
.booking-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(45px,8vw,110px); padding-bottom:85px; }
.booking-layout aside h2 { font-size:32px; margin-bottom:24px; }
#booking-calendar { max-width:430px; }
.calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0 20px; }
.calendar-heading button { border:1px solid var(--line); border-radius:50%; background:transparent; width:42px; height:42px; }
.calendar-heading strong { font-size:13px; font-weight:500; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.calendar-grid>* { min-height:44px; display:grid; place-items:center; font-size:13px; }
.calendar-grid button { border:1px solid transparent; background:#ecefe6; border-radius:4px; }
.calendar-grid button:hover:not(:disabled),.calendar-grid button.chosen { background:var(--green); color:white; }
.calendar-grid button:disabled { background:transparent; color:#a5aba0; opacity:1; }
.calendar-grid button.busy { color:#916558; background:#eee6e0; text-decoration:line-through; }
.calendar-grid button[aria-current=date] { box-shadow:inset 0 0 0 1px #74916f; }
.weekday { color:var(--muted); font-size:11px; }
.calendar-legend { display:flex; flex-wrap:wrap; gap:16px; font-size:11px; color:var(--muted); margin-top:18px; }
.calendar-legend span { display:flex; align-items:center; gap:6px; }
.calendar-legend i { width:7px; height:7px; border-radius:2px; background:#d3ddc7; }
.calendar-legend i.busy { background:#cfb1a4; }
.contact-links { display:flex; flex-direction:column; font-size:13px; gap:10px; margin-top:30px; }
.form-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
form label,.admin-filters label { display:block; font-size:13px; font-weight:500; margin-bottom:22px; min-width:0; }
input,textarea,select { display:block; width:100%; min-width:0; border:1px solid #d9ded4; border-radius:5px; background:#fff; padding:12px 13px; margin-top:8px; font-size:15px; line-height:1.5; transition:border-color .15s; }
input:hover,textarea:hover,select:hover { border-color:#b3beaf; }
input:focus,textarea:focus,select:focus { border-color:#65806a; }
input::placeholder,textarea::placeholder { color:#778073; font-weight:400; }
textarea { resize:vertical; min-height:110px; }
.form-note { font-size:13px; line-height:1.8; margin-bottom:24px; }
.form-error { color:#9d4534; font-size:13px; margin:14px 0; }
.form-error:empty { display:none; }
.trap { position:absolute; left:-9999px; }
.booking-date-field { min-width:0; }
.booking-date-field label { margin-bottom:8px; }
.booking-date-field .link-btn { min-height:32px; }
.booking-date-feedback { margin:0 0 24px; }
.date-unavailable { color:#9d4534; }
.booking-success { padding:36px; background:var(--green-light); border:1px solid #d7e2d2; border-radius:8px; }
.booking-success>span { font-size:30px; color:var(--green); }
.booking-success h2 { margin:20px 0; }
.booking-success p { margin-bottom:16px; font-size:14px; }
.booking-success .btn { margin-top:12px; }
.empty-state { padding:56px 28px; border:1px solid var(--line); border-radius:8px; text-align:center; color:var(--muted); background:#fcfcf9; }
.empty-state h3 { font:500 17px/1.5 var(--sans); letter-spacing:-.015em; margin-bottom:8px; color:var(--ink); }
.empty-state p { font-size:14px; max-width:420px; margin:auto; }
.empty-icon { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 18px; border:1px solid #dce3d6; background:#f2f5ed; border-radius:12px; color:#657d60; }
.empty-icon .icon { width:22px; height:22px; }
.loading { min-height:100dvh; display:grid; place-content:center; gap:20px; text-align:center; }
.loader { width:28px; height:28px; border:1px solid var(--line); border-top-color:var(--green); border-radius:50%; margin:auto; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.skip { position:fixed; top:-100px; left:20px; z-index:100; background:var(--green); color:white; padding:10px 20px; border-radius:4px; }
.skip:focus { top:15px; }
.modal-open { overflow:hidden; }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:white; padding:14px 20px; border-radius:6px; font-size:14px; max-width:min(600px,calc(100% - 32px)); z-index:100; opacity:0; pointer-events:none; transition:opacity .18s; box-shadow:0 6px 24px #14241818; }
#toast.show { opacity:1; }
dialog::backdrop { background:#18211ab0; backdrop-filter:blur(4px); }
#lightbox { border:0; border-radius:8px; background:#171e19; color:white; padding:50px 60px 24px; width:min(1200px,96vw); max-width:96vw; max-height:94dvh; }
#lightbox img { width:100%; height:65dvh; object-fit:contain; }
#lightbox figcaption { padding-top:15px; text-align:center; font-size:13px; color:#d1d9ce; overflow-wrap:anywhere; }
#lightbox button { position:absolute; border:1px solid #ffffff55; background:none; color:white; width:44px; height:44px; border-radius:50%; font-size:21px; }
.close { right:14px; top:12px; }
.photo-prev { left:8px; top:45%; }.photo-next { right:8px; top:45%; }
.lightbox-controls { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:18px; flex-wrap:wrap; }
#lightbox .lightbox-controls button { position:static; display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; min-height:44px; padding:10px 18px; border-radius:5px; font-size:14px; background:#eef3eb; color:#233f2b; border-color:#eef3eb; }
#lightbox .lightbox-controls button[aria-pressed=true] { background:#395844; color:white; border-color:#829c7c; }
.lightbox-controls p { color:#c6d0c0; font-size:13px; }
#editor { background:white; color:var(--ink); width:min(630px,calc(100% - 32px)); max-height:90dvh; border:1px solid #e6e9e1; border-radius:12px; padding:30px; overflow:auto; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.dialog-heading h2 { font:500 23px/1.35 var(--sans); letter-spacing:-.025em; overflow-wrap:anywhere; }
.dialog-heading .close { position:static; width:36px; height:36px; flex-shrink:0; border:1px solid var(--line); border-radius:50%; background:#fafbf7; color:var(--muted); font-size:22px; }
.login-page { min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; padding:52px 24px; }
.login-card { background:white; border:1px solid var(--line); border-radius:10px; width:min(460px,100%); padding:36px; }
.login-card h1 { font-size:35px; margin-bottom:16px; }
.login-card>p:not(.label) { font-size:14px; margin-bottom:28px; }
.login-card .label { font-size:10px; }
.login-card .btn { width:100%; }
.muted { color:var(--muted); }
/* The studio uses a compact sans serif hierarchy around the photography. */
.admin-layout { display:grid; grid-template-columns:224px minmax(0,1fr); min-height:100dvh; background:#f7f8f4; }
.sidebar { background:#fbfcf9; border-right:1px solid var(--line); padding:34px 18px 24px; position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; min-width:0; }
.sidebar .wordmark { font-size:32px; margin-left:15px; }
.sidebar .wordmark span { font-size:9px; letter-spacing:.2em; }
.sidebar-label { font-size:10px; font-weight:500; letter-spacing:.13em; margin:48px 15px 15px; color:#747e6f; }
.sidebar nav { display:flex; flex-direction:column; gap:5px; }
.sidebar nav button { border:0; background:transparent; color:#65715f; padding:12px 14px; min-height:44px; display:flex; align-items:center; gap:12px; text-align:left; border-radius:6px; font-size:13px; white-space:nowrap; }
.sidebar nav button .icon { width:18px; height:18px; }
.sidebar nav button.active { color:#2f4b35; background:#e7eee2; font-weight:500; }
.sidebar nav button:hover:not(.active) { background:#eff3e9; color:var(--ink); }
.sidebar-bottom { margin-top:auto; display:flex; flex-direction:column; gap:20px; padding:30px 14px 0; font-size:12px; }
.studio-signature { color:#6e7867; font:italic 14px/1.6 var(--serif); max-width:155px; }
.sidebar-bottom button { min-height:40px; display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; text-align:left; color:var(--muted); }
.sidebar-bottom .icon { width:16px; height:16px; }
.admin-main { min-width:0; }
.admin-topbar { height:76px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 42px; gap:24px; font-size:12px; color:var(--muted); }
.breadcrumb { display:flex; align-items:center; gap:12px; min-width:0; }
.breadcrumb>span:nth-child(2) { color:#a2ad9b; }
.breadcrumb strong { color:#515d4b; font-weight:400; }
.admin-topbar>a { display:inline-flex; align-items:center; gap:6px; min-height:36px; color:#4c6045; white-space:nowrap; }
.admin-topbar .icon { width:16px; height:16px; }
.admin-content { padding:42px; max-width:1440px; margin:auto; }
.admin-heading { display:flex; justify-content:space-between; align-items:center; gap:26px; margin-bottom:30px; }
.admin-heading h1 { font:500 32px/1.3 var(--sans); letter-spacing:-.035em; overflow-wrap:anywhere; }
.admin-heading p { margin-top:9px; font-size:14px; line-height:1.7; max-width:650px; }
.admin-heading>.btn,.admin-heading>.small-btn { flex-shrink:0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:9px; background:white; padding:24px 0; margin-bottom:28px; }
.stat-card { display:flex; flex-direction:column; gap:6px; padding:0 26px; border-right:1px solid var(--line); }
.stat-card:last-child { border-right:0; }
.stat-card>span { font-size:12px; color:var(--muted); }
.stat-card>strong { font-size:36px; line-height:1.4; font-weight:500; letter-spacing:-.045em; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat-card small { font-size:11px; color:var(--muted); }
.panel { background:white; border:1px solid var(--line); border-radius:9px; padding:26px; margin-bottom:25px; min-width:0; }
.panel h2 { font:500 16px/1.5 var(--sans); letter-spacing:-.015em; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
.panel>.empty-state { border:0; background:transparent; padding:45px 16px; }
.table-wrap { overflow:auto; }
table { border-collapse:collapse; width:100%; min-width:600px; text-align:left; font-size:13px; }
thead th { padding:12px 14px 16px 0; font-size:11px; font-weight:500; color:var(--muted); border-bottom:1px solid var(--line); }
tbody td { padding:20px 14px 20px 0; border-bottom:1px solid #edf0e7; vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
td strong { font-weight:500; display:block; }
td small { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.row-action { text-align:right; padding-right:0; }
.row-action .link-btn { border:0; min-height:36px; white-space:nowrap; font-size:12px; }
.row-action .icon { width:15px; height:15px; }
.badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; line-height:1.5; font-weight:500; border-radius:5px; padding:5px 8px; background:#f0f2ec; color:#5c6754; white-space:nowrap; }
.badge.published,.badge.confirmed,.badge.submitted { background:#eaf2e5; color:#3b642e; }
.badge.private,.badge.contacted { background:#edf1ef; color:#4a6661; }
.badge.new { background:#f6f0df; color:#79652f; }
.badge.cancelled,.badge.archived { background:#f4ece8; color:#866253; }
.admin-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.quick-start { background:#edf2e7; border-color:#dce5d3; }
.quick-start p { font-size:14px; margin:16px 0 22px; max-width:400px; }
.panel-note { font-size:14px; margin:20px 0; line-height:1.8; }
.selection-alert { width:100%; border:0; border-bottom:1px solid var(--line); background:none; padding:16px 0; display:flex; gap:15px; text-align:left; font-size:13px; }
.readiness-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.readiness-item { display:flex; align-items:flex-start; gap:12px; text-align:left; border:0; border-right:1px solid var(--line); background:transparent; padding:5px 18px 5px 0; min-width:0; }
.readiness-item:last-child { border-right:0; padding-right:0; }
.readiness-item:hover strong { color:var(--green); text-decoration:underline; text-underline-offset:4px; }
.readiness-item strong { font-size:13px; font-weight:500; }
.readiness-item p { font-size:12px; line-height:1.7; margin-top:5px; }
.readiness-icon { width:28px; height:28px; display:grid; place-items:center; border:1px solid #dee4d6; border-radius:50%; color:#718064; flex-shrink:0; }
.readiness-icon .icon { width:14px; height:14px; }
.readiness-icon.done { background:#eaf3e3; border-color:#c8dcb8; color:#466d32; }
.admin-filters { display:flex; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.admin-filters label { margin:0; min-width:180px; flex:1; font-size:12px; color:#5b6854; }
.admin-filters label:first-child { flex:2; }
.admin-filters input,.admin-filters select { margin-top:7px; font-size:13px; min-height:46px; }
.search-input { display:block; position:relative; }
.search-input>.icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:#77876d; pointer-events:none; }
.search-input input { padding-left:40px; }
.admin-filters p { margin-left:4px; padding-bottom:13px; font-size:12px; font-variant-numeric:tabular-nums; }
.filter-empty { background:#fff; border:1px solid var(--line); border-radius:7px; padding:24px; margin-bottom:24px; font-size:14px; }
.admin-album-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.admin-album-grid>.empty-state { grid-column:1/-1; padding-block:76px; background:white; }
.admin-album { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:white; padding:0; text-align:left; min-width:0; transition:border-color .15s; }
.admin-album:hover { border-color:#8ea280; }
.admin-album img,.admin-album>.empty-cover { height:260px; min-height:260px; object-fit:cover; }
.admin-album-info { padding:20px; }
.admin-album-info h3 { font:500 18px/1.4 var(--sans); letter-spacing:-.025em; margin-top:14px; overflow-wrap:anywhere; }
.admin-album-info p { font-size:12px; margin-top:7px; }
.pick-status { display:block; margin-top:12px; color:#4b713a; font-size:12px; }
.back-btn { margin-bottom:24px; font-size:12px; }
.album-detail-top { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:26px; font-size:13px; }
.upload-panel { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:26px; margin-bottom:28px; background:#eff4e9; border:1px solid #dce5d3; border-radius:8px; }
.upload-panel h3 { font:500 17px/1.5 var(--sans); letter-spacing:-.02em; }
.upload-panel p { font-size:13px; margin-top:7px; max-width:520px; }
.upload-panel form { display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex-shrink:0; max-width:375px; }
.upload-label { margin:0!important; font-size:12px; }
input[type=file] { border:0; padding:5px 0; background:transparent; font-size:12px; max-width:230px; }
input[type=file]::file-selector-button { background:white; border:1px solid #cbd6c2; border-radius:4px; color:#405634; font:inherit; padding:8px 12px; margin-right:10px; cursor:pointer; }
.upload-panel .form-error { width:100%; color:#9d4534; }
.admin-photo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.manage-photo { background:white; border:1px solid var(--line); border-radius:7px; overflow:hidden; min-width:0; }
.manage-photo.client-picked { border-color:#678e50; box-shadow:0 0 0 1px #678e50; }
.manage-photo img { height:210px; object-fit:cover; }
.manage-photo>div { padding:14px; }
.photo-number { font-size:11px; color:var(--muted); }
.manage-photo p { font-size:12px; overflow-wrap:anywhere; margin:6px 0 12px; }
.photo-actions { display:flex; flex-wrap:wrap; gap:7px; }
.photo-actions button { min-height:32px; border:1px solid var(--line); border-radius:4px; background:white; padding:5px 8px; font-size:11px; }
.photo-actions button:hover { background:#f1f5eb; }
.inquiry-summary { display:flex; align-items:center; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--muted); }
.inquiry-detail { font-size:14px; }
.inquiry-detail dt { font-size:11px; font-weight:500; color:var(--muted); margin-top:20px; }
.inquiry-detail dd { margin:5px 0; overflow-wrap:anywhere; }
.inquiry-detail .message { white-space:pre-wrap; border-radius:6px; background:#f5f7f0; padding:16px; }
[data-form=inquiry-status] { border-top:1px solid var(--line); padding-top:24px; margin-top:24px; }
[data-form=inquiry-status] .form-note { margin:0 0 24px; }
.date-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); font-size:13px; }
.date-row:last-child { border-bottom:0; }
.date-row strong { font-weight:500; }
.date-row small { display:block; font-size:12px; color:var(--muted); }
.panel form { margin-top:24px; }
.settings-panel,.backup-panel { max-width:800px; }
.backup-panel p { font-size:14px; margin:16px 0; }
.danger { background:#985340; border-color:#985340; }.danger:hover { background:#804531; border-color:#804531; }
/* Responsive layouts preserve content rather than shrinking it. */
@media (min-width:1600px) { .admin-content { padding-top:50px; } }
@media (max-width:1100px) {
  .admin-layout { grid-template-columns:204px minmax(0,1fr); }
  .sidebar { padding-inline:12px; }.admin-content { padding:32px 28px; }.admin-topbar { padding-inline:28px; }
  .stat-card { padding-inline:18px; }.admin-two { grid-template-columns:1fr; gap:0; }
  .readiness-grid { gap:14px; }.readiness-item { padding-right:12px; gap:9px; }
  .admin-album-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .upload-panel { flex-direction:column; align-items:flex-start; }
  .new-hero { gap:38px; }.hero-visual { min-height:550px; }.hero-placeholder { padding:30px; }.placeholder-frame { min-height:440px; }
  .hero-copy h1 { font-size:clamp(46px,5.5vw,61px); }.album-card img { height:340px; }
  .about-layout { gap:45px; }
}
@media (max-width:900px) {
  .readiness-grid { grid-template-columns:1fr; gap:0; }
  .readiness-item { padding:16px 0; border-right:0; border-bottom:1px solid var(--line); gap:14px; }
  .readiness-item:last-child { border-bottom:0; padding-bottom:0; }.readiness-item:first-child { padding-top:0; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:24px; }.stat-card:nth-child(2) { border-right:0; }
  .booking-layout { gap:40px; grid-template-columns:.9fr 1.1fr; }.calendar-grid>* { min-height:38px; }
}
@media (max-width:750px) {
  :root { --gutter:24px; }
  .public-nav { min-height:92px; position:relative; gap:20px; }.wordmark { font-size:32px; }.wordmark span { font-size:9px; letter-spacing:.1em; }
  .mobile-menu { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:40px; border:1px solid var(--line); border-radius:5px; padding:8px 12px; background:transparent; font-size:12px; flex-shrink:0; }
  .public-nav nav { display:none; position:absolute; top:91px; left:calc(-1*var(--gutter)); right:calc(-1*var(--gutter)); z-index:5; padding:18px var(--gutter); background:#fbfaf7; border-bottom:1px solid var(--line); box-shadow:0 12px 20px #17241508; }
  .public-nav nav.open { display:flex; flex-direction:column; align-items:stretch; gap:8px; }.public-nav nav a { padding:10px 0; }
  .new-hero { grid-template-columns:1fr; padding:40px 0 54px; gap:32px; }.hero-copy { padding:0; }.hero-copy h1 { font-size:clamp(43px,9.5vw,64px); max-width:600px; line-height:1.1; }
  .hero-copy>p:not(.label) { font-size:14px; margin-top:22px; max-width:440px; }.hero-copy .btn { margin-top:24px; }.hero-foot { padding-top:30px; font-size:10px; }
  .hero-visual { min-height:0; height:480px; }.hero-placeholder { padding:32px; }.placeholder-frame { min-height:0; }.placeholder-frame>span { font-size:38px; }
  .hero-visual.is-empty .image-label { bottom:11px; font-size:9px; }.placeholder-frame>small { font-size:9px; letter-spacing:.08em; }
  .featured { padding:45px 0 56px; }.section-top { align-items:flex-start; flex-direction:column; gap:20px; margin-bottom:28px; }
  .album-grid { gap:30px; grid-template-columns:1fr; }.album-card img { height:auto; max-height:650px; object-fit:cover; }.album-meta { padding:16px 0 0; }
  .note-section { padding:50px 0; }.note-section>p:not(.label) { font-size:29px; }.public-cta { padding:56px 0; }.public-cta h2 { font-size:39px; }
  .footer-main { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:24px; padding:32px 0; }.footer-main p { font-size:12px; }.footer-main>div { grid-column:1/-1; }.footer-main>div:empty { display:none; }
  .footer-bottom { flex-wrap:wrap; font-size:11px; gap:15px; }.footer-bottom>span:last-child { display:none; }
  .page-title { padding:42px 0 34px; }.page-title h1 { font-size:clamp(40px,9vw,60px); }.page-title>p:not(.label) { font-size:14px; }
  .label { font-size:10px; margin-bottom:18px; }.filter-row { gap:18px; margin-bottom:28px; }.filter-row button { font-size:12px; }
  .photo-grid { columns:2; column-gap:14px; }.photo-info { gap:7px; font-size:12px; }.photo-section { padding-bottom:52px; }
  .client-toolbar { top:0; padding:16px; flex-wrap:wrap; gap:12px; }.client-toolbar>div { flex-basis:100%; }.client-toolbar p { font-size:12px; }
  .client-toolbar .btn,.client-toolbar .small-btn { padding:10px 12px; font-size:12px; }
  .gallery-lock { padding:46px 0 64px; }.gallery-lock h1 { font-size:43px; }
  .about-layout { grid-template-columns:1fr; gap:35px; padding-bottom:60px; }.about-art img { max-height:540px; }.about-art .empty-cover { min-height:330px; }
  .booking-layout { grid-template-columns:1fr; gap:38px; padding-bottom:60px; }.booking-layout aside h2 { font-size:31px; }.calendar-grid>* { min-height:44px; }#booking-calendar { max-width:none; }
  input,textarea,select { font-size:16px; }.form-pair { gap:18px; }.form-note { font-size:13px; }.contact-links { margin-top:25px; }
  .admin-layout { grid-template-columns:minmax(0,1fr); }.sidebar { position:static; height:auto; padding:22px 24px 0; border-right:0; border-bottom:1px solid var(--line); }
  .sidebar .wordmark { margin:0; font-size:29px; max-width:calc(100% - 105px); }.sidebar .wordmark span { font-size:8px; margin-top:5px; }.sidebar-label,.studio-signature { display:none; }
  .sidebar nav { flex-direction:row; width:100%; overflow-x:auto; gap:5px; margin-top:22px; padding-bottom:14px; scrollbar-width:thin; }
  .sidebar nav button { padding:10px 13px; font-size:12px; gap:8px; flex-shrink:0; }.sidebar nav button .icon { width:16px; height:16px; }
  .sidebar-bottom { position:absolute; top:23px; right:24px; padding:0; margin:0; }.sidebar-bottom button { font-size:12px; min-height:36px; }.sidebar-bottom .icon { width:15px; height:15px; }
  .admin-topbar { height:56px; padding:0 24px; font-size:11px; gap:15px; }.breadcrumb { gap:9px; }
  .admin-content { padding:28px 24px 48px; }.admin-heading { flex-wrap:wrap; gap:18px; margin-bottom:24px; }.admin-heading h1 { font-size:28px; }.admin-heading p { font-size:13px; margin-top:8px; }
  .stats-grid { padding:20px 0; gap:22px 0; margin-bottom:24px; }.stat-card { padding:0 18px; }.stat-card>strong { font-size:32px; }.stat-card>span { font-size:11px; }.stat-card small { font-size:10px; }
  .panel { padding:20px; border-radius:8px; margin-bottom:22px; }.panel-heading { margin-bottom:16px; }.panel h2 { font-size:15px; }.panel-note,.quick-start p { font-size:13px; }
  .admin-filters { gap:14px; margin-bottom:22px; }.admin-filters label,.admin-filters label:first-child { flex-basis:100%; min-width:0; }.admin-filters input,.admin-filters select { font-size:16px; }.admin-filters p { padding:0; margin:0; font-size:11px; }
  .table-wrap { overflow:visible; }table { min-width:0; display:block; }thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }tbody { display:block; }
  tbody tr { display:grid; grid-template-columns:1fr auto; gap:12px; padding:20px 0; border-bottom:1px solid var(--line); }tbody tr:first-child { padding-top:0; }tbody tr:last-child { border-bottom:0; padding-bottom:0; }
  tbody td { border:0; padding:0; font-size:13px; min-width:0; overflow-wrap:anywhere; }.customer-cell { grid-column:1; grid-row:1; }.customer-cell strong { font-size:14px; }.customer-cell small { font-size:11px; }
  .status-cell { grid-column:2; grid-row:1; text-align:right; }.status-cell .badge { font-size:11px; }
  td[data-label="Dịch vụ"],td[data-label="Ngày dự kiến"] { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:12px; }
  td[data-label="Dịch vụ"]:before,td[data-label="Ngày dự kiến"]:before { content:attr(data-label); color:var(--muted); font-size:12px; }
  .row-action { grid-column:1/-1; text-align:right; }.row-action .link-btn { padding:6px 0; min-height:36px; }
  .admin-album-grid { gap:16px; }.admin-album img,.admin-album>.empty-cover { height:210px; min-height:210px; }.admin-album-info { padding:16px; }.admin-album-info h3 { font-size:17px; }
  .admin-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.manage-photo img { height:180px; }.manage-photo>div { padding:11px; }.photo-actions { gap:6px; }.photo-actions button { min-height:34px; }
  .upload-panel { padding:20px; gap:20px; }.upload-panel form { width:100%; max-width:100%; flex-shrink:1; }.upload-panel p { font-size:12px; }
  .album-detail-top { gap:12px; font-size:12px; }.album-detail-top .underlink { font-size:12px; }
  #editor { max-height:92dvh; padding:24px; border-radius:10px; }.dialog-heading h2 { font-size:21px; }.dialog-heading { margin-bottom:24px; }.dialog-heading .close { width:40px; height:40px; }
  #lightbox { padding:52px 47px 22px; border-radius:6px; }#lightbox img { height:55dvh; }.photo-prev { left:2px; }.photo-next { right:2px; }.lightbox-controls { gap:10px; }.lightbox-controls p { flex-basis:100%; text-align:center; font-size:12px; }
  .login-card { padding:30px 26px; }.login-card h1 { font-size:32px; }
}
@media (max-width:480px) {
  :root { --gutter:22px; }.hero-visual { height:405px; }.hero-placeholder { padding:26px; }.placeholder-frame>span { font-size:33px; }.placeholder-frame { padding-inline:16px; }
  .hero-foot { font-size:9px; }.hero-copy h1 { font-size:44px; }.image-label { font-size:23px; }
  .form-pair { grid-template-columns:minmax(0,1fr); gap:0; }
  .sidebar { padding-inline:20px; }.sidebar-bottom { right:20px; }.admin-topbar { padding-inline:20px; }.admin-content { padding-inline:20px; }
  .admin-album-grid { grid-template-columns:1fr; }.admin-album img,.admin-album>.empty-cover { height:280px; min-height:280px; }
  .booking-success { padding:25px; }.empty-state { padding:42px 20px; }
  .admin-heading>.btn,.admin-heading>.small-btn { min-height:44px; }
  .inquiry-summary { gap:9px; font-size:11px; }
}
@media (max-width:360px) {
  :root { --gutter:18px; }.hero-copy h1 { font-size:40px; }.wordmark { font-size:29px; }.wordmark span { font-size:8px; }
  .admin-content { padding-inline:16px; }.panel { padding:16px; }.sidebar-bottom button { font-size:10px; }
  .client-toolbar .btn,.client-toolbar .small-btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }*,*:before,*:after { animation:none!important; transition:none!important; }
}