/* ZON TEASAN — ADMIN CSS */
:root{
  --gold:#d4a93c;--amber:#c8923a;--cream:#f4ead8;
  --green-deep:#1c3528;--black:#0e0e0e;--dark2:#161616;--dark3:#1e1e1e;
  --border:rgba(212,169,60,0.15);--muted:rgba(244,234,216,0.4);
  --sidebar-w:260px;--header-h:60px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
body{font-family:'EB Garamond',serif;background:var(--black);color:var(--cream);min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* LOGIN */
.login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:radial-gradient(ellipse at 50% 40%,rgba(28,53,40,0.6) 0%,transparent 65%),var(--black)}
.login-card{background:var(--dark2);border:1px solid var(--border);padding:48px 40px;width:100%;max-width:380px}
.login-brand{font-family:'Cinzel',serif;font-size:1.2rem;letter-spacing:0.3em;color:var(--gold);text-align:center;margin-bottom:8px}
.login-brand span{color:var(--cream);opacity:0.7;font-size:0.75em}
.login-card h1{font-family:'Cinzel',serif;font-size:0.9rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--cream);text-align:center;font-weight:400;margin-bottom:6px}
.login-sub{font-size:0.88rem;color:var(--muted);text-align:center;margin-bottom:28px;font-style:italic}
.login-err{background:rgba(180,40,40,0.15);border:1px solid rgba(180,40,40,0.3);color:#e88;padding:10px 14px;font-size:0.85rem;margin-bottom:12px}
.back-link{display:block;text-align:center;margin-top:20px;font-family:'Cinzel',serif;font-size:0.6rem;letter-spacing:0.2em;color:var(--muted);text-transform:uppercase;transition:color 0.3s}
.back-link:hover{color:var(--gold)}

/* BUTTONS */
.btn-gold{font-family:'Cinzel',serif;font-size:0.62rem;letter-spacing:0.25em;text-transform:uppercase;background:var(--gold);color:var(--black);border:none;padding:10px 22px;cursor:pointer;transition:all 0.3s;display:inline-block}
.btn-gold:hover{background:var(--amber)}
.btn-gold.full{width:100%;padding:13px;font-size:0.65rem}
.btn-outline{font-family:'Cinzel',serif;font-size:0.58rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);border:1px solid var(--border);padding:9px 16px;cursor:pointer;transition:all 0.3s;text-align:center;display:block}
.btn-outline:hover{background:rgba(212,169,60,0.08)}
.btn-muted{font-family:'Cinzel',serif;font-size:0.58rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid rgba(255,255,255,0.06);padding:9px 16px;cursor:pointer;transition:all 0.3s;width:100%}
.btn-muted:hover{border-color:rgba(255,255,255,0.15);color:var(--cream)}

/* DASHBOARD LAYOUT */
#dashboard{display:flex;min-height:100vh}

