:root{
    --accent:#b08d57;
    --accent-dark:#8a6d3f;
    --ink:#241f18;
    --muted:#7d7364;
    --bg:#f7f4ee;
    --card:#ffffff;
    --border:#e7e0d2;
    --green:#2f8a5c;
    --red:#c65b4e;
    --radius:14px;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg); color:var(--ink); font-size:14.5px;
}
a{color:var(--accent-dark);}
.app-shell{display:flex; min-height:100vh;}

/* Sidebar */
.sidebar{width:230px; flex:none; background:#211c15; color:#ece5d6; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;}
.sidebar-brand{padding:24px 22px; font-size:17px; font-weight:700; letter-spacing:.02em; border-bottom:1px solid #3a3226; display:flex; align-items:center; gap:10px;}
.sidebar-brand .dot{width:9px; height:9px; border-radius:50%; background:var(--accent);}
.sidebar-nav{padding:16px 12px; flex:1;}
.sidebar-nav a{display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; color:#cabfa5; text-decoration:none; font-size:13.5px; margin-bottom:4px; transition:background .15s;}
.sidebar-nav a:hover{background:#2e2718;}
.sidebar-nav a.active{background:var(--accent); color:#fff;}
.sidebar-nav svg{width:17px; height:17px; flex:none;}
.sidebar-foot{padding:16px 22px; border-top:1px solid #3a3226; font-size:12px; color:#8f846c;}
.sidebar-foot a{color:#cabfa5;}

/* Main */
.main{flex:1; min-width:0;}
.topbar{background:#fff; border-bottom:1px solid var(--border); padding:16px 28px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5;}
.topbar h1{font-size:19px; margin:0;}
.topbar-sub{font-size:12.5px; color:var(--muted); margin-top:2px;}
.content{padding:26px 28px 60px;}
.user-chip{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted);}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}

/* Cards & grid */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;}
.grid{display:grid; gap:18px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:1000px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }

.stat-card{display:flex; flex-direction:column; gap:6px;}
.stat-num{font-size:28px; font-weight:700;}
.stat-label{font-size:12.5px; color:var(--muted);}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:10px; padding:10px 18px; font-size:13.5px; font-weight:600; cursor:pointer; border:1px solid transparent; text-decoration:none;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-outline{background:#fff; border-color:var(--border); color:var(--ink);}
.btn-outline:hover{border-color:var(--accent);}
.btn-danger{background:#fdece9; color:var(--red);}
.btn-sm{padding:7px 12px; font-size:12.5px; border-radius:8px;}
.btn[disabled]{opacity:.55; cursor:not-allowed;}

/* Table */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--border);}
td{padding:12px; border-bottom:1px solid #f0ebe0; vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600;}
.badge-green{background:#e6f4ec; color:var(--green);}
.badge-red{background:#fbe9e6; color:var(--red);}
.badge-gray{background:#eee9de; color:var(--muted);}
.badge-gold{background:#f6ecd7; color:var(--accent-dark);}

/* Forms */
label{display:block; font-size:12.5px; color:var(--muted); margin:0 0 6px; font-weight:600;}
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea{
    width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:10px; font-size:13.5px; font-family:inherit; background:#fffefb;
}
textarea{min-height:100px; resize:vertical;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
.field{margin-bottom:16px;}
.field-row{display:flex; gap:14px;}
.field-row > *{flex:1;}
.hint{font-size:11.5px; color:var(--muted); margin-top:5px;}

/* Tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:22px; overflow-x:auto;}
.tab-btn{padding:11px 16px; font-size:13px; font-weight:600; color:var(--muted); background:none; border:none; cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent;}
.tab-btn.active{color:var(--accent-dark); border-bottom-color:var(--accent);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* Template picker */
.tpl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px;}
.tpl-item{border:2px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; background:#fff; transition:border-color .15s, transform .15s;}
.tpl-item:hover{transform:translateY(-2px);}
.tpl-item.selected{border-color:var(--accent); box-shadow:0 0 0 3px rgba(176,141,87,.18);}
.tpl-item img{width:100%; height:130px; object-fit:cover; display:block; background:#eee;}
.tpl-item .tpl-name{padding:9px 10px; font-size:12.5px; font-weight:700;}
.tpl-item .tpl-cat{padding:0 10px 10px; font-size:11px; color:var(--muted); text-transform:uppercase;}

/* Photo upload box */
.photo-drop{border:2px dashed var(--border); border-radius:12px; padding:18px; text-align:center; cursor:pointer; background:#fbf9f4; position:relative;}
.photo-drop.has-img{padding:0; border-style:solid;}
.photo-drop img{width:100%; max-height:200px; object-fit:cover; border-radius:10px;}
.photo-drop input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.gallery-upload-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px;}
.gallery-thumb{position:relative; border-radius:10px; overflow:hidden; height:100px;}
.gallery-thumb img{width:100%; height:100%; object-fit:cover;}
.gallery-thumb .rm{position:absolute; top:4px; right:4px; background:rgba(0,0,0,.6); color:#fff; border:none; width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:13px; line-height:1;}

.dyn-row{display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; background:#fbf9f4; border:1px solid var(--border); border-radius:10px; padding:12px;}
.dyn-row .grow{flex:1;}
.btn-remove-row{flex:none; background:#fdece9; color:var(--red); border:none; border-radius:8px; width:32px; height:32px; cursor:pointer; font-size:16px;}

.toast{position:fixed; top:20px; right:20px; background:var(--ink); color:#fff; padding:13px 20px; border-radius:10px; font-size:13.5px; z-index:200; box-shadow:0 10px 24px rgba(0,0,0,.2); opacity:0; transform:translateY(-8px); transition:.25s;}
.toast.show{opacity:1; transform:translateY(0);}
.toast.error{background:var(--red);}
.toast.success{background:var(--green);}

.empty-state{text-align:center; padding:60px 20px; color:var(--muted);}
.empty-state svg{width:52px; height:52px; opacity:.4; margin-bottom:14px;}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#2a2318,#1a160f);}
.login-card{width:100%; max-width:380px; background:#fff; border-radius:18px; padding:40px 32px; box-shadow:0 30px 60px rgba(0,0,0,.35);}
.login-card h1{font-size:20px; margin:0 0 4px;}
.login-card p{font-size:13px; color:var(--muted); margin:0 0 26px;}
.error-box{background:#fdece9; color:var(--red); padding:11px 14px; border-radius:10px; font-size:13px; margin-bottom:16px;}

.link-copy-box{display:flex; gap:8px; align-items:center; background:#fbf9f4; border:1px solid var(--border); border-radius:10px; padding:8px 8px 8px 14px;}
.link-copy-box input{border:none; background:none; flex:1; padding:4px; font-size:12.5px;}

.section-heading{font-size:15px; font-weight:700; margin:0 0 4px;}
.section-desc{font-size:12.5px; color:var(--muted); margin:0 0 16px;}