/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:var(--r-md);font-weight:500;font-size:14px;line-height:1;white-space:nowrap;border:1px solid transparent;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast),color var(--t-fast);user-select:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn svg{width:16px;height:16px;flex:none}
.btn--gold{background:var(--grad-gold);color:#1a1508;border-color:transparent;box-shadow:var(--shadow-gold)}
.btn--gold:hover{filter:brightness(1.06);box-shadow:0 12px 34px -10px rgba(212,181,122,.55)}
.btn--outline{border-color:var(--line-2);color:var(--text);background:rgba(255,255,255,.02)}
.btn--outline:hover{border-color:var(--gold);background:rgba(212,181,122,.06)}
.btn--outline-gold{border-color:var(--gold);color:var(--gold-2);background:transparent}
.btn--outline-gold:hover{background:var(--gold-dim)}
.btn--ghost{color:var(--text-2)}
.btn--ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}
.btn--panel{background:var(--panel-2);border-color:var(--line);color:var(--text)}
.btn--panel:hover{background:var(--panel-3);border-color:var(--line-2)}
.btn--danger{background:rgba(224,122,106,.12);color:var(--danger);border-color:rgba(224,122,106,.3)}
.btn--danger:hover{background:rgba(224,122,106,.2)}
.btn--sm{height:34px;padding:0 14px;font-size:13px;border-radius:var(--r-sm)}
.btn--xs{height:28px;padding:0 10px;font-size:12px;border-radius:var(--r-sm)}
.btn--lg{height:50px;padding:0 28px;font-size:15px;border-radius:var(--r-lg)}
.btn--pill{border-radius:var(--r-pill)}
.btn--block{width:100%}
.btn--icon{width:38px;height:38px;padding:0;border-radius:var(--r-md);color:var(--text-2)}
.btn--icon:hover{background:rgba(255,255,255,.06);color:var(--text)}
.btn--icon.is-active{background:var(--gold-dim);color:var(--gold-2)}
.btn--icon svg{width:18px;height:18px}
.btn--icon.btn--sm{width:32px;height:32px}
.btn--icon.btn--sm svg{width:16px;height:16px}

/* ===== Inputs ===== */
.field{display:flex;flex-direction:column;gap:8px}
.field label,.label{font-size:13px;color:var(--text-2);font-weight:500}
.input,.select,.textarea{width:100%;height:44px;padding:0 14px;background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:var(--r-md);color:var(--text);transition:border-color var(--t-fast),background var(--t-fast);outline:none}
.textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical;line-height:1.5}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.045)}
.input--sm{height:36px;font-size:13px}
.select{appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23c9c5bb' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer}
.select option{background:#1a1b1e}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap svg{position:absolute;left:14px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.input-wrap .input{padding-left:40px}
.input-wrap .input-wrap__btn{position:absolute;right:8px;width:30px;height:30px;display:grid;place-items:center;color:var(--muted);border-radius:6px}
.input-wrap .input-wrap__btn svg{position:static}
.input-wrap .input-wrap__btn:hover{color:var(--text);background:rgba(255,255,255,.06)}
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:14px;width:17px;height:17px;color:var(--muted)}
.search input{padding-left:42px;border-radius:var(--r-md)}
.search--pill input{border-radius:var(--r-pill)}
.checkbox{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--text-2)}
.checkbox input{position:absolute;opacity:0;width:0;height:0}
.checkbox .box{width:20px;height:20px;border:1px solid var(--line-2);border-radius:5px;display:grid;place-items:center;transition:all var(--t-fast);background:rgba(255,255,255,.03)}
.checkbox .box svg{width:13px;height:13px;color:#1a1508;opacity:0}
.checkbox input:checked+.box{background:var(--gold);border-color:var(--gold)}
.checkbox input:checked+.box svg{opacity:1}
.switch{position:relative;width:42px;height:24px;border-radius:999px;background:rgba(255,255,255,.12);transition:background var(--t-fast);flex:none;cursor:pointer;border:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--t-fast)}
.switch.is-on{background:var(--gold)}
.switch.is-on::after{transform:translateX(18px)}
.help-text{font-size:12px;color:var(--muted)}
.error-text{font-size:12px;color:var(--danger)}

/* ===== Chips / pills / badges ===== */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:36px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--text-2);font-size:13px;display:inline-flex;align-items:center;gap:6px;transition:all var(--t-fast);background:rgba(255,255,255,.02)}
.chip:hover{border-color:var(--gold);color:var(--text)}
.chip.is-active{background:var(--grad-gold);color:#1a1508;border-color:transparent;font-weight:500}
.chip--sm{height:30px;padding:0 12px;font-size:12px}
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:11px;font-weight:500;letter-spacing:.02em;background:rgba(255,255,255,.07);color:var(--text-2)}
.badge--gold{background:var(--gold-dim);color:var(--gold-2)}
.badge--success{background:rgba(143,199,160,.14);color:var(--success)}
.badge--danger{background:rgba(224,122,106,.14);color:var(--danger)}
.badge--info{background:rgba(143,179,217,.14);color:var(--info)}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;background:rgba(255,255,255,.06);color:var(--text-2)}