/* SIDEBAR */
.sidebar{width:var(--sidebar-w);background:var(--dark2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.sb-brand{padding:20px 20px 16px;border-bottom:1px solid var(--border);font-family:'Cinzel',serif;font-size:0.85rem;letter-spacing:0.25em;color:var(--gold);display:flex;align-items:baseline;gap:5px}
.sb-brand span{color:var(--cream);opacity:0.65;font-size:0.7em}
.sb-brand em{font-style:normal;font-size:0.5rem;letter-spacing:0.25em;color:var(--muted);margin-left:auto;text-transform:uppercase}
.sb-nav{flex:1;padding:10px 0}
.snav{width:100%;text-align:left;padding:10px 20px;background:none;border:none;border-left:2px solid transparent;color:var(--muted);font-family:'Cinzel',serif;font-size:0.58rem;letter-spacing:0.15em;text-transform:uppercase;cursor:pointer;transition:all 0.25s}
.snav:hover{color:var(--cream);background:rgba(255,255,255,0.02)}
.snav.active{color:var(--gold);border-left-color:var(--gold);background:rgba(212,169,60,0.06)}
.sb-foot{padding:16px 20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}

/* MAIN */
.dash-main{flex:1;display:flex;flex-direction:column;min-width:0}
.dash-header{height:var(--header-h);padding:0 28px;background:var(--dark2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:100}
.sb-toggle{display:none;background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer;padding:4px}
.dash-header h2{font-family:'Cinzel',serif;font-size:0.7rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--cream);font-weight:400;flex:1}
.dash-body{padding:28px;flex:1;overflow-y:auto}

/* FORM ELEMENTS */
.tab-section{border:1px solid var(--border);margin-bottom:24px;background:var(--dark2)}
.tab-section-title{font-family:'Cinzel',serif;font-size:0.58rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);padding:14px 20px;border-bottom:1px solid var(--border);background:rgba(212,169,60,0.04)}
.tab-section-body{padding:20px}
.field-group{margin-bottom:18px}
.field-group label{display:block;font-family:'Cinzel',serif;font-size:0.55rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field-group input,.field-group textarea{width:100%;padding:10px 13px;background:var(--dark3);border:1px solid rgba(255,255,255,0.07);color:var(--cream);font-family:'EB Garamond',serif;font-size:0.95rem;transition:border-color 0.25s;resize:vertical}
.field-group input:focus,.field-group textarea:focus{outline:none;border-color:rgba(212,169,60,0.4)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.repeat-item{background:var(--dark3);border:1px solid rgba(255,255,255,0.05);padding:16px;margin-bottom:12px}
.repeat-item-title{font-family:'Cinzel',serif;font-size:0.55rem;letter-spacing:0.2em;color:var(--muted);text-transform:uppercase;margin-bottom:12px;display:block}
.hint{font-size:0.82rem;color:var(--muted);font-style:italic;margin-top:8px;line-height:1.6}
.hint code{background:rgba(212,169,60,0.08);padding:1px 5px;font-style:normal;font-size:0.8rem}

/* TOAST */
.toast{position:fixed;bottom:28px;right:28px;background:var(--gold);color:var(--black);font-family:'Cinzel',serif;font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;padding:12px 22px;opacity:0;transform:translateY(16px);transition:all 0.35s;pointer-events:none;z-index:9999}
.toast.show{opacity:1;transform:translateY(0)}

/* MOBILE */
@media(max-width:768px){
  .sidebar{position:fixed;left:-100%;top:0;height:100vh;z-index:200;transition:left 0.3s}
  .sidebar.open{left:0}
  .sb-toggle{display:block}
  .dash-header{padding:0 16px}
  .dash-body{padding:16px}
  .two-col{grid-template-columns:1fr}
}
@media(max-width:480px){
  .login-card{padding:32px 20px}
}

/* IMAGE UPLOAD WIDGET */
.img-upload-block{margin-bottom:20px}
.img-upload-label{font-family:'Cinzel',serif;font-size:0.55rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.img-preview-wrap{min-height:60px;background:rgba(255,255,255,0.02);border:1px dashed rgba(212,169,60,0.2);padding:8px;margin-bottom:8px;display:flex;align-items:center;justify-content:center}
.img-no-preview{font-size:0.8rem;color:var(--muted);font-style:italic}
.upload-btn-wrap{cursor:pointer;display:inline-block}
.btn-upload{display:inline-block;font-family:'Cinzel',serif;font-size:0.58rem;letter-spacing:0.18em;text-transform:uppercase;background:rgba(212,169,60,0.1);border:1px solid rgba(212,169,60,0.3);color:var(--gold);padding:8px 16px;cursor:pointer;transition:all 0.25s}
.btn-upload:hover{background:rgba(212,169,60,0.2)}

/* UPLOAD ROW */
.upload-row{display:flex;align-items:center;gap:12px;margin-bottom:4px;flex-wrap:wrap}
.upload-status{font-size:0.82rem;font-style:italic;display:none}

/* CUSTOM CSS TAB */
.css-snippets{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.snippet-btn{font-family:'Cinzel',serif;font-size:0.55rem;letter-spacing:0.12em;text-transform:uppercase;background:rgba(212,169,60,0.08);border:1px solid rgba(212,169,60,0.25);color:var(--gold);padding:6px 12px;cursor:pointer;transition:all 0.2s;border-radius:2px}
.snippet-btn:hover{background:rgba(212,169,60,0.18);border-color:var(--gold)}

/* CSS GUIDE & NEW SECTION */
.css-guide-list{padding-left:20px;margin:10px 0}
.css-guide-list li{font-size:0.88rem;line-height:1.8;color:rgba(244,234,216,0.7);margin-bottom:4px}
.css-guide-list li code{background:rgba(212,169,60,0.1);padding:1px 5px;font-size:0.82rem;color:var(--gold)}
.code-example{background:rgba(255,255,255,0.04);border:1px solid rgba(212,169,60,0.15);padding:12px 16px;font-family:monospace;font-size:0.82rem;color:rgba(244,234,216,0.7);white-space:pre;overflow-x:auto;margin-top:8px;line-height:1.6}
kbd{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);padding:1px 6px;border-radius:3px;font-size:0.8rem;font-family:monospace}

/* PER-SECTION CSS TOGGLE */
.section-css-wrap{margin-top:4px}
.toggle-css-btn{font-family:'Cinzel',serif;font-size:0.55rem;letter-spacing:0.15em;text-transform:uppercase;background:none;border:1px dashed rgba(212,169,60,0.2);color:rgba(212,169,60,0.5);padding:7px 14px;cursor:pointer;transition:all 0.2s;width:100%;text-align:left}
.toggle-css-btn:hover{border-color:rgba(212,169,60,0.4);color:var(--gold)}
.section-css-panel{margin-top:8px;padding:16px;background:rgba(212,169,60,0.03);border:1px solid rgba(212,169,60,0.1)}

/* DANGER BUTTON */
.btn-danger{font-family:'Cinzel',serif;font-size:0.55rem;letter-spacing:0.15em;text-transform:uppercase;background:rgba(180,40,40,0.15);border:1px solid rgba(180,40,40,0.3);color:#e88;padding:7px 14px;cursor:pointer;transition:all 0.2s;margin-top:10px}
.btn-danger:hover{background:rgba(180,40,40,0.3)}

/* SECTION STYLES TAB */
.style-row-group{margin-bottom:16px;padding:16px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-radius:4px}
.style-row-label{font-family:'Cinzel',serif;font-size:0.55rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.style-three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:768px){.style-three-col{grid-template-columns:1fr}}

/* LOGIN LOGO */
.login-logo{text-align:center;margin-bottom:20px}
.login-logo img{max-height:80px;max-width:200px;width:auto;object-fit:contain;margin:0 auto;display:block}