@font-face { font-family: Poppins; src: url('../fonts/Poppins-Regular.otf'); }
@font-face { font-family: Poppins; src: url('../fonts/Poppins-Medium.otf'); font-weight: 600; }
:root { --orange:#e88314; --orange-soft:#fff3e4; --ink:#222326; --muted:#74777d; --line:#e8e9eb; --bg:#f6f7f8; --white:#fff; --danger:#c43227; --success:#168447; --sidebar:#1f2023; }
* { box-sizing:border-box; }
body { margin:0; font-family:Poppins,sans-serif; color:var(--ink); background:var(--bg); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.hidden { display:none!important; }
.auth-gate { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at top left,#4a4b4f,#18191c 60%); }
.gate-card { width:min(100%,440px); background:#fff; border-radius:28px; padding:36px; box-shadow:0 30px 90px rgba(0,0,0,.35); }
.gate-card img { width:210px; display:block; margin:0 auto 30px; }
.gate-card h1 { margin:5px 0 24px; }
.gate-card label,.settings-form label { display:block; font-size:13px; font-weight:600; margin:16px 0 7px; }
.gate-card input,.settings-form input,.field input,.field select,.field textarea { width:100%; border:1px solid #d8dade; border-radius:11px; padding:12px 13px; outline:none; background:#fff; }
input:focus,select:focus,textarea:focus { border-color:var(--orange)!important; box-shadow:0 0 0 3px rgba(232,131,20,.13); }
.gate-card .btn { width:100%; margin-top:22px; }
.gate-card>a { display:block; text-align:center; color:var(--orange); margin-top:18px; text-decoration:none; }
.app { min-height:100vh; display:grid; grid-template-columns:270px 1fr; }
.sidebar { background:var(--sidebar); color:#fff; padding:26px 18px; min-height:100vh; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.logo { padding:0 12px 26px; }
.logo img { width:190px; max-width:100%; }
.sidebar nav { display:grid; gap:6px; }
.nav-item { border:0; background:transparent; color:#b9bbc0; border-radius:12px; padding:13px 15px; text-align:left; }
.nav-item i { width:25px; }
.nav-item.active,.nav-item:hover { background:rgba(232,131,20,.16); color:#fff; }
.nav-item.active { box-shadow:inset 3px 0 var(--orange); }
.sidebar-user { margin-top:auto; border-top:1px solid #35363a; padding:20px 8px 0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sidebar-user span { display:block; color:#888b91; font-size:11px; }
.sidebar-user strong { font-size:12px; overflow-wrap:anywhere; }
.sidebar-user button,.icon-button,.mobile-menu { border:0; background:transparent; color:inherit; }
.content { min-width:0; padding:32px 38px 60px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:32px; }
.topbar h1 { margin:2px 0 0; font-size:30px; }
.eyebrow { color:var(--orange); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.btn { border:0; border-radius:11px; padding:11px 16px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn.primary { background:var(--orange); color:#fff; }
.btn.ghost { background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn.danger { background:#fff0ef; color:var(--danger); }
.mobile-menu { display:none; font-size:20px; }
.view { display:none; }
.view.active { display:block; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px; }
.stats article { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; display:flex; gap:16px; align-items:center; }
.stats i { width:46px; height:46px; display:grid; place-items:center; border-radius:13px; color:var(--orange); background:var(--orange-soft); }
.stats strong,.stats span { display:block; }
.stats strong { font-size:26px; }
.stats span { color:var(--muted); font-size:12px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; }
.welcome-panel { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.welcome-panel h2,.settings-form h2 { margin:5px 0 8px; }
.welcome-panel p,.section-actions p { color:var(--muted); margin:0; }
.section-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.table-panel { padding:0; overflow:hidden; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th,td { padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle; }
th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; background:#fafafa; }
tbody tr:last-child td { border-bottom:0; }
.product-cell { display:flex; gap:12px; align-items:center; }
.thumb { width:48px; height:48px; object-fit:cover; border-radius:10px; background:#eee; }
.badge { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:600; background:#eee; }
.badge.active { background:#e9f8ef; color:var(--success); }
.badge.admin { background:#fff0dc; color:#a95a00; }
.row-actions { display:flex; justify-content:flex-end; gap:7px; }
.row-actions button { border:0; padding:8px 10px; border-radius:9px; background:#f2f3f4; }
.row-actions .remove { color:var(--danger); background:#fff0ef; }
.empty { text-align:center; padding:36px; color:var(--muted); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.form-grid .full { grid-column:1/-1; }
.settings-form .btn { margin-top:24px; }
.site-editor { display:grid; gap:18px; }
.editor-heading { position:sticky; top:12px; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 22px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 10px 30px rgba(20,21,24,.08); backdrop-filter:blur(12px); }
.editor-heading h2 { margin:3px 0 2px; }
.editor-heading p,.settings-card-title p { margin:0; color:var(--muted); font-size:12px; }
.editor-heading .btn { margin:0; flex:0 0 auto; }
.settings-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; }
.settings-card-title { display:flex; align-items:center; gap:13px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.settings-card-title>i { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:12px; background:var(--orange-soft); color:var(--orange); }
.settings-card-title h3 { margin:0 0 2px; font-size:17px; }
.settings-form label { display:block; font-size:12px; font-weight:600; margin:0; }
.settings-form input,.settings-form select,.settings-form textarea { width:100%; border:1px solid #d8dade; border-radius:11px; padding:12px 13px; margin-top:7px; outline:none; background:#fff; }
.settings-form textarea { min-height:90px; resize:vertical; }
.compact-grid { margin-top:18px; }
.appearance-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.color-field { display:grid!important; grid-template-columns:44px 1fr; align-items:center; gap:4px 10px; min-height:76px; padding:10px; border:1px solid var(--line); border-radius:13px; }
.color-field span { grid-column:1/-1; }
.color-field input { width:44px; height:34px; padding:2px; margin:0; border-radius:8px; }
.color-field output { color:var(--muted); font-size:11px; font-weight:500; }
.asset-field { position:relative; min-height:122px; padding-right:112px; }
.asset-field img { position:absolute; right:0; bottom:0; width:96px; height:86px; object-fit:contain; padding:7px; border:1px solid var(--line); border-radius:12px; background:#f7f7f8; }
.asset-field img:not([src]) { display:none; }
.service-editor-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.service-editor-item { display:grid; gap:13px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fafafa; }
.service-editor-item h4 { margin:0; font-size:14px; }
.service-editor-item .asset-field { min-height:116px; }
.illustration-fields { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.settings-form button:disabled { opacity:.65; cursor:wait; }
.modal { position:fixed; inset:0; z-index:100; background:rgba(18,19,21,.68); display:grid; place-items:center; padding:22px; }
.modal-card { width:min(100%,680px); max-height:calc(100vh - 44px); overflow:auto; background:#fff; border-radius:22px; padding:26px; }
.modal-header { display:flex; align-items:start; justify-content:space-between; margin-bottom:22px; }
.modal-header h2 { margin:3px 0 0; }
.icon-button { font-size:20px; color:var(--muted); }
.fields-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:block; font-size:12px; font-weight:600; }
.field.full { grid-column:1/-1; }
.field input,.field select,.field textarea { margin-top:7px; font-weight:400; }
.field textarea { min-height:100px; resize:vertical; }
.field.checkbox { display:flex; align-items:center; gap:9px; padding-top:20px; }
.field.checkbox input { width:auto; margin:0; }
.icon-picker-field { position:relative; }
.icon-picker-trigger { width:100%; margin-top:7px; min-height:64px; border:1px solid #d8dade; border-radius:12px; padding:9px 13px; background:#fff; color:var(--ink); display:flex; align-items:center; gap:12px; text-align:left; }
.icon-picker-trigger:hover,.icon-picker-trigger[aria-expanded="true"] { border-color:var(--orange); box-shadow:0 0 0 3px rgba(232,131,20,.10); }
.icon-picker-preview { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:11px; background:var(--orange-soft); color:var(--orange); font-size:20px; }
.icon-picker-copy { display:grid; gap:2px; min-width:0; }
.icon-picker-copy strong { font-size:13px; }
.icon-picker-copy small { color:var(--muted); font-weight:400; overflow-wrap:anywhere; }
.icon-picker-chevron { margin-left:auto; color:var(--muted); transition:transform .2s; }
.icon-picker-trigger[aria-expanded="true"] .icon-picker-chevron { transform:rotate(180deg); }
.icon-picker-panel { position:absolute; z-index:5; top:calc(100% + 8px); left:0; right:0; padding:14px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 18px 45px rgba(24,25,27,.18); }
.icon-search { height:42px; display:flex; align-items:center; gap:9px; border:1px solid #d8dade; border-radius:10px; padding:0 12px; color:var(--muted); }
.icon-search:focus-within { border-color:var(--orange); box-shadow:0 0 0 3px rgba(232,131,20,.10); }
.icon-search input { border:0!important; box-shadow:none!important; margin:0; padding:0; min-width:0; }
.icon-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-top:12px; max-height:270px; overflow:auto; padding:2px; }
.icon-option { min-width:0; min-height:74px; border:1px solid var(--line); border-radius:10px; padding:9px 5px; background:#fff; color:var(--ink); display:grid; place-items:center; align-content:center; gap:7px; }
.icon-option i { color:var(--orange); font-size:20px; }
.icon-option span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:500; }
.icon-option:hover { border-color:var(--orange); background:var(--orange-soft); }
.icon-option.selected { border-color:var(--orange); background:var(--orange-soft); box-shadow:inset 0 0 0 1px var(--orange); }
.icon-empty { margin:18px 0 6px; text-align:center; color:var(--muted); font-size:12px; }
.image-preview { width:100%; max-height:180px; object-fit:contain; background:#f2f2f2; border-radius:12px; margin-top:10px; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:25px; }
.alert,.global-alert { padding:12px 14px; border-radius:11px; background:#fff0ef; color:var(--danger); margin-bottom:15px; font-size:13px; }
.global-alert { position:sticky; top:15px; z-index:10; box-shadow:0 8px 25px rgba(0,0,0,.12); }
.global-alert.success { background:#e9f8ef; color:var(--success); }
@media(max-width:1050px){ .stats{grid-template-columns:1fr 1fr;}.appearance-grid{grid-template-columns:1fr 1fr}.service-editor-grid{grid-template-columns:1fr} }
@media(max-width:780px){ .app{display:block}.sidebar{position:fixed;z-index:50;left:-285px;width:270px;transition:left .2s}.sidebar.open{left:0}.content{padding:22px 18px 45px}.mobile-menu{display:block}.topbar{justify-content:flex-start}.topbar .ghost{margin-left:auto}.stats{grid-template-columns:1fr 1fr}.welcome-panel{align-items:flex-start;flex-direction:column}.fields-grid,.form-grid{grid-template-columns:1fr}.field.full,.form-grid .full{grid-column:auto}.icon-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media(max-width:480px){ .stats{grid-template-columns:1fr}.topbar .ghost{font-size:0}.topbar .ghost i{font-size:15px}.gate-card{padding:25px}.section-actions{align-items:flex-start;flex-direction:column}.appearance-grid{grid-template-columns:1fr}.editor-heading{position:static;align-items:flex-start;flex-direction:column}.editor-heading .btn{width:100%}.asset-field{padding-right:0;padding-bottom:100px}.asset-field img{left:0;right:auto} }