:root{
  --accent:#2563EB;--accent-hover:#1d4ed8;--accent-soft:rgba(37,99,235,.08);--accent-glow:rgba(37,99,235,.25);
  --success:#16A34A;--success-bg:rgba(22,163,74,.08);--warning:#D97706;--warning-bg:rgba(217,119,6,.08);
  --error:#DC2626;--error-bg:rgba(220,38,38,.08);--info:#0ea5e9;--info-bg:rgba(14,165,233,.08);
  --bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-elevated:#1a1a24;--bg-tertiary:rgba(255,255,255,.03);
  --text-primary:#f0f0f5;--text-secondary:#8b8b9e;--text-tertiary:#55556a;
  --border:rgba(255,255,255,.06);--border-hover:rgba(255,255,255,.12);
  --radius-xs:6px;--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--radius-full:99px;
  --transition:.25s cubic-bezier(.4,0,.2,1);
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);--shadow-md:0 4px 16px rgba(0,0,0,.3);--shadow-lg:0 8px 32px rgba(0,0,0,.4);
}
/* ═══ Цветовые темы ═══ */
html.theme-purple{--accent:#7C3AED;--accent-hover:#6D28D9;--accent-soft:rgba(124,58,237,.08);--accent-glow:rgba(124,58,237,.25)}
html.theme-emerald{--accent:#059669;--accent-hover:#047857;--accent-soft:rgba(5,150,105,.08);--accent-glow:rgba(5,150,105,.25)}
html.theme-rose{--accent:#E11D48;--accent-hover:#BE123C;--accent-soft:rgba(225,29,72,.08);--accent-glow:rgba(225,29,72,.25)}
html.theme-amber{--accent:#D97706;--accent-hover:#B45309;--accent-soft:rgba(217,119,6,.08);--accent-glow:rgba(217,119,6,.25)}
html.theme-teal{--accent:#0D9488;--accent-hover:#0F766E;--accent-soft:rgba(13,148,136,.08);--accent-glow:rgba(13,148,136,.25)}
html.theme-indigo{--accent:#4F46E5;--accent-hover:#4338CA;--accent-soft:rgba(79,70,229,.08);--accent-glow:rgba(79,70,229,.25)}
html.theme-pink{--accent:#DB2777;--accent-hover:#BE185D;--accent-soft:rgba(219,39,119,.08);--accent-glow:rgba(219,39,119,.25)}
html.theme-cyan{--accent:#0891B2;--accent-hover:#0E7490;--accent-soft:rgba(8,145,178,.08);--accent-glow:rgba(8,145,178,.25)}
html.light{
  --bg-primary:#f5f5f7;--bg-secondary:#ffffff;--bg-elevated:#ffffff;--bg-tertiary:rgba(0,0,0,.03);
  --text-primary:#1a1a2e;--text-secondary:#6b6b80;--text-tertiary:#9b9bae;
  --border:rgba(0,0,0,.08);--border-hover:rgba(0,0,0,.15);
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 16px rgba(0,0,0,.08);--shadow-lg:0 8px 32px rgba(0,0,0,.1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:'Onest',system-ui,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh}
.sp-app{max-width:1280px;margin:0 auto;padding:16px}
/* Login */
.sp-login{max-width:400px;margin:80px auto;padding:0 16px}
.sp-login-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px 32px;position:relative;overflow:hidden}
.sp-login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#7c3aed,var(--accent));background-size:200% auto;animation:spGrad 4s linear infinite}
@keyframes spGrad{to{background-position:200% center}}
.sp-login-title{font-size:1.6rem;font-weight:800;text-align:center;margin-bottom:6px;letter-spacing:-.02em}
.sp-login-sub{text-align:center;color:var(--text-secondary);font-size:.88rem;margin-bottom:28px}
.sp-login-err{background:var(--error-bg);border:1px solid rgba(220,38,38,.2);border-radius:var(--radius-sm);padding:12px 16px;color:var(--error);font-size:.88rem;font-weight:500;margin-bottom:16px;display:none}
/* Form */
.sp-field{margin-bottom:16px}
.sp-label{display:block;font-weight:600;font-size:.82rem;color:var(--text-secondary);margin-bottom:6px;letter-spacing:.02em}
.sp-input{width:100%;padding:11px 14px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:.9rem;transition:all var(--transition);outline:none}
.sp-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sp-input::placeholder{color:var(--text-tertiary)}
select.sp-input{appearance:auto;cursor:pointer}
textarea.sp-input{resize:vertical;min-height:70px}
/* Buttons */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:var(--radius-sm);font-family:inherit;font-weight:600;font-size:.88rem;border:1px solid transparent;cursor:pointer;transition:all var(--transition);white-space:nowrap;line-height:1.4}
.sp-btn:active{transform:scale(.97)}
.sp-btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 8px var(--accent-glow)}
.sp-btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.sp-btn-full{width:100%;justify-content:center}
.sp-btn-success{background:var(--success);color:#fff;border-color:var(--success)}
.sp-btn-success:hover{filter:brightness(1.1)}
.sp-btn-warning{background:var(--warning-bg);color:var(--warning);border-color:rgba(217,119,6,.2)}
.sp-btn-danger{background:var(--error-bg);color:var(--error);border-color:rgba(220,38,38,.2)}
.sp-btn-ghost{background:var(--bg-tertiary);color:var(--text-secondary);border-color:var(--border)}
.sp-btn-ghost:hover{border-color:var(--border-hover);color:var(--text-primary)}
.sp-btn-sm{padding:6px 14px;font-size:.8rem;border-radius:var(--radius-xs)}
.sp-btn-icon{width:36px;height:36px;padding:0;border-radius:var(--radius-sm)}
/* Topbar */
.sp-topbar{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:20px}
.sp-avatar{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;color:var(--accent);flex-shrink:0}
.sp-topbar-info{flex:1;min-width:0}
.sp-topbar-name{font-weight:700;font-size:1rem}
.sp-topbar-meta{font-size:.78rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-topbar-actions{display:flex;gap:6px;flex-shrink:0}
/* Stats */
.sp-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.sp-stat{padding:16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);text-align:center;transition:all var(--transition);position:relative;overflow:hidden}
.sp-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.sp-stat:nth-child(1)::before{background:var(--accent)}.sp-stat:nth-child(2)::before{background:var(--warning)}.sp-stat:nth-child(3)::before{background:var(--success)}.sp-stat:nth-child(4)::before{background:var(--info)}.sp-stat:nth-child(5)::before{background:#7c3aed}
.sp-stat:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.sp-stat-num{font-size:1.8rem;font-weight:900;letter-spacing:-.03em;line-height:1}
.sp-stat:nth-child(1) .sp-stat-num{color:var(--accent)}.sp-stat:nth-child(2) .sp-stat-num{color:var(--warning)}.sp-stat:nth-child(3) .sp-stat-num{color:var(--success)}.sp-stat:nth-child(4) .sp-stat-num{color:var(--info)}.sp-stat:nth-child(5) .sp-stat-num{color:#7c3aed}
.sp-stat-label{font-size:.72rem;color:var(--text-tertiary);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
/* Widgets */
.sp-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.sp-widget{padding:18px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md)}
.sp-widget-label{font-size:.78rem;color:var(--text-tertiary);font-weight:500;margin-bottom:8px}
.sp-widget-value{font-size:1.1rem;font-weight:700;line-height:1.3}
/* Notifications */
.sp-notifs{background:var(--warning-bg);border:1px solid rgba(217,119,6,.15);border-radius:var(--radius-md);padding:18px;margin-bottom:16px;display:none}
.sp-notifs.visible{display:block}
.sp-notifs-title{font-weight:700;font-size:.92rem;margin-bottom:12px}
.sp-notif-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px}
.sp-notif-item:last-child{margin-bottom:0}
.sp-notif-body{flex:1;min-width:0}
.sp-notif-name{font-weight:600;font-size:.88rem}
.sp-notif-detail{font-size:.78rem;color:var(--text-secondary)}
.sp-notif-actions{display:flex;gap:6px;flex-shrink:0}
/* Tabs */
.sp-tabs{display:flex;gap:4px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:4px;margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tab{padding:9px 16px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;color:var(--text-secondary);background:transparent;border:none;cursor:pointer;transition:all var(--transition);font-family:inherit;white-space:nowrap;display:flex;align-items:center;gap:6px}
.sp-tab:hover{color:var(--text-primary);background:var(--bg-tertiary)}
.sp-tab.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px var(--accent-glow)}
.sp-panel{display:none}.sp-panel.active{display:block;animation:spFade .3s ease}
@keyframes spFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* Subtabs */
.sp-subtabs{display:flex;gap:4px;flex-wrap:wrap}
.sp-subtab{padding:7px 14px;border-radius:var(--radius-full);font-size:.78rem;font-weight:600;color:var(--text-secondary);background:var(--bg-tertiary);border:1px solid var(--border);cursor:pointer;transition:all var(--transition);font-family:inherit}
.sp-subtab:hover{border-color:var(--border-hover);color:var(--text-primary)}
.sp-subtab.active{background:var(--accent-soft);color:var(--accent);border-color:rgba(37,99,235,.25)}
/* Section */
.sp-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px;margin-bottom:16px}
.sp-section-title{font-size:1.05rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.sp-section-desc{font-size:.85rem;color:var(--text-secondary);margin-bottom:16px}
/* Booking card */
.sp-booking{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;margin-bottom:10px;transition:all var(--transition);position:relative;overflow:hidden}
.sp-booking::before{content:'';position:absolute;top:0;bottom:0;left:0;width:3px;border-radius:3px 0 0 3px}
.sp-booking.st-pending::before{background:var(--warning)}.sp-booking.st-confirmed::before{background:var(--success)}.sp-booking.st-completed::before{background:var(--accent)}.sp-booking.st-cancelled::before{background:var(--error)}.sp-booking.st-no-show::before{background:#f97316}.sp-booking.st-rescheduled::before{background:#7c3aed}
.sp-booking:hover{border-color:var(--border-hover);transform:translateX(2px)}
.sp-booking-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.sp-booking-dt{font-weight:700;font-size:.92rem}
.sp-badge{padding:4px 10px;border-radius:var(--radius-full);font-size:.72rem;font-weight:700;letter-spacing:.02em}
.sp-badge-pending{background:var(--warning-bg);color:var(--warning);border:1px solid rgba(217,119,6,.2)}
.sp-badge-confirmed{background:var(--success-bg);color:var(--success);border:1px solid rgba(22,163,74,.2)}
.sp-badge-completed{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(37,99,235,.2)}
.sp-badge-cancelled{background:var(--error-bg);color:var(--error);border:1px solid rgba(220,38,38,.2)}
.sp-badge-no-show{background:rgba(249,115,22,.08);color:#f97316;border:1px solid rgba(249,115,22,.2)}
.sp-badge-rescheduled{background:rgba(124,58,237,.08);color:#7c3aed;border:1px solid rgba(124,58,237,.2)}
.sp-badge-free{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(37,99,235,.2)}
.sp-booking-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:10px 0}
.sp-bfl{font-size:.72rem;color:var(--text-tertiary);font-weight:500;margin-bottom:2px}
.sp-bfv{font-weight:600;font-size:.88rem}
.sp-booking-notes{padding:10px 12px;background:var(--bg-tertiary);border-radius:var(--radius-sm);font-size:.85rem;margin:10px 0;color:var(--text-secondary)}
.sp-booking-actions{display:flex;gap:6px;flex-wrap:wrap}
/* Timeline */
.sp-tl-day{margin-bottom:24px}
.sp-tl-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sp-tl-date{font-size:1.1rem;font-weight:800;color:var(--accent)}
.sp-tl-line{flex:1;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.sp-tl-cnt{font-size:.78rem;color:var(--text-tertiary)}
/* Client */
.sp-client{display:flex;align-items:center;gap:14px;padding:16px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:8px;transition:all var(--transition)}
.sp-client:hover{border-color:var(--border-hover)}
.sp-client-ava{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex-shrink:0}
.sp-client-body{flex:1;min-width:0}
.sp-client-name{font-weight:700;font-size:.9rem}
.sp-client-meta{font-size:.78rem;color:var(--text-secondary);margin-top:2px}
.sp-client-tags{display:flex;gap:6px;flex-shrink:0}
/* Schedule */
.sp-sched-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.sp-sched-month{grid-column:1/-1;font-size:1rem;font-weight:800;color:var(--text-primary);padding:18px 0 6px;border-bottom:2px solid var(--accent);margin-bottom:4px;text-transform:capitalize}
.sp-sched-month:first-child{padding-top:0}
.sp-sched-day{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px}
.sp-sched-day:hover{border-color:var(--border-hover)}
.sp-sched-today{border-color:var(--accent);background:linear-gradient(135deg,rgba(37,99,235,.04),var(--bg-secondary));box-shadow:0 0 0 1px var(--accent),var(--shadow-sm)}
.sp-sched-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.sp-sched-date-block{display:flex;align-items:baseline;gap:6px}
.sp-sched-num{font-size:1.3rem;font-weight:800;color:var(--accent)}
.sp-sched-dow{font-size:.75rem;color:var(--text-tertiary);font-weight:600;text-transform:uppercase}
.sp-sched-mon{font-size:.78rem;color:var(--text-secondary);font-weight:500}
.sp-sched-badges{display:flex;gap:6px;margin-left:auto}
.sp-badge-today{background:var(--accent);color:#fff;font-weight:600}
.sp-slot{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--bg-tertiary);border-left:3px solid var(--accent);margin-bottom:6px;transition:all var(--transition);min-height:44px}
.sp-slot:hover{background:var(--accent-soft)}
.sp-slot.s-free{border-left-color:var(--accent)}.sp-slot.s-booked{border-left-color:var(--success)}.sp-slot.s-pending{border-left-color:var(--warning)}
.sp-slot-time{font-weight:700;font-size:.9rem;color:var(--accent);min-width:44px;flex-shrink:0}
.sp-slot-info{flex:1;min-width:0;overflow:hidden}
.sp-slot-name{font-weight:600;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-slot-svc{font-size:.75rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-slot .sp-badge{flex-shrink:0;white-space:nowrap}
.sp-slot-acts{display:flex;gap:4px;flex-shrink:0}
/* Rules */
.sp-rule{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px}
.sp-rule:hover{border-color:var(--border-hover)}
.sp-rule-day{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;flex-shrink:0}
.sp-rule-text{flex:1}.sp-rule-name{font-weight:600;font-size:.88rem}.sp-rule-time{font-size:.78rem;color:var(--text-secondary)}
/* Empty */
.sp-empty{text-align:center;padding:40px 20px;background:var(--bg-tertiary);border:2px dashed var(--border);border-radius:var(--radius-md);color:var(--text-tertiary)}
.sp-empty-icon{font-size:2.2rem;margin-bottom:10px}
.sp-empty-title{font-weight:700;font-size:1rem;color:var(--text-secondary);margin-bottom:6px}
.sp-empty-desc{font-size:.85rem;margin-bottom:16px}
/* Toast */
.sp-toast-wrap{position:fixed;top:16px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:420px;width:calc(100% - 32px)}
.sp-toast{pointer-events:auto;background:var(--bg-secondary);border:1px solid var(--accent);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lg);animation:spTIn .4s cubic-bezier(.21,1.02,.73,1) forwards}
.sp-toast.hiding{animation:spTOut .3s ease forwards}
@keyframes spTIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes spTOut{to{transform:translateX(120%);opacity:0}}
.sp-toast-glow{height:2px;background:linear-gradient(90deg,var(--accent),#7c3aed,var(--accent));background-size:200% auto;animation:spGrad 2s linear infinite}
.sp-toast-body{padding:16px;display:flex;gap:12px;align-items:flex-start}
.sp-toast-icon{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.sp-toast-content{flex:1;min-width:0}
.sp-toast-title{font-weight:700;font-size:.9rem;margin-bottom:3px}
.sp-toast-msg{font-size:.82rem;color:var(--text-secondary);line-height:1.4}
.sp-toast-close{background:none;border:none;color:var(--text-tertiary);cursor:pointer;font-size:1.1rem;padding:4px;border-radius:4px}
.sp-toast-close:hover{color:var(--text-primary);background:var(--bg-tertiary)}
.sp-toast-acts{display:flex;gap:6px;padding:0 16px 12px 68px}
.sp-toast-progress{height:2px;background:var(--bg-tertiary)}
.sp-toast-pbar{height:100%;background:var(--accent);animation:spCd 8s linear forwards}
@keyframes spCd{from{width:100%}to{width:0%}}
/* Notify */
.sp-notify{position:fixed;top:16px;right:16px;z-index:10001;padding:14px 22px;border-radius:var(--radius-sm);font-weight:600;font-size:.88rem;color:#fff;max-width:380px;animation:spTIn .3s ease;box-shadow:var(--shadow-md)}
.sp-notify.success{background:var(--success)}.sp-notify.error{background:var(--error)}.sp-notify.info{background:var(--accent)}
.sp-notify.hiding{animation:spTOut .3s ease forwards}
/* Overlay + Modal */
.sp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:spOvIn .2s ease}
@keyframes spOvIn{from{opacity:0}to{opacity:1}}
.sp-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;max-width:520px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
/* DnD */
[draggable=true]{cursor:grab;border-left:3px solid var(--accent)!important}[draggable=true]:hover{box-shadow:0 0 0 1px var(--accent),0 4px 12px rgba(37,99,235,.1)}[draggable=true]:active{cursor:grabbing;opacity:.7}
/* User dropdown */
.sp-umenu{position:relative}
.sp-umenu-trigger{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border);border-radius:var(--radius-full);background:var(--bg-secondary);cursor:pointer;transition:all .2s;font-family:inherit;color:var(--text-primary)}
.sp-umenu-trigger:hover{border-color:var(--accent);background:var(--accent-soft)}
.sp-umenu-ava{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.72rem}
.sp-umenu-drop{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 8px 30px rgba(0,0,0,.18);z-index:1000;overflow:hidden;animation:spFade .2s ease}
.sp-umenu.open .sp-umenu-drop{display:block}
.sp-umenu-hdr{padding:14px 16px}
.sp-umenu-hname{font-weight:700;font-size:.92rem}
.sp-umenu-hphone{font-size:.78rem;color:var(--text-tertiary);margin-top:2px}
.sp-umenu-sep{height:1px;background:var(--border)}
.sp-umenu-drop button{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;border:none;background:none;font-family:inherit;font-size:.88rem;color:var(--text-primary);cursor:pointer;transition:background .15s;text-align:left}
.sp-umenu-drop button:hover{background:var(--bg-tertiary)}
.sp-umenu-exit{color:var(--error)!important}
.sp-umenu-exit:hover{background:var(--error-bg)!important}
/* Drag hints */
.sp-drag-hint{font-size:.62rem;color:var(--accent);font-weight:600;opacity:.6;margin-top:3px;letter-spacing:.03em}
/* Telegram banner */
.sp-tg-banner{padding:16px 20px;background:linear-gradient(135deg,rgba(37,99,235,.05),rgba(0,136,204,.07));border:1px solid rgba(37,99,235,.18);border-radius:var(--radius-md);margin-bottom:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sp-tg-banner-body{flex:1;min-width:200px}
.sp-tg-banner-title{font-weight:700;font-size:.92rem;margin-bottom:3px}
.sp-tg-banner-desc{font-size:.82rem;color:var(--text-secondary);line-height:1.5}

.drag-target-active{outline:2px dashed rgba(37,99,235,.3);outline-offset:2px;border-radius:var(--radius-sm)}
.drag-over{background:var(--accent-soft)!important;outline-color:var(--accent)!important;outline-style:solid!important}
.dragging{opacity:.4;transform:scale(.97)}
/* Tour */
.tour-highlight{position:relative;z-index:99998!important;box-shadow:0 0 0 4px var(--accent),0 0 30px rgba(37,99,235,.4)!important;border-radius:var(--radius-sm);animation:tourPulse 1.5s ease-in-out infinite}
@keyframes tourPulse{0%,100%{box-shadow:0 0 0 4px var(--accent),0 0 30px rgba(37,99,235,.4)}50%{box-shadow:0 0 0 6px var(--accent),0 0 40px rgba(37,99,235,.6)}}
/* ═══════════════════════════════════════════════════════════════════════════
 * АДАПТИВНОСТЬ ДЛЯ ВСЕХ УСТРОЙСТВ
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Брейкпоинты:
 * - ≤320px: Очень маленькие телефоны (iPhone SE 1st gen, старые Android)
 * - ≤375px: Маленькие телефоны (iPhone SE 2/3, iPhone 6/7/8)
 * - ≤390px: Средние iPhone (iPhone 12/13/14)
 * - ≤428px: Большие iPhone (iPhone Pro Max)
 * - ≤768px: Планшеты и все мобильные
 * - ≤1024px: Маленькие планшеты и ноутбуки
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══ TABLETS & MOBILE (≤768px) ═══ */
@media(max-width:768px){
  .sp-app{padding:10px}
  .sp-topbar{flex-wrap:wrap;padding:14px 16px;gap:10px;border-radius:var(--radius-md)}
  .sp-topbar-actions{width:100%;justify-content:flex-end}
  .sp-stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .sp-stat{padding:12px 8px}
  .sp-stat-num{font-size:1.4rem}
  .sp-stat-label{font-size:.66rem}
  .sp-widgets{grid-template-columns:1fr}
  .sp-section{padding:18px 14px;border-radius:var(--radius-md);margin-bottom:12px}
  .sp-section-title{font-size:1rem;margin-bottom:12px}
  .sp-booking{padding:14px;margin-bottom:8px}
  .sp-booking-grid{grid-template-columns:1fr 1fr;gap:8px;padding:10px 0}
  .sp-sched-grid{grid-template-columns:1fr}
  .sp-client{flex-wrap:wrap;padding:12px}
  .sp-client-tags{width:100%;justify-content:flex-start;margin-top:4px}
  .sp-notif-item{flex-wrap:wrap}
  .sp-notif-actions{width:100%;justify-content:flex-end;margin-top:4px}
  #an_charts_wrap{grid-template-columns:1fr!important}
  #an_charts_wrap+div{grid-template-columns:1fr!important}
  .sp-rule{flex-wrap:wrap}
  .sp-modal{width:95%;max-width:none;padding:20px 16px;margin:10px;border-radius:var(--radius-md);max-height:90vh}
  .sp-toast-wrap{max-width:100%;width:calc(100% - 20px);right:10px;top:10px}
  .sp-toast-acts{padding-left:16px}
  .sp-notify{max-width:calc(100% - 32px);right:16px;font-size:.82rem;padding:12px 16px}
  .sp-login{margin:40px auto}
  .sp-login-card{padding:28px 20px;border-radius:var(--radius-md)}
  .sp-login-title{font-size:1.3rem}
}

/* ═══ SMALL PHONES (≤480px) ═══ */
@media(max-width:480px){
  .sp-app{padding:6px}
  .sp-topbar{padding:12px;gap:8px;border-radius:var(--radius-sm)}
  .sp-avatar{width:34px;height:34px;font-size:.75rem}
  .sp-topbar-name{font-size:.88rem}
  .sp-topbar-meta{font-size:.7rem;word-break:break-all}
  .sp-topbar-actions{gap:4px}
  .sp-umenu-trigger{padding:4px 8px;gap:4px}
  .sp-umenu-ava{width:26px;height:26px;font-size:.66rem}
  .sp-umenu-drop{right:-10px;min-width:200px}
  .sp-stats{grid-template-columns:repeat(2,1fr);gap:6px}
  .sp-stats .sp-stat:last-child{grid-column:span 2}
  .sp-stat{padding:10px 6px}
  .sp-stat-num{font-size:1.2rem}
  .sp-tabs{gap:2px;padding:3px;border-radius:var(--radius-sm);margin-bottom:14px}
  .sp-tab{padding:7px 10px;font-size:.72rem;gap:4px;border-radius:var(--radius-xs)}
  .sp-tab span{font-size:.85rem}
  .sp-subtabs{gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .sp-subtabs::-webkit-scrollbar{display:none}
  .sp-subtab{padding:6px 10px;font-size:.72rem;white-space:nowrap;flex-shrink:0}
  .sp-section{padding:14px 10px;border-radius:var(--radius-sm);margin-bottom:10px}
  .sp-section-title{font-size:.92rem;margin-bottom:10px}
  .sp-booking{padding:12px 10px}
  .sp-booking-top{gap:6px;flex-direction:column;align-items:flex-start}
  .sp-booking-dt{font-size:.85rem}
  .sp-badge{font-size:.68rem;padding:3px 8px}
  .sp-booking-grid{grid-template-columns:1fr 1fr;gap:6px;padding:8px 0;margin:8px 0}
  .sp-bfl{font-size:.68rem}
  .sp-bfv{font-size:.82rem;word-break:break-word}
  .sp-booking-actions{flex-direction:column;gap:4px}
  .sp-booking-actions .sp-btn{width:100%;justify-content:center}
  .sp-btn{padding:9px 14px;font-size:.82rem}
  .sp-btn-sm{padding:7px 12px;font-size:.76rem}
  .sp-empty{padding:28px 14px}
  .sp-empty-icon{font-size:1.8rem}
  .sp-empty-title{font-size:.9rem}
  .sp-empty-desc{font-size:.8rem}
  .sp-sched-day{padding:12px 10px}
  .sp-sched-hdr{flex-wrap:wrap;gap:6px}
  .sp-sched-num{font-size:1.1rem}
  .sp-sched-badges{gap:4px}
  .sp-slot{padding:10px;gap:8px}
  .sp-slot-time{font-size:.82rem;min-width:38px}
  .sp-slot-name{font-size:.8rem}
  .sp-slot-svc{font-size:.7rem}
  .sp-slot .sp-badge{font-size:.64rem;padding:2px 6px}
  .sp-slot-acts{gap:3px}
  .sp-slot-acts .sp-btn{padding:5px 8px;font-size:.72rem}
  .sp-client{padding:10px;gap:10px;flex-direction:column;align-items:flex-start}
  .sp-client-ava{width:36px;height:36px;font-size:.75rem}
  .sp-client-body{width:100%}
  .sp-client-name{font-size:.85rem}
  .sp-client-meta{font-size:.72rem;word-break:break-all}
  .sp-client-tags{width:100%;justify-content:flex-start}
  .sp-modal{width:100%;margin:0;border-radius:var(--radius-md) var(--radius-md) 0 0;max-height:92vh;position:fixed;bottom:0}
  .sp-overlay{align-items:flex-end}
  .sp-field{margin-bottom:12px}
  .sp-label{font-size:.78rem;margin-bottom:4px}
  .sp-input{padding:10px 12px;font-size:.85rem}
  .sp-login{margin:24px 10px;padding:0}
  .sp-login-card{padding:24px 16px}
  .sp-login-title{font-size:1.15rem}
  .sp-login-sub{font-size:.82rem;margin-bottom:20px}
  .sp-widget{padding:14px}
  .sp-widget-label{font-size:.72rem}
  .sp-widget-value{font-size:1rem}
  .sp-notifs{padding:14px}
  .sp-notifs-title{font-size:.85rem;margin-bottom:8px}
  .sp-notif-item{padding:10px;gap:8px;flex-direction:column}
  .sp-notif-name{font-size:.82rem}
  .sp-notif-detail{font-size:.72rem}
  .sp-notif-actions{width:100%;justify-content:flex-start;margin-top:4px}
  .sp-tl-date{font-size:.95rem}
  .sp-tg-banner{padding:12px;gap:10px;flex-direction:column;text-align:center}
  .sp-tg-banner-body{min-width:auto}
  .sp-tg-banner .sp-btn{width:100%}
  .sp-toast-wrap{max-width:100%;width:calc(100% - 16px);right:8px;top:8px}
  .sp-toast-body{padding:12px;gap:8px}
  .sp-toast-icon{width:32px;height:32px;font-size:1rem}
  .sp-toast-title{font-size:.82rem}
  .sp-toast-msg{font-size:.76rem}
  .sp-toast-acts{padding:0 12px 10px 52px}
  .sp-notify{max-width:calc(100% - 16px);right:8px;font-size:.8rem;padding:10px 14px}
  /* Booking view switcher + filters stack */
  #panel_bookings>div:first-child{flex-direction:column;gap:8px}
  #panel_bookings>div:first-child>div:last-child{margin-left:0;width:100%}
  #panel_bookings>div:first-child>div:last-child .sp-btn{flex:1}
  /* Schedule add form stack */
  #panel_schedule .sp-section>div[style*="display:flex"]{flex-direction:column!important;gap:8px!important}
  #panel_schedule .sp-section>div[style*="display:flex"] .sp-field{min-width:auto!important;width:100%!important}
  #panel_schedule .sp-section>div[style*="display:flex"] .sp-btn{width:100%}
  /* Add booking form */
  #panel_add_booking div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  /* Tools recurring form */
  #panel_tools div[style*="display:flex"][style*="flex-wrap:wrap"]{flex-direction:column!important}
  #panel_tools div[style*="display:flex"][style*="flex-wrap:wrap"] .sp-field{width:100%!important}
  #panel_tools div[style*="display:flex"][style*="flex-wrap:wrap"] select,
  #panel_tools div[style*="display:flex"][style*="flex-wrap:wrap"] input[type="time"]{width:100%!important}
  #panel_tools div[style*="display:flex"][style*="flex-wrap:wrap"] .sp-btn{width:100%}
}

/* ═══ MOBILE GRID OVERRIDES (≤480px) ═══ */
@media(max-width:480px){
  #panel_profile .sp-section>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  #fin_settings div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #yk_settings div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #panel_analytics div[style*="grid-template-columns:repeat"]{grid-template-columns:1fr 1fr!important}
  #panel_analytics div[style*="grid-template-columns:1fr 1fr;gap:20px"]{grid-template-columns:1fr!important}
  #panel_loyalty div[style*="grid-template-columns:repeat"]{grid-template-columns:1fr!important}
  .sp-modal div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important}
  .sp-modal div[style*="grid-template-columns:1fr 1fr;"]{grid-template-columns:1fr!important}
  .sp-modal div[style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
}
/* ═══ UNIVERSAL MOBILE FIX: Работает на ВСЕХ устройствах ≤768px ═══ */
@media(max-width:768px){
  /* Предотвращение горизонтального скролла */
  html, body{
    overflow-x:hidden!important;
    max-width:100vw!important;
  }
  
  .sp-app{
    overflow-x:hidden!important;
    max-width:100vw!important;
  }
  
  /* ВСЕ элементы уважают границы экрана */
  *{
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  
  /* Изображения */
  img{
    max-width:100%!important;
    height:auto!important;
  }
  
  /* АГРЕССИВНОЕ переопределение инлайн-стилей */
  [style*="width:"]:not(.sp-avatar):not(.sp-umenu-ava):not(.sp-client-ava):not(.sp-rule-day):not(.sp-toast-icon):not(.sp-btn-icon):not(input[type="checkbox"]):not(input[type="radio"]){
    width:auto!important;
    max-width:100%!important;
  }
  
  /* Все input и select на полную ширину */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  select,
  textarea{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  
  /* Все flex контейнеры в колонку */
  div[style*="display:flex"]:not(.sp-topbar):not(.sp-topbar-actions):not(.sp-booking-actions):not(.sp-notif-actions):not(.sp-client-tags):not(.sp-slot-acts):not(.sp-toast-acts){
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
  }
  
  /* Все .sp-field на полную ширину */
  .sp-field{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    flex:1 1 100%!important;
  }
  
  /* Все grid в одну колонку */
  div[style*="display:grid"]{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  
  /* Кнопки минимум 44px высотой */
  .sp-btn,
  button{
    min-height:44px!important;
    padding:10px 16px!important;
  }
}

/* ═══ ULTRA-MOBILE: iPhone SE, Galaxy Fold (320px - 375px) ═══ */
@media(max-width:375px){
  /* Минимальные отступы */
  .sp-app{padding:8px 4px!important}
  
  /* Topbar - компактный */
  .sp-topbar{padding:8px;gap:6px;border-radius:var(--radius-sm);flex-wrap:wrap}
  .sp-avatar{width:28px;height:28px;font-size:.65rem}
  .sp-topbar-name{font-size:.82rem;line-height:1.2}
  .sp-topbar-meta{font-size:.64rem;line-height:1.3}
  .sp-topbar-actions{width:100%;gap:4px;margin-top:4px}
  .sp-topbar-actions .sp-btn{flex:1;font-size:.7rem;padding:8px 6px;min-height:44px}
  
  /* User menu */
  .sp-umenu-trigger{padding:6px 8px;gap:4px;min-height:44px}
  .sp-umenu-ava{width:24px;height:24px;font-size:.6rem}
  .sp-umenu-drop{right:0;left:0;min-width:100%;margin:0 4px}
  
  /* Stats - 2 колонки, последняя на всю ширину */
  .sp-stats{grid-template-columns:1fr 1fr;gap:4px}
  .sp-stats .sp-stat:last-child{grid-column:1/-1}
  .sp-stat{padding:10px 6px;min-height:70px}
  .sp-stat-num{font-size:1.3rem}
  .sp-stat-label{font-size:.6rem;letter-spacing:.02em;line-height:1.3}
  
  /* Widgets - одна колонка */
  .sp-widgets{grid-template-columns:1fr;gap:6px}
  .sp-widget{padding:12px 10px}
  .sp-widget-label{font-size:.68rem}
  .sp-widget-value{font-size:.95rem}
  
  /* Tabs - горизонтальный скролл */
  .sp-tabs{padding:3px;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sp-tab{padding:8px 12px;font-size:.7rem;gap:3px;min-width:auto;flex-shrink:0}
  .sp-tab span{font-size:.8rem}
  
  /* Subtabs - горизонтальный скролл */
  .sp-subtabs{gap:4px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .sp-subtab{padding:6px 10px;font-size:.68rem;white-space:nowrap;flex-shrink:0}
  
  /* Sections */
  .sp-section{padding:12px 8px;border-radius:var(--radius-sm);margin-bottom:8px}
  .sp-section-title{font-size:.88rem;margin-bottom:10px;line-height:1.3}
  
  /* Bookings - одна колонка для всех данных */
  .sp-booking{padding:10px 8px;margin-bottom:8px}
  .sp-booking-top{gap:6px;flex-direction:column;align-items:flex-start}
  .sp-booking-dt{font-size:.8rem;line-height:1.3}
  .sp-badge{font-size:.65rem;padding:3px 8px}
  .sp-booking-grid{grid-template-columns:1fr;gap:6px;padding:8px 0;margin:8px 0}
  .sp-bfl{font-size:.66rem}
  .sp-bfv{font-size:.8rem;word-break:break-word;line-height:1.3}
  .sp-booking-notes{padding:8px 10px;font-size:.78rem;line-height:1.4}
  .sp-booking-actions{flex-direction:column;gap:6px}
  .sp-booking-actions .sp-btn{width:100%;justify-content:center;min-height:44px;font-size:.78rem;padding:10px}
  
  /* Buttons - увеличенные для удобства тапа */
  .sp-btn{padding:10px 14px;font-size:.8rem;min-height:44px}
  .sp-btn-sm{padding:8px 12px;font-size:.74rem;min-height:40px}
  .sp-btn-icon{width:44px;height:44px}
  
  /* Schedule */
  .sp-sched-grid{grid-template-columns:1fr;gap:8px}
  .sp-sched-day{padding:10px 8px}
  .sp-sched-hdr{gap:4px;padding-bottom:8px;margin-bottom:8px;flex-wrap:wrap}
  .sp-sched-date-block{gap:4px}
  .sp-sched-num{font-size:1.1rem}
  .sp-sched-dow{font-size:.66rem}
  .sp-sched-mon{font-size:.7rem}
  .sp-sched-badges{gap:4px;width:100%;margin-top:4px}
  .sp-sched-badges .sp-badge{font-size:.62rem;padding:3px 6px}
  
  /* Slots */
  .sp-slot{padding:10px 8px;gap:8px;flex-wrap:wrap;min-height:auto}
  .sp-slot-time{font-size:.8rem;min-width:auto;width:100%;margin-bottom:4px;font-weight:700}
  .sp-slot-info{width:100%}
  .sp-slot-name{font-size:.78rem;line-height:1.3}
  .sp-slot-svc{font-size:.68rem;line-height:1.3}
  .sp-slot .sp-badge{font-size:.62rem;padding:3px 6px;margin-top:4px}
  .sp-slot-acts{width:100%;gap:4px;margin-top:6px}
  .sp-slot-acts .sp-btn{flex:1;padding:6px 8px;font-size:.7rem;min-height:40px}
  
  /* Clients */
  .sp-client{padding:10px 8px;gap:8px;flex-direction:column;align-items:flex-start}
  .sp-client-ava{width:32px;height:32px;font-size:.68rem}
  .sp-client-body{width:100%}
  .sp-client-name{font-size:.82rem;line-height:1.3}
  .sp-client-meta{font-size:.7rem;word-break:break-all;line-height:1.3}
  .sp-client-tags{width:100%;justify-content:flex-start;gap:4px;margin-top:4px}
  .sp-client-tags .sp-btn{min-height:36px;font-size:.7rem}
  
  /* Modals - на весь экран */
  .sp-modal{width:100%;height:100%;max-height:100vh;margin:0;padding:16px 12px;border-radius:0;position:fixed;top:0;bottom:0;overflow-y:auto}
  .sp-overlay{align-items:stretch}
  .sp-modal .sp-section-title{font-size:.9rem;margin-bottom:12px}
  
  /* Forms */
  .sp-field{margin-bottom:12px}
  .sp-label{font-size:.76rem;margin-bottom:4px;line-height:1.3}
  .sp-input{padding:10px 12px;font-size:.84rem;min-height:44px}
  select.sp-input{min-height:44px}
  textarea.sp-input{min-height:80px}
  
  /* Login */
  .sp-login{margin:12px 8px;padding:0}
  .sp-login-card{padding:20px 14px;border-radius:var(--radius-md)}
  .sp-login-title{font-size:1.1rem;line-height:1.3}
  .sp-login-sub{font-size:.8rem;margin-bottom:16px;line-height:1.4}
  
  /* Notifications */
  .sp-notifs{padding:10px 8px}
  .sp-notifs-title{font-size:.82rem;margin-bottom:8px}
  .sp-notif-item{padding:10px 8px;gap:8px;flex-direction:column;align-items:flex-start}
  .sp-notif-name{font-size:.8rem;line-height:1.3}
  .sp-notif-detail{font-size:.7rem;line-height:1.3}
  .sp-notif-actions{width:100%;justify-content:flex-start;margin-top:6px;gap:4px}
  .sp-notif-actions .sp-btn{flex:1;min-height:40px}
  
  /* Timeline */
  .sp-tl-day{margin-bottom:16px}
  .sp-tl-head{gap:8px;margin-bottom:10px}
  .sp-tl-date{font-size:.95rem}
  .sp-tl-cnt{font-size:.7rem}
  
  /* Telegram banner */
  .sp-tg-banner{padding:10px 8px;gap:8px;flex-direction:column;text-align:center}
  .sp-tg-banner-title{font-size:.84rem;line-height:1.3}
  .sp-tg-banner-desc{font-size:.76rem;line-height:1.4}
  .sp-tg-banner .sp-btn{width:100%;min-height:44px}
  
  /* Toast */
  .sp-toast-wrap{max-width:100%;width:calc(100% - 12px);right:6px;top:6px}
  .sp-toast-body{padding:10px;gap:8px}
  .sp-toast-icon{width:32px;height:32px;font-size:1rem}
  .sp-toast-title{font-size:.8rem;line-height:1.3}
  .sp-toast-msg{font-size:.74rem;line-height:1.4}
  .sp-toast-acts{padding:0 10px 8px 50px;gap:4px}
  .sp-toast-acts .sp-btn{flex:1;min-height:36px}
  
  /* Notify */
  .sp-notify{max-width:calc(100% - 12px);right:6px;font-size:.78rem;padding:10px 12px;line-height:1.4}
  
  /* Empty state */
  .sp-empty{padding:24px 12px}
  .sp-empty-icon{font-size:1.6rem}
  .sp-empty-title{font-size:.86rem;line-height:1.3}
  .sp-empty-desc{font-size:.78rem;line-height:1.4}
  
  /* Rules */
  .sp-rule{padding:10px 8px;gap:8px;flex-wrap:wrap}
  .sp-rule-day{width:32px;height:32px;font-size:.7rem}
  .sp-rule-name{font-size:.8rem;line-height:1.3}
  .sp-rule-time{font-size:.7rem;line-height:1.3}
  
  /* Specific panel fixes */
  #panel_bookings>div:first-child{flex-direction:column;gap:6px}
  #panel_bookings>div:first-child>div:last-child{margin-left:0;width:100%}
  #panel_bookings>div:first-child>div:last-child .sp-btn{flex:1;min-height:44px}
  
  #panel_schedule .sp-section>div[style*="display:flex"]{flex-direction:column!important;gap:8px!important}
  #panel_schedule .sp-section>div[style*="display:flex"] .sp-field{min-width:auto!important;width:100%!important}
  #panel_schedule .sp-section>div[style*="display:flex"] .sp-btn{width:100%;min-height:44px}
  
  #panel_add_booking div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  
  #panel_tools div[style*="display:flex"][style*="flex-wrap:wrap"]{flex-direction:column!important}
  #panel_tools div[style*="display:flex"][style*="flex-wrap:wrap"] .sp-field{width:100%!important}
  #panel_tools div[style*="display:flex"][style*="flex-wrap:wrap"] select,
  #panel_tools div[style*="display:flex"][style*="flex-wrap:wrap"] input[type="time"]{width:100%!important;min-height:44px}
  #panel_tools div[style*="display:flex"][style*="flex-wrap:wrap"] .sp-btn{width:100%;min-height:44px}
  
  #panel_profile .sp-section>div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #fin_settings div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #yk_settings div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #panel_analytics div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #panel_loyalty div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  
  .sp-modal div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  
  /* Предотвращение горизонтального скролла */
  body{overflow-x:hidden}
  .sp-app{overflow-x:hidden}
  *{max-width:100%}
  img{height:auto}
}

/* iPhone 14 Pro (393px) and similar */
@media(max-width:400px) and (min-width:376px){
  .sp-app{padding:4px}
  .sp-topbar{padding:10px;gap:6px}
  .sp-avatar{width:30px;height:30px;font-size:.68rem}
  .sp-topbar-name{font-size:.85rem}
  .sp-topbar-meta{font-size:.66rem}
  .sp-topbar-actions .sp-btn{font-size:.72rem;padding:6px 8px}
  .sp-umenu-trigger{padding:3px 6px}
  .sp-umenu-ava{width:24px;height:24px;font-size:.62rem}
  .sp-stats{gap:4px}
  .sp-stat{padding:8px 4px}
  .sp-stat-num{font-size:1.05rem}
  .sp-stat-label{font-size:.62rem;letter-spacing:.04em}
  .sp-widgets{gap:4px}
  .sp-widget{padding:10px}
  .sp-widget-label{font-size:.68rem}
  .sp-widget-value{font-size:.88rem}
  .sp-tabs{padding:2px;gap:1px}
  .sp-tab{padding:6px 8px;font-size:.68rem;gap:3px}
  .sp-tab span{font-size:.78rem}
  .sp-section{padding:12px 8px}
  .sp-section-title{font-size:.88rem}
  .sp-booking{padding:10px 8px}
  .sp-booking-dt{font-size:.8rem}
  .sp-booking-grid{grid-template-columns:1fr;gap:4px}
  .sp-bfv{font-size:.8rem}
  .sp-booking-actions .sp-btn{font-size:.76rem;padding:8px 10px}
  .sp-sched-day{padding:10px 8px}
  .sp-sched-hdr{gap:4px;padding-bottom:8px;margin-bottom:10px}
  .sp-sched-date-block{gap:4px}
  .sp-sched-num{font-size:1rem}
  .sp-sched-dow{font-size:.68rem}
  .sp-sched-mon{font-size:.72rem}
  .sp-sched-badges .sp-badge{font-size:.6rem;padding:2px 5px}
  .sp-slot{padding:8px;gap:6px}
  .sp-slot-time{min-width:34px;font-size:.78rem}
  .sp-slot-name{font-size:.76rem}
  .sp-slot-svc{font-size:.66rem}
  .sp-slot .sp-badge{font-size:.6rem;padding:2px 5px}
  .sp-slot-acts .sp-btn{padding:4px 6px;font-size:.68rem}
  .sp-client{padding:8px;gap:8px}
  .sp-client-ava{width:32px;height:32px;font-size:.68rem}
  .sp-client-name{font-size:.8rem}
  .sp-client-meta{font-size:.68rem}
  .sp-client-tags .sp-btn{padding:5px 7px}
  .sp-notifs{padding:10px}
  .sp-notifs-title{font-size:.82rem}
  .sp-tg-banner{padding:10px;gap:8px}
  .sp-tg-banner-title{font-size:.85rem}
  .sp-tg-banner-desc{font-size:.78rem}
  .sp-modal{padding:20px 14px;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
  .sp-modal .sp-section-title{font-size:.92rem}
  .sp-login{margin:16px 6px}
  .sp-login-card{padding:20px 14px}
  .sp-login-title{font-size:1.05rem}
  .sp-empty{padding:20px 10px}
  .sp-empty-icon{font-size:1.5rem}
  .sp-empty-title{font-size:.85rem}
  .sp-rule{padding:10px;gap:8px}
  .sp-rule-day{width:28px;height:28px;font-size:.68rem}
  .sp-rule-name{font-size:.82rem}
  .sp-rule-time{font-size:.72rem}
  .sp-subtab{padding:5px 8px;font-size:.68rem}
  .sp-umenu-drop button{padding:10px 14px;font-size:.82rem}
}


/* Базовый контейнер */
[data-tooltip] {
    position: relative;
    cursor: help;
}

/* Пузырь тултипа */
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    padding: 8px 14px;
    max-width: 280px;
    width: max-content;
    background: var(--bg-tertiary, #1e1e2e);
    color: var(--text-primary, #e2e8f0);
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: .01em;
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: var(--radius-md, 10px);
    box-shadow:
        0 4px 16px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.04),
        inset 0 1px 0 rgba(255,255,255,.05);
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    font-family: inherit;
}

/* Стрелка */
[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    border: 6px solid transparent;
    border-top-color: var(--border, rgba(255,255,255,.08));
    z-index: 100000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

/* Появление */
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
[data-tooltip]:hover::before,
[data-tooltip]:focus::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ---- Позиции ---- */

/* Снизу */
[data-tooltip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 10px);
    transform: translateX(-50%) translateY(-6px);
}
[data-tooltip-pos="bottom"]::before {
    bottom: auto;
    top: calc(100% + 4px);
    border-top-color: transparent;
    border-bottom-color: var(--border, rgba(255,255,255,.08));
    transform: translateX(-50%) translateY(-6px);
}
[data-tooltip-pos="bottom"]:hover::after,
[data-tooltip-pos="bottom"]:focus::after {
    transform: translateX(-50%) translateY(0);
}
[data-tooltip-pos="bottom"]:hover::before,
[data-tooltip-pos="bottom"]:focus::before {
    transform: translateX(-50%) translateY(0);
}

/* Слева */
[data-tooltip-pos="left"]::after {
    bottom: auto;
    left: auto;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
}
[data-tooltip-pos="left"]::before {
    bottom: auto;
    left: auto;
    right: calc(100% + 4px);
    top: 50%;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: var(--border, rgba(255,255,255,.08));
    transform: translateY(-50%) translateX(6px);
}
[data-tooltip-pos="left"]:hover::after,
[data-tooltip-pos="left"]:focus::after {
    transform: translateY(-50%) translateX(0);
}
[data-tooltip-pos="left"]:hover::before,
[data-tooltip-pos="left"]:focus::before {
    transform: translateY(-50%) translateX(0);
}

/* Справа */
[data-tooltip-pos="right"]::after {
    bottom: auto;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
}
[data-tooltip-pos="right"]::before {
    bottom: auto;
    left: calc(100% + 4px);
    top: 50%;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-right-color: var(--border, rgba(255,255,255,.08));
    transform: translateY(-50%) translateX(-6px);
}
[data-tooltip-pos="right"]:hover::after,
[data-tooltip-pos="right"]:focus::after {
    transform: translateY(-50%) translateX(0);
}
[data-tooltip-pos="right"]:hover::before,
[data-tooltip-pos="right"]:focus::before {
    transform: translateY(-50%) translateX(0);
}

/* ---- Цветовые варианты ---- */

/* Акцентный */
[data-tooltip-type="accent"]::after {
    background: var(--accent, #6366f1);
    color: #fff;
    border-color: var(--accent, #6366f1);
    box-shadow:
        0 4px 20px var(--accent-glow, rgba(99,102,241,.3)),
        inset 0 1px 0 rgba(255,255,255,.15);
}
[data-tooltip-type="accent"]::before {
    border-top-color: var(--accent, #6366f1);
}
[data-tooltip-type="accent"][data-tooltip-pos="bottom"]::before {
    border-top-color: transparent;
    border-bottom-color: var(--accent, #6366f1);
}

/* Успех */
[data-tooltip-type="success"]::after {
    background: var(--success, #22c55e);
    color: #fff;
    border-color: var(--success, #22c55e);
    box-shadow: 0 4px 16px rgba(34,197,94,.25);
}
[data-tooltip-type="success"]::before {
    border-top-color: var(--success, #22c55e);
}
[data-tooltip-type="success"][data-tooltip-pos="bottom"]::before {
    border-top-color: transparent;
    border-bottom-color: var(--success, #22c55e);
}

/* Предупреждение */
[data-tooltip-type="warning"]::after {
    background: var(--warning, #f59e0b);
    color: #1a1a2e;
    border-color: var(--warning, #f59e0b);
    box-shadow: 0 4px 16px rgba(245,158,11,.25);
}
[data-tooltip-type="warning"]::before {
    border-top-color: var(--warning, #f59e0b);
}
[data-tooltip-type="warning"][data-tooltip-pos="bottom"]::before {
    border-top-color: transparent;
    border-bottom-color: var(--warning, #f59e0b);
}

/* Ошибка */
[data-tooltip-type="error"]::after {
    background: var(--error, #ef4444);
    color: #fff;
    border-color: var(--error, #ef4444);
    box-shadow: 0 4px 16px rgba(239,68,68,.25);
}
[data-tooltip-type="error"]::before {
    border-top-color: var(--error, #ef4444);
}
[data-tooltip-type="error"][data-tooltip-pos="bottom"]::before {
    border-top-color: transparent;
    border-bottom-color: var(--error, #ef4444);
}

/* ---- Для изображений с alt ---- */
.sf-img-tooltip {
    position: relative;
    display: inline-block;
}
.sf-img-tooltip img {
    display: block;
    border-radius: var(--radius-md, 10px);
}
.sf-img-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: 6px 12px;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--radius-sm, 8px);
    text-align: center;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
    z-index: 2;
}
.sf-img-tooltip:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Адаптив ---- */
@media (max-width: 600px) {
    [data-tooltip]::after {
        max-width: 200px;
        font-size: .76rem;
        padding: 6px 10px;
    }
}

/* ---- Без анимации (для prefers-reduced-motion) ---- */
@media (prefers-reduced-motion: reduce) {
    [data-tooltip]::after,
    [data-tooltip]::before,
    .sf-img-tooltip::after {
        transition: none;
    }
}