[hidden]{display:none!important}
:root{--red:#D7263D;--yellow:#FFC53D;--bg:#191014;--panel:#241a1e;--panel2:#2f2227;--line:#3d2e33;--text:#f4ece7;--muted:#b3a099}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
h1,h2,h3,.side-brand{font-family:'Titan One',cursive;font-weight:400}
img,video{max-width:100%}
.btn{display:inline-block;padding:10px 20px;border-radius:999px;font-weight:900;border:none;cursor:pointer;font-family:'Nunito';font-size:.95rem;background:var(--panel2);color:var(--text);transition:transform .12s}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:wait}
.btn-accent{background:var(--yellow);color:#231512}
.btn-sm{padding:7px 14px;font-size:.85rem}
.btn-danger{background:#8c1f2c;color:#fff}
.file-btn{cursor:pointer}
/* login */
#loginView{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#D7263D,#7c1024);padding:20px}
.login-card{background:#fff;color:#231512;border-radius:20px;padding:44px 38px;max-width:380px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.login-logo{font-size:3rem}
.login-card h1{color:var(--red);margin:8px 0 2px}
.login-card p{color:#7a655d;margin-bottom:20px}
.login-card input{width:100%;padding:12px 16px;border:2px solid #eadbc8;border-radius:12px;font-size:1rem;margin-bottom:14px}
.login-card .btn{width:100%}
.err-msg{color:#ff9aa5;font-weight:800;margin-top:10px}
.login-card .err-msg{color:#9c1420}
.ok-msg{color:#7fdc9a;font-weight:800;margin-top:10px}
/* layout */
#appView{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{padding:20px 18px;font-size:1.05rem;border-bottom:1px solid var(--line)}
.side-brand b{color:var(--yellow)}
#tabs{display:flex;flex-direction:column;padding:12px}
#tabs button{background:none;border:none;color:var(--muted);text-align:left;padding:11px 14px;border-radius:10px;font-weight:800;font-size:.95rem;cursor:pointer;font-family:'Nunito'}
#tabs button:hover{background:var(--panel2);color:var(--text)}
#tabs button.active{background:var(--red);color:#fff}
.side-foot{margin-top:auto;padding:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.side-foot a{color:var(--yellow);font-weight:800;text-decoration:none}
.side-foot button{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:7px;cursor:pointer;font-weight:800}
.content{flex:1;padding:34px;max-width:1000px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.hint{color:var(--muted);font-size:.9rem;margin-bottom:16px}
/* lists */
.card-list{display:grid;gap:12px}
.a-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.a-card .thumb{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--panel2);flex-shrink:0}
.a-card .grow{flex:1;min-width:180px}
.a-card h4{font-family:'Nunito';font-weight:900;font-size:1rem}
.a-card .sub{color:var(--muted);font-size:.85rem}
.a-card .acts{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-block;font-size:.7rem;font-weight:900;padding:3px 10px;border-radius:999px;background:var(--panel2);color:var(--muted);letter-spacing:.5px;text-transform:uppercase}
.pill.on{background:#1f4b2c;color:#8fe3a6}.pill.warn{background:#5c4a12;color:var(--yellow)}.pill.off{background:#5a2027;color:#ff9aa5}
/* gallery admin */
.g-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.g-admin-item{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.g-admin-item img{width:100%;height:130px;object-fit:cover;display:block}
.g-admin-item .gac{padding:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.82rem;color:var(--muted)}
/* forms */
form label{display:block;font-weight:800;font-size:.88rem;margin:10px 0 4px;color:var(--muted)}
form input,form textarea,form select{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);font-family:'Nunito';font-size:.95rem}
form input:focus,form textarea:focus{outline:none;border-color:var(--yellow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-grid .full{grid-column:1/-1}
.chk{display:flex!important;align-items:center;gap:8px;color:var(--text)!important}
.chk input{width:auto}
.chk-row{display:flex;gap:22px;margin:14px 0;flex-wrap:wrap}
h4{margin:16px 0 6px;color:var(--yellow);font-family:'Nunito';font-weight:900}
.price-row-edit{display:flex;gap:8px;margin-bottom:8px}
.price-row-edit input{flex:1}
.price-row-edit .x{background:#5a2027;border:none;color:#fff;border-radius:8px;width:38px;cursor:pointer}
.img-edit{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:8px 0}
#miPreview{width:110px;height:110px;object-fit:cover;border-radius:10px}
.img-btns{display:flex;gap:8px;flex-wrap:wrap}
/* settings */
.settings-form{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.media-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.media-box{background:var(--panel2);border-radius:12px;padding:16px}
.media-box img{max-height:70px;margin-bottom:10px;border-radius:8px;background:#fff;padding:4px}
.media-box video{max-height:140px;border-radius:8px;margin-bottom:10px}
/* studio */
.studio-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:24px}
.studio-result{background:var(--panel);border:2px dashed var(--line);border-radius:16px;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;gap:14px}
.studio-result img{max-height:380px;border-radius:12px}
/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(10,5,7,.75);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px 26px 28px;max-width:620px;width:100%}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.modal-head .x{background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer}
.modal-card form>.btn-accent{margin-top:16px;width:100%}
/* busy + toast */
.busy{position:fixed;inset:0;z-index:110;background:rgba(10,5,7,.7);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-weight:900}
.spinner{width:46px;height:46px;border:5px solid rgba(255,197,61,.25);border-top-color:var(--yellow);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:120;background:#8c1f2c;color:#fff;font-weight:800;padding:12px 22px;border-radius:999px;cursor:pointer;max-width:90vw}
.toast.ok{background:#1f4b2c}
@media(max-width:820px){#appView{flex-direction:column}.sidebar{width:100%;height:auto;position:static}#tabs{flex-direction:row;flex-wrap:wrap}.side-foot{flex-direction:row}.content{padding:20px}.form-grid,.media-row,.studio-grid{grid-template-columns:1fr}}