:root{--ink:#202124;--muted:#85888b;--line:#e8e9ec;--paper:#f4f5f7;--blue:#58739f;--green:#64a86e;--red:#b94d48}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:14px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #8aa4cb;outline-offset:1px}
.hidden{display:none!important}
.eyebrow{font-size:11px;letter-spacing:1px;color:#81868e;margin:0 0 12px}
.brand-symbol{display:inline-block;width:38px;height:38px;flex:none;background:#fff url("assets/petal-mark.png") center/cover no-repeat;border-radius:50%}
.brand-symbol.large{width:66px;height:66px}
.login-screen{min-height:100vh;display:grid;place-items:center;background:#f5f6f8}
.login-box{width:min(390px,calc(100% - 36px));background:#fff;padding:40px;border:1px solid var(--line);border-radius:8px}
.login-box h1{font-size:24px;margin:0}
.login-box>p:not(.eyebrow){color:var(--muted);margin:10px 0 26px}
.login-box input{display:block;width:100%;height:42px;margin:10px 0;padding:0 12px;border:1px solid var(--line);border-radius:5px}
.login-box .primary{width:100%;margin-top:8px}
.login-box small{display:block;margin-top:14px;text-align:center;color:var(--muted);line-height:1.5}
.primary{height:38px;padding:0 18px;border-radius:5px;background:#5272a5;color:white}
.primary:hover{background:#42638f}
.app{display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-rows:62px minmax(calc(100vh - 62px),auto)}
.topbar{grid-column:1/3;grid-row:1;display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:#fff;border-bottom:1px solid #e9eaec}
.top-brand,.top-actions{display:flex;align-items:center;gap:11px}
.top-brand{font-size:18px;font-weight:600}
.topbar .brand-symbol{width:26px;height:26px}
.top-actions{color:#51545a}
.top-actions>span:first-child{margin-right:25px}
.top-actions button{background:#f6f7f8;color:#555;padding:8px 13px;border-radius:5px}
.tiny-mark{width:25px;height:25px;border-radius:50%;background:#fff url("assets/petal-mark.png") center/cover no-repeat}
.app>aside{grid-column:1;grid-row:2;background:#fff;border-right:1px solid #eceef0;padding:27px 12px;display:flex;flex-direction:column}
.nav-group-title{font-size:14px;color:#3c3f44;padding:4px 10px 20px}
nav{display:grid;gap:3px}
nav button{display:flex;align-items:center;justify-content:space-between;text-align:left;background:transparent;color:#62666d;padding:12px 15px;border-radius:6px}
nav button.active,nav button:hover{background:#f3f4f6;color:#282b30}
nav button span{font-size:12px;color:#92969d}
.side-foot{margin-top:auto;padding:15px 10px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#a0a3a8;font-size:11px}
.app>main{grid-column:2;grid-row:2;min-width:0;padding:30px;overflow:auto}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:4px 0 22px}
.page-title h2{font-size:20px;font-weight:600;margin:0}
.page-title span{font-size:12px;color:var(--muted);margin-left:10px}
.settings-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:16px;align-items:start}
.settings-main{display:grid;gap:14px;min-width:0}
.surface{background:#fff;border:1px solid #edf0f2;border-radius:8px;padding:22px 24px}
.surface-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.surface-heading h3{font-size:16px;font-weight:600;margin:0}
.text-action{background:transparent;color:var(--blue);padding:5px 8px}
.brand-overview{display:grid;grid-template-columns:78px minmax(220px,1fr) minmax(180px,.65fr);gap:16px;align-items:center}
.brand-overview .brand-symbol{justify-self:center}
.brand-summary{display:grid;gap:8px;min-width:0}
.brand-summary>div{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:start;gap:6px}
.brand-summary span,.brand-location label{font-size:12px;color:#92969b}
.brand-summary b,.brand-summary p,.brand-location b{font-size:13px;font-weight:400;line-height:1.5;color:#444;margin:0;overflow-wrap:anywhere}
.brand-location{display:grid;gap:10px}
.brand-location>div{display:grid;grid-template-columns:72px 1fr;align-items:start;gap:6px}
.brand-location>div>span{font-size:12px;color:#92969b}
.brand-edit-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 0 94px;padding-top:16px;border-top:1px solid #f0f1f2}
.brand-edit-fields label{display:grid;gap:6px;font-size:12px;color:#7a7f85}
.brand-edit-fields input,.brand-edit-fields textarea{width:100%;min-width:0;border:1px solid var(--line);border-radius:4px;padding:8px 9px;color:#333}
.brand-edit-fields .wide{grid-column:1/-1}
.config-surface{padding:0 24px}
.config-row{min-height:66px;border-bottom:1px solid #f0f1f2;display:grid;grid-template-columns:130px minmax(0,1fr) minmax(90px,auto);align-items:center;gap:18px;padding:13px 0}
.config-row:last-of-type{border-bottom:0}
.config-row>span{font-size:13px;color:#555a60}
.inline-field{display:flex;align-items:center;gap:18px;min-width:0;color:#666}
.inline-field select,.inline-field input{height:34px;border:0;border-bottom:1px solid #dce0e4;background:#fff;padding:0 6px;color:var(--blue);min-width:90px}
.nav-setting{justify-content:flex-end}
.nav-setting input{width:min(300px,100%)}
.upload-field{display:grid;gap:6px;min-width:0}
.upload-field input[type=file],.qr-surface input[type=file],#workModal input[type=file]{font-size:12px;color:#666}
.upload-field>input:not([type=file]),.upload-field textarea,.qr-surface>input:not([type=file]){width:100%;border:0;border-bottom:1px solid #dce0e4;padding:8px 5px;color:#40444a;min-width:0}
.upload-field textarea{resize:vertical}
.upload-field small,.qr-surface small,.upload-status{font-size:11px;color:#92969d;min-height:14px}
.upload-field .upload-hint{line-height:1.55;color:#7f8791}
.upload-field small.success,.upload-status.success{color:var(--green)}
.upload-field small.error,.upload-status.error{color:var(--red)}
.about-config{align-items:start}
.save-row{display:flex;justify-content:flex-end;align-items:center;gap:14px;padding:17px 0 20px}
#settingsStatus{font-size:12px;color:var(--muted)}
.qr-column{display:block!important;background:transparent!important;border:0!important;padding:0!important}
.qr-surface{min-height:280px;text-align:left}
.qr-preview{height:190px;margin:12px 0 15px;border:1px dashed #dfe2e6;display:grid;place-items:center;color:#a4a8ae;font-size:12px;overflow:hidden}
.qr-preview img{width:170px;height:170px;object-fit:contain}
.qr-surface>input[type=file]{max-width:100%;margin-bottom:8px}
.works-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 18px}
.toolbar{display:flex;align-items:center;gap:9px;margin:0}
.toolbar input,.toolbar select{height:38px;border:1px solid var(--line);background:white;border-radius:5px;padding:0 11px}
.toolbar input{width:min(320px,100%)}
.toolbar button,.outline-button{height:36px;padding:0 14px;border:1px solid var(--line);border-radius:5px;background:#fff;color:#51565d;white-space:nowrap}
.frame-picker{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fafafa}.frame-picker video{display:block;width:100%;max-height:220px;background:#111;object-fit:contain}.frame-time{display:flex;align-items:center;gap:10px;margin:10px 0}.frame-time input{flex:1}.frame-picker .upload-status{display:block;margin-top:7px}
.category-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:white;border:1px solid var(--line);border-bottom:0;padding:0 16px;min-height:54px}
.category-filters{display:flex;align-items:center;gap:4px;overflow:auto;scrollbar-width:thin}
.category-filter{height:52px;padding:0 13px;background:transparent;color:#85898f;white-space:nowrap;border-bottom:2px solid transparent}
.category-filter.active{color:#1769ed;border-color:#1769ed}
.works-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px 10px 10px;background:white;border:1px solid var(--line)}
.work-card,.selection-card{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;min-height:154px;padding:14px;border:1px solid #e8ebef;border-radius:4px;min-width:0}
.work-cover{position:relative;aspect-ratio:3/3.2;background:#f0f1f2;overflow:hidden;border-radius:3px;min-width:0}
.work-cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover-placeholder{width:100%;height:100%;display:grid;place-items:center;color:#a2a6ac;font-size:12px}
.view-count{position:absolute;right:7px;top:7px;padding:3px 6px;background:rgba(255,255,255,.88);border-radius:10px;color:#777;font-size:11px}
.work-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.work-copy h3{font-size:14px;font-weight:500;line-height:1.5;margin:1px 0 6px;overflow-wrap:anywhere}
.work-copy p{font-size:12px;color:#999;margin:0}
.work-meta{display:flex;gap:7px;margin-top:7px}
.pin-label{font-size:11px;color:#a26828;background:#fff5e9;padding:3px 7px;border-radius:10px}
.work-actions{display:flex;gap:13px;margin-top:auto;padding-top:9px;flex-wrap:wrap}
.work-actions button{padding:0;background:transparent;color:var(--blue);font-size:12px}
.empty-state{grid-column:1/-1;padding:54px 12px;text-align:center;color:var(--muted)}
.panel-note{color:var(--muted);font-size:12px;margin:-10px 0 16px}
.selection-card{position:relative}
.select-work{position:absolute;top:8px;left:8px;z-index:1;display:flex;align-items:center;gap:5px;padding:5px 7px;background:rgba(255,255,255,.94);border-radius:3px;font-size:11px;color:#555}
.select-work input{margin:0;accent-color:#2471e8}
.display-heading{display:flex;justify-content:space-between;align-items:center;margin:18px 2px 20px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:17px}
.display-heading span:last-child{font-size:13px;color:var(--muted)}
.display-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.display-work{position:relative;aspect-ratio:16/10;background:#e8e9eb;overflow:hidden;border-radius:4px}
.display-work>img{width:100%;height:100%;object-fit:cover}
.display-work>.cover-placeholder{position:absolute;inset:0}
.display-work>div{position:absolute;inset:auto 0 0;padding:32px 13px 12px;color:white;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.display-work h3{font-weight:500;font-size:15px;margin:0 0 4px}
.display-work span{font-size:12px;opacity:.84}
.is-fullscreen{background:#17191b!important;color:white;padding:40px!important;overflow:auto}
.is-fullscreen .display-heading{border-color:#3a3c3e}
.is-fullscreen .display-heading span:last-child{color:#aaa}
.is-fullscreen .display-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.table-wrap{background:white;border:1px solid var(--line);border-radius:8px;overflow:auto}
table{border-collapse:collapse;width:100%;text-align:left}
th,td{padding:14px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:11px;color:var(--muted);font-weight:500}
td{font-size:13px}
td:first-child{font-weight:500}
.cover-mini{width:48px;height:34px;object-fit:cover;vertical-align:middle;margin-right:10px;background:#f0f1f2;border-radius:3px}
.pill{font-size:11px;border-radius:10px;padding:4px 8px;background:#f0f1f3;color:#666}
.pill.published{background:#ebf5eb;color:#387644}
.row-actions button{color:var(--blue);background:transparent;margin-left:12px;font-size:12px}
.muted{color:var(--muted)}
.modal{position:fixed;inset:0;background:rgba(27,30,35,.34);display:grid;place-items:center;padding:20px;z-index:10}
.modal-card{width:min(560px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:8px;padding:30px;position:relative}
.modal-card h2{font-size:24px;margin:0 0 20px}
.close{position:absolute;right:18px;top:13px;background:transparent;font-size:25px;color:var(--muted)}
#workForm label{display:block;font-size:12px;margin:13px 0;color:#666}
#workForm label>input:not([type=checkbox]),#workForm label>select,#workForm label>textarea{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#workForm .check{display:flex;align-items:center;gap:8px}
.full{width:100%;margin-top:10px}
@media(max-width:1100px){.settings-layout{grid-template-columns:minmax(0,1fr) 200px}.brand-overview{grid-template-columns:64px minmax(0,1fr)}.brand-location{grid-column:2;grid-template-columns:1fr 1fr}.works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-card,.selection-card{grid-template-columns:96px minmax(0,1fr)}.display-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.app{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);grid-template-rows:60px auto auto}.topbar{grid-column:1;grid-row:1;padding:0 16px;min-width:0}.app>aside{grid-column:1;grid-row:2;padding:12px 14px;border-right:0;border-bottom:1px solid var(--line);min-width:0}.app>aside nav{display:flex;overflow:auto;min-width:0;width:100%}.nav-group-title,.side-foot{display:none}nav button{flex:0 0 auto;justify-content:center;white-space:nowrap;padding:10px}.app>main{grid-column:1;grid-row:3;padding:20px 14px;min-width:0;width:100%}.settings-layout{grid-template-columns:minmax(0,1fr)}.qr-column{grid-row:1}.qr-surface{min-height:0}.qr-preview{height:100px}.page-title{align-items:flex-start;flex-direction:column}.page-title span{margin:0}.config-row{grid-template-columns:100px minmax(0,1fr);gap:10px}.config-row>.text-action{grid-column:2;justify-self:start}.brand-overview{grid-template-columns:54px minmax(0,1fr)}.brand-overview .brand-symbol{width:50px;height:50px}.brand-location{grid-column:2}.works-toolbar{align-items:flex-start;flex-direction:column}.toolbar{width:100%;flex-wrap:wrap}.toolbar input{flex:1}.category-bar{align-items:flex-start}.works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.display-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.surface{padding:17px}.config-surface{padding:0 17px}.brand-overview{grid-template-columns:1fr}.brand-overview .brand-symbol{display:none}.brand-summary>div{grid-template-columns:74px 1fr}.brand-location{grid-column:1;grid-template-columns:1fr}.brand-edit-fields{grid-template-columns:1fr;margin-left:0}.config-row{grid-template-columns:1fr;gap:7px;padding:15px 0}.inline-field{justify-content:space-between}.nav-setting{justify-content:flex-start}.save-row{justify-content:space-between}.top-actions>span:first-child{display:none}.top-actions button{padding:7px}.toolbar{flex-direction:row}.toolbar input{min-width:100%}.category-bar{padding:0 8px}.category-filter{padding:0 9px}.works-grid{grid-template-columns:1fr;padding:10px}.work-card,.selection-card{grid-template-columns:100px minmax(0,1fr);min-height:138px;padding:10px;gap:10px}.display-grid,.is-fullscreen .display-grid{grid-template-columns:1fr 1fr;gap:9px}.display-work h3{font-size:13px}.is-fullscreen{padding:18px!important}}