/* ===== Cards / panels ===== */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.card--glass{background:var(--grad-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.card--pad{padding:clamp(20px,2.4vw,32px)}
.card--hover{transition:border-color var(--t-med),transform var(--t-med),box-shadow var(--t-med)}
.card--hover:hover{border-color:var(--line-gold);transform:translateY(-3px);box-shadow:var(--shadow-2)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg)}
.panel__head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.panel__title{font-size:14px;font-weight:600}
.panel__body{padding:18px}
.divider{height:1px;background:var(--line);margin-block:var(--s-4)}
.kpi{display:flex;flex-direction:column;gap:6px}
.kpi__label{font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.kpi__value{font-family:var(--font-display);font-size:34px;line-height:1}
.kpi__delta{font-size:12px;color:var(--success)}

/* ===== Icon ===== */
.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.i--sm{width:15px;height:15px}
.i--lg{width:24px;height:24px}
.i--xl{width:32px;height:32px;stroke-width:1.3}
.icon-box{width:52px;height:52px;border-radius:12px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--gold);background:rgba(255,255,255,.02)}
.icon-box .i{width:24px;height:24px;stroke-width:1.4}

/* ===== Avatar ===== */
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--panel-3);border:1px solid var(--line-2);flex:none}
.avatar--lg{width:64px;height:64px}
.avatar--sm{width:28px;height:28px}
.avatar--initials{display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--gold-2);background:var(--gold-dim)}

/* ===== Progress ===== */
.progress{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.progress__bar{height:100%;background:var(--grad-gold);border-radius:999px;transition:width var(--t-med)}
.progress--thin{height:4px}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-md)}

/* ===== Slider (editor) ===== */
.slider{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:6px;align-items:center;padding:6px 0}
.slider__label{font-size:12.5px;color:var(--text-2);grid-column:1}
.slider__value{font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;text-align:right;min-width:44px;grid-column:2;cursor:text;border-radius:4px;padding:1px 4px}
.slider__value:hover{background:rgba(255,255,255,.06)}
.slider__value:focus{outline:1px solid var(--gold);background:rgba(255,255,255,.06)}
.slider input[type=range]{grid-column:1/-1;width:100%;-webkit-appearance:none;appearance:none;height:18px;background:transparent;margin:0;cursor:pointer}
.slider input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(255,255,255,.2);border-radius:2px}
.slider input[type=range]::-moz-range-track{height:2px;background:rgba(255,255,255,.18);border-radius:2px}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#e9dcc0;border:2px solid var(--gold);margin-top:-6px;box-shadow:0 1px 4px rgba(0,0,0,.6);transition:transform var(--t-fast)}
.slider input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#e9dcc0;border:2px solid var(--gold)}
.slider input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}
.slider.is-changed .slider__label{color:var(--gold-2)}
.slider--compact{padding:3px 0}
.slider--hue input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)!important}

/* ===== Accordion ===== */
.acc{border-bottom:1px solid var(--line)}
.acc__head{display:flex;align-items:center;gap:10px;width:100%;padding:13px 4px;font-size:14px;color:var(--text);text-align:left;cursor:pointer;user-select:none}
.acc__head .i{color:var(--text-2)}
.acc__head .acc__chev{margin-left:auto;transition:transform var(--t-fast);color:var(--muted)}
.acc.is-open .acc__chev{transform:rotate(180deg)}
.acc__body{display:none;padding:2px 4px 14px}
.acc.is-open .acc__body{display:block}
.acc__reset{margin-left:auto;font-size:11px;color:var(--muted);padding:2px 6px;border-radius:4px;opacity:0;transition:opacity var(--t-fast)}
.acc:hover .acc__reset,.acc.is-changed .acc__reset{opacity:1}
.acc__reset:hover{color:var(--gold);background:rgba(255,255,255,.05)}
.acc.is-changed .acc__head{color:var(--gold-2)}

/* ===== Tabs ===== */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}
.tab{padding:12px 14px;font-size:13.5px;color:var(--muted);position:relative;font-weight:500}
.tab:hover{color:var(--text)}
.tab.is-active{color:var(--text)}
.tab.is-active::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--gold);border-radius:2px}
.segmented{display:inline-flex;padding:3px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:rgba(255,255,255,.02)}
.segmented button{height:32px;padding:0 16px;border-radius:var(--r-pill);font-size:13px;color:var(--text-2)}
.segmented button.is-active{background:var(--grad-gold);color:#1a1508;font-weight:500}
.segmented--sq{border-radius:var(--r-md)}
.segmented--sq button{border-radius:7px}

/* ===== Dropdown / menu ===== */
.menu{position:absolute;z-index:60;min-width:200px;background:#1a1b1f;border:1px solid var(--line-2);border-radius:var(--r-md);padding:6px;box-shadow:var(--shadow-2);animation:fadeUp .18s var(--ease)}
.menu__item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:7px;font-size:13px;color:var(--text-2);text-align:left}
.menu__item:hover{background:rgba(255,255,255,.06);color:var(--text)}
.menu__item.is-danger{color:var(--danger)}
.menu__item .i{width:16px;height:16px}
.menu__sep{height:1px;background:var(--line);margin:6px 4px}
.menu__label{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;padding:8px 10px 4px}

/* ===== Modal ===== */
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;animation:fadeIn .2s var(--ease)}
.modal{width:100%;max-width:520px;background:#141517;border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--shadow-2);animation:fadeUp .25s var(--ease);max-height:calc(100vh - 40px);display:flex;flex-direction:column}
.modal--lg{max-width:820px}.modal--xl{max-width:1100px}
.modal__head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 14px}
.modal__title{font-family:var(--font-display);font-size:24px}
.modal__body{padding:6px 24px 20px;overflow:auto}
.modal__foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px 20px;border-top:1px solid var(--line)}

/* ===== Toast ===== */
.toasts{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;background:#1a1b1f;border:1px solid var(--line-2);border-left:3px solid var(--gold);border-radius:var(--r-md);padding:12px 16px;min-width:260px;max-width:380px;box-shadow:var(--shadow-2);animation:fadeUp .25s var(--ease);font-size:13px}
.toast--success{border-left-color:var(--success)}
.toast--error{border-left-color:var(--danger)}
.toast--info{border-left-color:var(--info)}
.toast .i{flex:none;color:var(--gold)}

/* ===== Table ===== */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:left;font-weight:500;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--line)}
.table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:hover td{background:rgba(255,255,255,.02)}

/* ===== Empty state ===== */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;color:var(--muted);gap:12px}
.empty .icon-box{width:64px;height:64px;border-radius:16px}
.empty h3{font-family:var(--font-display);font-size:24px;color:var(--text)}

/* ===== Tooltip ===== */
[data-tip]{position:relative}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);background:#232428;color:var(--text);font-size:11.5px;padding:5px 9px;border-radius:6px;white-space:nowrap;z-index:80;border:1px solid var(--line-2);pointer-events:none;animation:fadeIn .15s}
[data-tip][data-tip-pos="bottom-left"]:hover::after{left:auto;right:0;transform:none}

/* ===== Stars ===== */
.stars{display:inline-flex;gap:3px}
.stars button,.stars span{width:18px;height:18px;color:rgba(255,255,255,.25);display:grid;place-items:center}
.stars .i{width:16px;height:16px;fill:none}
.stars .is-on{color:var(--gold)}
.stars .is-on .i{fill:currentColor}
.stars--sm button,.stars--sm span{width:14px;height:14px}
.stars--sm .i{width:12px;height:12px}

/* ===== Before/After ===== */
.ba{position:relative;overflow:hidden;user-select:none;border-radius:inherit;background:#000}
.ba img,.ba canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.ba__after{clip-path:inset(0 0 0 var(--split,50%))}
.ba__line{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:rgba(255,255,255,.85);transform:translateX(-50%);pointer-events:none}
.ba__handle{position:absolute;top:50%;left:var(--split,50%);transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#141416;border:1.5px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;gap:0;color:#fff;cursor:ew-resize;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.ba__handle .i{width:14px;height:14px;margin:0 -2px}
.ba__label{position:absolute;top:14px;padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);font-size:12px;letter-spacing:.04em;color:#fff;pointer-events:none}
.ba__label--before{left:calc(var(--split,50%) - 90px)}
.ba__label--after{left:calc(var(--split,50%) + 30px)}

/* ===== Misc ===== */
.kbd{display:inline-block;padding:1px 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;font-size:11px;font-family:var(--font-mono);color:var(--text-2);background:rgba(255,255,255,.04)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block}
.gold-rule{width:36px;height:1px;background:var(--gold)}
.link{color:var(--gold-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(212,181,122,.4)}
.link:hover{text-decoration-color:var(--gold)}
.notice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);background:var(--gold-dim);border:1px solid var(--line-gold);font-size:13px;color:var(--text-2)}
.notice .i{color:var(--gold);flex:none;margin-top:1px}
.notice--info{background:rgba(143,179,217,.08);border-color:rgba(143,179,217,.25)}
.notice--info .i{color:var(--info)}
.dropzone{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:40px;text-align:center;color:var(--muted);transition:all var(--t-fast);cursor:pointer}
.dropzone:hover,.dropzone.is-over{border-color:var(--gold);background:var(--gold-dim);color:var(--text)}