:root{--bg:#080c14;--sidebar:#0c1220;--panel:#101827;--panel2:#151f31;--panel3:#1a263a;--text:#f7f9fc;--muted:#8f9bb0;--line:#202d42;--accent:#6d5dfc;--accent2:#35a7ff;--good:#2bd99f;--warn:#f5b84b;--bad:#ff6174;--shadow:0 18px 50px #0004;--radius:18px}body.light{--bg:#f4f7fb;--sidebar:#fff;--panel:#fff;--panel2:#f6f8fc;--panel3:#edf2f8;--text:#111827;--muted:#697386;--line:#e1e7ef;--shadow:0 12px 35px #1f29370d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(900px 500px at 75% -20%,#5142ff18,transparent),var(--bg);color:var(--text);font:14px Inter,system-ui,sans-serif;min-height:100vh;transition:background .25s,color .25s}button,input,select,textarea{font:inherit}button{cursor:pointer}.shell{display:grid;grid-template-columns:258px minmax(0,1fr);min-height:100vh}.side{height:100vh;position:sticky;top:0;padding:20px 14px;background:color-mix(in srgb,var(--sidebar) 94%,transparent);border-right:1px solid var(--line);backdrop-filter:blur(18px);display:flex;flex-direction:column;z-index:20}.brand-wrap{display:flex;align-items:center;gap:11px;padding:5px 9px 20px}.logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,var(--accent),var(--accent2));display:grid;place-items:center;box-shadow:0 8px 25px #6d5dfc55}.logo svg{width:21px;height:21px}.brand{font-weight:800;font-size:18px;letter-spacing:-.4px}.biz-name{font-size:11px;color:var(--muted);margin-top:2px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav{overflow:auto;padding-right:2px}.nav-label{padding:18px 11px 7px;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#64728a;font-weight:800}.nav button{width:100%;display:flex;align-items:center;gap:11px;text-align:left;border:0;padding:10px 11px;margin:2px 0;border-radius:11px;background:transparent;color:var(--muted);font-weight:600;transition:.18s}.nav button svg{width:18px;height:18px;flex:none}.nav button:hover{background:var(--panel2);color:var(--text)}.nav button.active{color:#fff;background:linear-gradient(90deg,#6556ee33,#6556ee16);box-shadow:inset 3px 0 var(--accent);border:1px solid #6556ee3b}.side-foot{margin-top:auto;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);font-size:12px}.main{min-width:0}.topbar{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);z-index:15}.search{width:min(520px,48vw);position:relative}.search input{padding-left:40px}.search svg{position:absolute;left:13px;top:11px;width:18px;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:8px}.icon-btn,.ghost{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:11px;padding:9px 11px;font-weight:700;transition:.18s}.icon-btn{width:39px;height:39px;padding:0;display:grid;place-items:center}.icon-btn svg{width:18px}.icon-btn:hover,.ghost:hover{border-color:#6d5dfc66;background:var(--panel2);transform:translateY(-1px)}.content{padding:28px;max-width:1600px;margin:auto}.page-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.eyebrow{color:#9c91ff;text-transform:uppercase;letter-spacing:1.3px;font-size:11px;font-weight:800}.page-head h1{font-size:29px;letter-spacing:-1px;margin:5px 0 4px}.muted{color:var(--muted)}.primary{border:0;color:#fff;font-weight:700;padding:10px 14px;border-radius:11px;background:linear-gradient(135deg,var(--accent),#8b5cf6);box-shadow:0 8px 22px #6d5dfc35;transition:.18s}.primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px #6d5dfc45}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card{border:1px solid var(--line);background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 98%,transparent),color-mix(in srgb,var(--panel2) 93%,transparent));border-radius:var(--radius);box-shadow:0 8px 28px #00000014;animation:rise .35s ease both}.metric{padding:17px;position:relative;overflow:hidden}.metric:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-35px;top:-35px;background:var(--glow,#6d5dfc);filter:blur(35px);opacity:.12}.metric-top{display:flex;align-items:center;justify-content:space-between}.metric-icon{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--tone,var(--accent)) 16%,transparent);color:var(--tone,var(--accent))}.metric-icon svg{width:20px}.metric-value{font-size:25px;font-weight:800;letter-spacing:-.8px;margin:13px 0 3px}.metric-label{color:var(--muted);font-size:12px}.dashboard-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:14px;margin-top:14px}.card-head{display:flex;justify-content:space-between;align-items:center;padding:18px 19px 0}.card-head h3{margin:0;font-size:15px}.card-body{padding:17px 19px}.chart{height:235px;display:flex;align-items:end;gap:10px;padding-top:25px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0,transparent 54px,var(--line) 55px)}.bar{flex:1;min-width:18px;border-radius:7px 7px 2px 2px;background:linear-gradient(to top,#5d4de0,var(--accent2));opacity:.88;position:relative;animation:grow .7s ease both}.bar:hover{opacity:1;filter:brightness(1.15)}.bar span{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted)}.list{display:grid;gap:5px}.list-row{display:flex;align-items:center;gap:11px;padding:10px;border-radius:11px;transition:.15s}.list-row:hover{background:var(--panel2)}.avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#6d5dfc,#35a7ff);display:grid;place-items:center;color:white;font-weight:800;flex:none}.grow{flex:1;min-width:0}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:var(--panel3);font-size:11px;font-weight:700;color:var(--muted)}.badge.good{background:#2bd99f18;color:var(--good)}.badge.warn{background:#f5b84b18;color:var(--warn)}.badge.bad{background:#ff617418;color:var(--bad)}.announce{padding:14px 16px;border:1px solid #f5b84b3d;background:#f5b84b0b;border-radius:13px;margin-top:10px}.table-card{overflow:hidden}.table-toolbar{display:flex;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}.table-toolbar input{max-width:330px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);white-space:nowrap}th{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:800;background:color-mix(in srgb,var(--panel2) 70%,transparent)}tbody tr{transition:.15s}tbody tr:hover{background:var(--panel2)}input,select,textarea{width:100%;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:11px;padding:10px 12px;outline:0;transition:.18s}input:focus,select:focus,textarea:focus{border-color:#6d5dfc99;box-shadow:0 0 0 3px #6d5dfc16}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid label span{display:block;margin-bottom:6px;font-size:11px;font-weight:700;color:var(--muted)}.modal-bg{position:fixed;inset:0;background:#03060dbb;backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;z-index:50;animation:fade .18s}.modal{width:min(680px,100%);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow);animation:pop .22s}.modal-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.modal-title h2{margin:0}.toast{position:fixed;right:22px;bottom:22px;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:80;animation:toastin .25s}.empty{padding:50px 20px;text-align:center;color:var(--muted)}.login{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:radial-gradient(700px 500px at 15% 30%,#6d5dfc22,transparent),var(--bg)}.login-art{padding:70px;display:flex;flex-direction:column;justify-content:center}.login-art h1{font-size:54px;letter-spacing:-2.5px;max-width:650px;margin:20px 0 15px}.login-art p{font-size:17px;max-width:580px;line-height:1.7}.login-panel{display:grid;place-items:center;padding:30px;background:#080c1488;backdrop-filter:blur(20px)}.login-card{width:min(430px,100%);padding:30px;border:1px solid var(--line);background:var(--panel);border-radius:22px;box-shadow:var(--shadow)}.login-card h2{font-size:25px;margin:25px 0 6px}.login-card form{display:grid;gap:12px;margin-top:23px}.login-card button{margin-top:5px}.mobile-menu{display:none}.section{margin-top:14px}.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}.activity-line{padding:12px 0;border-bottom:1px solid var(--line);display:flex;gap:11px}.activity-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:5px;box-shadow:0 0 0 5px #6d5dfc15}.footer-link{color:var(--muted);text-decoration:none}.footer-link:hover{color:var(--text)}@keyframes rise{from{opacity:0;transform:translateY(8px)}}@keyframes grow{from{height:0!important}}@keyframes fade{from{opacity:0}}@keyframes pop{from{opacity:0;transform:scale(.975) translateY(8px)}}@keyframes toastin{from{opacity:0;transform:translateY(10px)}} @media(max-width:1150px){.metrics{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.login-art{padding:45px}.login-art h1{font-size:42px}} @media(max-width:850px){.shell{grid-template-columns:1fr}.side{position:fixed;left:-275px;width:258px;transition:left .25s}.side.open{left:0;box-shadow:30px 0 80px #0008}.mobile-menu{display:grid}.topbar{padding:0 16px}.search{display:none}.content{padding:20px}.login{grid-template-columns:1fr}.login-art{display:none}.login-panel{min-height:100vh}.split{grid-template-columns:1fr}} @media(max-width:560px){.metrics,.form-grid{grid-template-columns:1fr}.content{padding:15px}.topbar{height:62px}.page-head{align-items:flex-start;flex-direction:column}.page-head h1{font-size:25px}.metric-value{font-size:23px}.login-panel{padding:16px}.card-head,.card-body{padding-left:15px;padding-right:15px}} .row-actions{display:flex;gap:7px;align-items:center;white-space:nowrap}.mini{border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:9px;padding:7px 10px;cursor:pointer}.mini:hover{transform:translateY(-1px);border-color:var(--accent)}.mini.danger{color:#ff7182}.secondary{border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:10px;padding:10px 14px;cursor:pointer}.modal-actions{margin-top:18px;display:flex;justify-content:flex-end}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.profile-grid>div{display:flex;flex-direction:column;gap:5px}.profile-grid .wide{grid-column:1/-1}.quick-actions{display:flex;flex-wrap:wrap;gap:10px}.analytics-bars{height:240px;display:flex;align-items:flex-end;gap:18px;overflow-x:auto;padding:25px 8px 0}.analytics-bars>div{min-width:75px;text-align:center;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:7px}.analytics-bar{width:42px;max-height:180px;min-height:8px;margin:0 auto;border-radius:10px 10px 3px 3px;background:linear-gradient(180deg,var(--accent),#3b82f6);box-shadow:0 0 24px color-mix(in srgb,var(--accent) 30%,transparent);animation:growBar .5s ease both}.analytics-bars span{font-size:11px;color:var(--muted)}@keyframes growBar{from{height:0}}@media(max-width:700px){.profile-grid{grid-template-columns:1fr}.row-actions{flex-wrap:wrap}.quick-actions>*{flex:1 1 100%}} /* v0.4 functional UI additions */ :root{--accent:#7c3aed}.head-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.danger{background:rgba(239,68,68,.12)!important;color:#ff7b86!important;border-color:rgba(239,68,68,.28)!important}.text-bad{color:#ff6b78}.link{background:none;border:0;color:inherit;padding:0;cursor:pointer;text-align:left}.link:hover{color:var(--accent)}.toolbar{padding:14px;display:flex;gap:10px;border-bottom:1px solid var(--line)}.toolbar input{flex:1}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.modal.small{max-width:430px}.modal.wide{max-width:900px}.modal-scroll{max-height:70vh;overflow:auto;padding-right:3px}.form-grid .full{grid-column:1/-1}.form-grid textarea{min-height:95px;resize:vertical}.check{display:flex!important;align-items:center;gap:10px;background:rgba(255,255,255,.025);padding:11px 13px;border:1px solid var(--line);border-radius:10px}.check input{width:auto}.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.details>div{display:flex;flex-direction:column;gap:6px}.details span{font-size:12px;color:var(--muted)}.profile-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.timeline{position:relative}.timeline-item{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}.timeline-item>i{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent);margin-top:5px;flex:0 0 auto}.timeline-item small{color:var(--muted)}details pre{white-space:pre-wrap;max-width:700px;background:rgba(0,0,0,.2);padding:10px;border-radius:8px;font-size:11px}.kanban{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:12px;overflow:auto;padding-bottom:8px}.kanban-col{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;padding:12px;min-height:320px}.kanban-col>h3{text-transform:capitalize;margin:4px 4px 12px}.lead-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px;margin-bottom:10px;display:flex;flex-direction:column;gap:7px;box-shadow:0 8px 30px rgba(0,0,0,.12)}.pad{padding:12px}.calendar-card{overflow:hidden}.calendar-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.dow{padding:10px;text-align:center;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}.cal-day{min-height:105px;padding:8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}.cal-day small{background:color-mix(in srgb,var(--accent) 18%,transparent);border-left:2px solid var(--accent);padding:3px 5px;border-radius:4px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cal-day.today{box-shadow:inset 0 0 0 1px var(--accent)}.muted-day{opacity:.25}.agenda{grid-column:1/-1;width:100%;padding:12px}.agenda-row{display:grid;grid-template-columns:170px 1fr 1fr auto;gap:10px;padding:12px;border-bottom:1px solid var(--line)}.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button,.settings-tabs button{background:transparent;color:var(--muted);border:0;padding:9px 12px;cursor:pointer}.seg button.active,.settings-tabs button.active{background:var(--accent);color:white}.notification-row{width:100%;display:flex;gap:12px;align-items:center;padding:13px;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;text-align:left;cursor:pointer}.notification-row.unread{background:color-mix(in srgb,var(--accent) 8%,transparent)}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.export-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.export-card{padding:22px}.settings-tabs{display:flex;gap:5px;margin-bottom:14px;border-bottom:1px solid var(--line)}.settings-tabs button{border-radius:9px 9px 0 0}.hidden{display:none!important}.order{width:70px!important;margin-left:auto}.stats-inline{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.stats-inline span{background:rgba(255,255,255,.04);padding:10px 12px;border-radius:10px;border:1px solid var(--line)}.skeleton-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.skeleton-grid i{height:150px;border-radius:14px;background:linear-gradient(90deg,var(--card),rgba(255,255,255,.08),var(--card));background-size:200% 100%;animation:shimmer 1.2s infinite}@keyframes shimmer{to{background-position:-200% 0}}#toasts{position:fixed;right:18px;bottom:18px;z-index:10000;display:flex;flex-direction:column;gap:8px}.toast{position:static!important;transform:none!important;animation:toastin .2s ease;background:#182235;border:1px solid var(--line);padding:12px 16px;border-radius:11px;box-shadow:0 15px 45px rgba(0,0,0,.35)}.toast.bad{border-color:#ef4444}@keyframes toastin{from{opacity:0;transform:translateY(8px)}} @media(max-width:1050px){.profile-grid,.three{grid-template-columns:1fr}.kanban{grid-template-columns:repeat(5,240px)}.export-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:720px){.toolbar{flex-direction:column}.permission-grid,.details,.export-grid{grid-template-columns:1fr}.calendar-grid{min-width:720px}.calendar-card{overflow:auto}.cal-day{min-height:85px}.head-actions{width:100%}.head-actions>*{flex:1}.modal{width:94vw!important}.table-wrap{overflow:auto}.table-wrap table{min-width:760px}.agenda-row{grid-template-columns:1fr 1fr}.settings-tabs{overflow:auto}.settings-tabs button{white-space:nowrap}} /* v0.6 feature-complete beta visual pass */ :root{--radius-xl:22px;--radius-lg:16px;--shadow-soft:0 16px 50px rgba(0,0,0,.16);--glass:color-mix(in srgb,var(--panel) 88%,transparent)} body{background-image:radial-gradient(circle at 15% -10%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 32%),radial-gradient(circle at 100% 0,color-mix(in srgb,#38bdf8 8%,transparent),transparent 28%);background-attachment:fixed} .side{backdrop-filter:blur(18px);background:color-mix(in srgb,var(--sidebar) 94%,transparent);border-right:1px solid color-mix(in srgb,var(--line) 75%,transparent)} .nav button{border:1px solid transparent;transition:transform .18s ease,background .18s ease,border-color .18s ease}.nav button:hover{transform:translateX(3px);border-color:var(--line)}.nav button.active{box-shadow:inset 3px 0 0 var(--accent),0 8px 22px color-mix(in srgb,var(--accent) 12%,transparent)} .topbar{backdrop-filter:blur(18px);background:color-mix(in srgb,var(--bg) 78%,transparent)} .card{border-radius:var(--radius-xl);box-shadow:0 1px 0 rgba(255,255,255,.03),0 18px 60px rgba(0,0,0,.08);overflow:hidden;transition:transform .2s ease,border-color .2s ease}.card:hover{border-color:color-mix(in srgb,var(--accent) 28%,var(--line))} .metric{position:relative;overflow:hidden}.metric:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-45px;top:-45px;background:color-mix(in srgb,var(--accent) 8%,transparent)} button,.button,input,select,textarea{transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease}button:active,.button:active{transform:translateY(1px)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)} .primary{box-shadow:0 9px 24px color-mix(in srgb,var(--accent) 22%,transparent)} .modal-bg{backdrop-filter:blur(10px);animation:fadeIn .16s ease}.modal{border-radius:24px;box-shadow:var(--shadow-soft);animation:modalIn .2s ease}@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}} #view{animation:pageIn .22s ease}@keyframes pageIn{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:none}} .table-wrap table{border-collapse:separate;border-spacing:0}tbody tr{transition:background .14s ease}tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}thead th{position:sticky;top:0;z-index:2;background:var(--panel)} .badge{border:1px solid color-mix(in srgb,currentColor 18%,transparent)} .kanban{gap:16px;overflow-x:auto;padding-bottom:8px}.kanban-col{min-width:270px;border-radius:20px;background:color-mix(in srgb,var(--panel2) 78%,transparent);transition:box-shadow .16s,border-color .16s}.kanban-col.drag-over{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}.lead-card{cursor:grab;border-radius:15px;box-shadow:0 8px 24px rgba(0,0,0,.07)}.lead-card:active{cursor:grabbing} .calendar-card{overflow:visible}.calendar-grid{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}.cal-day{background:var(--panel);min-height:120px}.cal-day:hover{background:color-mix(in srgb,var(--accent) 5%,var(--panel))}.cal-day.today{box-shadow:inset 0 0 0 2px var(--accent)} .chart{min-height:270px;align-items:end}.bar{border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#111827));min-width:34px} .analytics-controls{display:flex;gap:8px;flex-wrap:wrap}.analytics-controls input,.analytics-controls select{width:auto} .export-center{max-width:900px;margin-top:18px}.export-center .card-body{padding:28px} .timeline-item{padding:12px 0}.timeline-item i{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent)} .skeleton{background:linear-gradient(90deg,var(--panel2),color-mix(in srgb,var(--panel2) 70%,white),var(--panel2));background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:12px}@keyframes shimmer{to{background-position:-200% 0}} @media(max-width:760px){.content{padding:14px}.page-head{align-items:flex-start;gap:12px}.page-actions{width:100%;overflow-x:auto}.metrics{grid-template-columns:1fr 1fr}.table-wrap table,.table-wrap thead,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block}.table-wrap thead{display:none}.table-wrap tr{margin:10px;border:1px solid var(--line);border-radius:16px;padding:10px;background:var(--panel)}.table-wrap td{border:0;padding:6px 4px}.table-wrap td:empty{display:none}.calendar-grid{min-width:720px}.calendar-card{overflow:auto}.modal{width:calc(100vw - 18px);max-height:92vh}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.metrics{gap:8px}.metric{padding:14px}} @media(max-width:460px){.metrics{grid-template-columns:1fr}.topbar{padding-inline:10px}.search{display:none}} /* v0.6.2 visible playful overhaul */ :root{--bg:#080a12;--sidebar:#0d1020;--panel:#111526;--panel2:#171c31;--panel3:#1d2440;--text:#f8f8ff;--muted:#98a1b8;--line:#262d49;--accent:#7c5cff;--accent2:#22d3ee;--radius:22px} body{background:radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 26rem),radial-gradient(circle at 88% 14%,rgba(34,211,238,.10),transparent 28rem),linear-gradient(180deg,#090b14,#080a12)!important} .shell{grid-template-columns:272px minmax(0,1fr)!important}.side{padding:18px 12px!important;box-shadow:12px 0 35px rgba(0,0,0,.12)} .logo{width:46px!important;height:46px!important;border-radius:16px!important;font-size:24px!important;background:linear-gradient(135deg,var(--accent),#9b6cff 52%,var(--accent2))!important} .side-chip{margin:0 8px 12px;padding:9px 11px;border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 15%,transparent),rgba(34,211,238,.08));border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));font-size:11px;font-weight:800} .nav button{min-height:46px!important;padding:9px 12px!important;margin:4px!important;border-radius:14px!important;gap:12px!important}.nav button:hover{transform:translateX(4px)!important}.nav button.active{background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 28%,var(--panel2)),color-mix(in srgb,var(--accent2) 8%,var(--panel2)))!important;box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 15%,transparent)!important} .nav-emoji{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;font-size:17px;background:rgba(255,255,255,.045)} .side-foot{display:flex!important;align-items:center!important;gap:10px!important;border-radius:16px!important}.user-bubble{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:900;color:white;background:linear-gradient(135deg,var(--accent),var(--accent2))} .topbar{height:76px!important;background:color-mix(in srgb,var(--bg) 78%,transparent)!important}.search input{min-height:46px!important;border-radius:16px!important;padding-left:44px!important}.search-emoji{position:absolute;left:15px;top:12px;font-size:18px}.fun-btn{font-size:18px!important} .page-head h1{font-size:32px!important}.eyebrow{display:inline-flex;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 11%,transparent);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);text-transform:none!important} .primary{background:linear-gradient(135deg,var(--accent),#9966ff 52%,#4f9cff)!important;border-radius:13px!important;box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 25%,transparent)!important}.primary:hover{transform:translateY(-2px) scale(1.01)!important} .metric{padding:18px!important;min-height:154px!important;border-radius:22px!important;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 50%),linear-gradient(145deg,var(--panel),var(--panel2))!important}.metric:hover{transform:translateY(-4px)!important}.metric-icon{width:44px!important;height:44px!important;border-radius:14px!important;font-size:21px!important}.metric-value{font-size:29px!important}.metric-sub{font-size:11px;color:var(--muted);margin-top:5px} .card{border-radius:22px!important;box-shadow:0 12px 38px rgba(0,0,0,.12)!important} input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),select,textarea{min-height:46px!important;border-radius:14px!important;padding:11px 13px!important;background:linear-gradient(180deg,var(--panel2),var(--panel))!important}input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent)!important} input[type="checkbox"]{appearance:none!important;width:22px!important;height:22px!important;border-radius:7px!important;border:1.5px solid #56607a!important;background:var(--panel2)!important;display:inline-grid!important;place-content:center!important}input[type="checkbox"]::before{content:"✓";font-size:14px;font-weight:900;color:white;transform:scale(0)}input[type="checkbox"]:checked{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;border-color:transparent!important}input[type="checkbox"]:checked::before{transform:scale(1)} .table-wrap{border-radius:0 0 22px 22px!important}.table-toolbar{background:color-mix(in srgb,var(--panel2) 44%,transparent)}tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,var(--panel2))!important}.badge{border-radius:999px!important} .modal-bg{backdrop-filter:blur(12px)!important}.modal{border-radius:26px!important;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 35%),var(--panel)!important}.toast{border-radius:16px!important} .empty{margin:12px;border:1px dashed var(--line);border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel2) 55%,transparent),transparent)!important}.empty:before{content:"✨";display:block;font-size:28px;margin-bottom:9px} *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 50%,#64748b) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 48%,#64748b);border-radius:999px;border:3px solid transparent;background-clip:padding-box} @media(max-width:900px){.content{padding:18px!important}.search{display:block!important;width:calc(100vw - 132px)!important}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:560px){.content{padding:14px!important}.page-head{flex-direction:column!important;align-items:flex-start!important}.metrics{grid-template-columns:1fr!important}.dashboard-grid,.split{grid-template-columns:1fr!important}.modal{width:100%!important}} /* v0.6.3 usability/alignment pass — targeted changes only */ .head-actions{align-items:center;justify-content:flex-end;gap:8px} .head-actions .primary,.head-actions .ghost,.head-actions .button,.compact-action{min-height:36px!important;height:36px!important;width:auto!important;flex:0 0 auto!important;padding:7px 11px!important;font-size:12px!important;white-space:nowrap} .page-head{align-items:center!important} .card-head{align-items:center} .toolbar{align-items:center;flex-wrap:wrap} .toolbar input,.toolbar select,.toolbar button{height:38px!important;min-height:38px!important;margin:0!important} .toolbar input{min-width:210px}.toolbar select{width:auto;min-width:140px}.toolbar button{width:auto} .row-actions{align-items:center;justify-content:flex-end}.row-actions .mini{min-height:32px;height:32px;padding:5px 9px} .form-grid>button,.form-actions .primary{width:auto!important;justify-self:start!important} .form-actions{display:flex;align-items:center;gap:8px;margin-top:8px}.form-actions.full{grid-column:1/-1} .bulk-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--accent) 5%,var(--panel2));flex-wrap:wrap} .bulk-bar>span{margin-right:auto;color:var(--muted)}.bulk-bar>span b{color:var(--text)} .bulk-bar button{height:34px;min-height:34px;padding:5px 10px} .select-cell{width:44px!important;text-align:center!important}.select-cell input[type="checkbox"]{margin:0!important} .settings-tabs{gap:4px}.settings-tabs button{min-height:38px;padding:8px 12px} .dashboard-widget{min-height:48px}.dashboard-widget .order{height:32px!important;min-height:32px!important;width:62px!important;padding:5px 8px!important} .permission-grid{align-items:stretch} @media(max-width:720px){.head-actions{width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px}.head-actions>*{flex:0 0 auto!important}.toolbar{align-items:stretch}.toolbar input,.toolbar select,.toolbar button{width:100%!important}.bulk-bar{align-items:stretch}.bulk-bar>span{width:100%;margin:0 0 2px}.bulk-bar button{flex:1 1 auto}.select-cell{width:auto!important}.settings-tabs button{flex:0 0 auto}.page-head{align-items:flex-start!important}} /* v0.6.4 targeted header/action button sizing fix */ .page-head .head-actions{ display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:8px!important; flex-wrap:wrap!important; } .page-head .head-actions button, .page-head .head-actions .primary, .page-head .head-actions .ghost, .page-head .head-actions .mini, .page-head .head-actions .button{ width:auto!important; min-width:0!important; max-width:max-content!important; height:34px!important; min-height:34px!important; padding:0 11px!important; border-radius:10px!important; font-size:11px!important; line-height:1!important; font-weight:700!important; letter-spacing:0!important; white-space:nowrap!important; flex:0 0 auto!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:5px!important; transform:none; } .page-head .head-actions button:hover, .page-head .head-actions .primary:hover, .page-head .head-actions .ghost:hover{ transform:translateY(-1px)!important; } .page-head .head-actions button:active, .page-head .head-actions .primary:active, .page-head .head-actions .ghost:active{ transform:translateY(0)!important; } @media(max-width:720px){ .page-head .head-actions{ width:100%!important; justify-content:flex-start!important; overflow-x:auto!important; flex-wrap:nowrap!important; padding-bottom:2px!important; } .page-head .head-actions button, .page-head .head-actions .primary, .page-head .head-actions .ghost, .page-head .head-actions .mini, .page-head .head-actions .button{ height:32px!important; min-height:32px!important; padding:0 10px!important; font-size:10.5px!important; flex:0 0 auto!important; } } /* ===== v0.7.0 completion UI ===== */ .login-v2{grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);overflow:hidden;position:relative}.login-v2:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 20%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 32rem),radial-gradient(circle at 80% 80%,#22d3ee18,transparent 28rem)}.login-v2 .login-art{position:relative;z-index:1;padding:clamp(36px,6vw,88px);justify-content:space-between}.login-brand{display:flex;align-items:center;gap:12px}.login-brand span{display:block;color:var(--muted);font-size:11px;margin-top:2px}.login-copy{max-width:720px}.login-pill{display:inline-flex;padding:7px 11px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:999px;font-size:11px;font-weight:800}.login-v2 .login-art h1{font-size:clamp(42px,5vw,72px);line-height:.98;letter-spacing:-4px;margin:22px 0}.login-v2 .login-art p{font-size:16px;max-width:620px}.login-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px;max-width:650px}.login-feature-grid>div{display:grid;grid-template-columns:34px 1fr;gap:2px 8px;align-items:center;padding:13px 14px;border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--panel) 58%,transparent);backdrop-filter:blur(12px)}.login-feature-grid>div:first-child{grid-row:span 2}.login-feature-grid b{font-size:12px}.login-feature-grid span{font-size:10px;color:var(--muted)}.login-footer{font-size:10px;color:var(--muted)}.login-v2 .login-panel{position:relative;z-index:2;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,transparent),color-mix(in srgb,var(--panel) 78%,transparent));border-left:1px solid var(--line)}.login-card-v2{width:min(440px,100%);padding:34px;border-radius:26px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 96%,transparent),color-mix(in srgb,var(--panel2) 92%,transparent));box-shadow:0 30px 90px #0007}.login-card-icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-size:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 25%,transparent),#22d3ee18);border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line))}.login-kicker{margin-top:22px;color:#9c91ff;text-transform:uppercase;font-size:10px;letter-spacing:1px;font-weight:800}.login-card-v2 h2{margin:7px 0 5px;font-size:30px}.login-field{display:block;margin-top:16px}.login-field>span{display:block;margin-bottom:7px;color:var(--muted);font-size:11px;font-weight:700}.input-icon{position:relative;display:flex;align-items:center}.input-icon>input{padding-left:42px!important;padding-right:60px!important}.input-icon>span,.input-icon{font-size:15px}.input-icon>:first-child:not(input){position:absolute;left:14px;z-index:2}.password-toggle{position:absolute;right:7px;border:0;background:transparent;color:var(--muted);font-size:10px;font-weight:800;padding:8px}.login-submit{width:100%;height:46px;margin-top:20px;display:flex;align-items:center;justify-content:center;gap:10px}.login-error{min-height:20px;margin-top:10px;color:var(--bad);font-size:11px}.login-help{padding-top:16px;margin-top:8px;border-top:1px solid var(--line);font-size:10px;color:var(--muted);text-align:center} .dashboard-custom-grid{grid-template-columns:repeat(12,minmax(0,1fr))!important}.dashboard-custom-grid>.widget-size-small{grid-column:span 3}.dashboard-custom-grid>.widget-size-medium{grid-column:span 4}.dashboard-custom-grid>.widget-size-large{grid-column:span 6}.dashboard-custom-grid .metric{height:100%}.dashboard-builder{display:grid;gap:8px}.dashboard-builder-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);cursor:grab}.dashboard-builder-row:active{cursor:grabbing}.drag-handle{color:var(--muted);letter-spacing:-3px}.dashboard-builder-row .widget-size{width:120px;min-height:34px!important;height:34px!important;padding:4px 8px!important} .calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}.calendar-toolbar h3{margin:0;text-align:center}.segmented{display:inline-flex;align-items:center;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--panel2)}.segmented button{border:0;background:transparent;color:var(--muted);padding:7px 10px;border-radius:8px;font-size:11px;font-weight:700}.segmented button.active{background:var(--accent);color:white}.calendar-filters{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line)}.calendar-filters select{width:auto;min-width:150px;height:36px!important;min-height:36px!important}.calendar-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.cal-weekday{padding:9px;text-align:center;font-size:10px;color:var(--muted);font-weight:800;border-bottom:1px solid var(--line)}.cal-day{min-height:125px;padding:7px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:.15s}.cal-day:hover,.cal-slot:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}.muted-day{opacity:.42}.cal-date{font-size:11px;font-weight:800;margin-bottom:5px}.cal-event{width:100%;border:0;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 13%,var(--panel2));color:var(--text);text-align:left;padding:5px 6px;border-radius:6px;margin:2px 0;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cal-event.completed{border-color:var(--good)}.cal-event.canceled,.cal-event.no_show{border-color:var(--bad);opacity:.65}.calendar-time-grid{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));overflow:auto}.calendar-time-grid.day{grid-template-columns:minmax(300px,1fr)}.cal-column{border-right:1px solid var(--line)}.cal-column-head{position:sticky;top:0;background:var(--panel);z-index:2;padding:10px;text-align:center;font-weight:800;border-bottom:1px solid var(--line)}.cal-slot{min-height:62px;padding:5px;border-bottom:1px solid var(--line);position:relative}.cal-slot>span{display:block;font-size:9px;color:var(--muted);margin-bottom:3px} .notification-tabs{margin-bottom:12px}.notification-row{display:flex;align-items:flex-start;gap:11px;padding:12px;border-bottom:1px solid var(--line)}.notification-row.read{opacity:.58}.notif-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:5px}.notif-dot.warning{background:var(--warn)}.notif-dot.error{background:var(--bad)} .analytics-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:13px}.analytics-controls input{width:auto;min-height:36px!important;height:36px!important}.analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.mini-chart{display:grid;gap:9px}.mini-bar-row{display:grid;grid-template-columns:110px 1fr 90px;gap:9px;align-items:center}.mini-bar-row>span{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-bar-row>div{height:8px;border-radius:99px;background:var(--panel3);overflow:hidden}.mini-bar-row i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2))}.mini-bar-row>b{text-align:right;font-size:10px}.stats-list{display:grid;gap:8px}.stats-list>div{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:9px;background:var(--panel2)} .plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.plan-card{min-height:170px}.plan-price{font-size:27px;font-weight:800;margin:14px 0}.plan-price small{font-size:10px;color:var(--muted);font-weight:500}.admin-tabs{margin-bottom:14px;overflow-x:auto}.button.mini{display:inline-flex;text-decoration:none;align-items:center;justify-content:center} @media(max-width:1050px){.login-v2{grid-template-columns:1fr}.login-v2 .login-art{display:none}.login-v2 .login-panel{min-height:100vh;border-left:0}.dashboard-custom-grid>.widget-size-small,.dashboard-custom-grid>.widget-size-medium{grid-column:span 6}.dashboard-custom-grid>.widget-size-large{grid-column:span 12}.analytics-grid{grid-template-columns:1fr}.plan-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:700px){.calendar-toolbar{align-items:stretch;flex-direction:column}.calendar-time-grid{grid-template-columns:repeat(7,minmax(130px,1fr))}.calendar-month{min-width:720px}.calendar-month{overflow:visible}.card:has(.calendar-month){overflow:auto}.dashboard-custom-grid>.widget-size-small,.dashboard-custom-grid>.widget-size-medium,.dashboard-custom-grid>.widget-size-large{grid-column:span 12}.plan-grid{grid-template-columns:1fr}.mini-bar-row{grid-template-columns:82px 1fr 70px}.dashboard-builder-row{flex-wrap:wrap}.dashboard-builder-row .widget-size{margin-left:auto}.login-card-v2{padding:24px}} /* v0.7.0 remaining completion */ .schedule-grid{display:grid;gap:8px}.schedule-row{display:grid;grid-template-columns:160px 1fr auto 1fr;gap:9px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:11px;background:var(--panel2)}.schedule-row input[type=time]{min-height:36px!important;height:36px!important}.kanban .lead-card .link{display:block;text-align:left;margin-bottom:4px}.text-bad{color:var(--bad)!important} @media(max-width:650px){.schedule-row{grid-template-columns:1fr 1fr}.schedule-row>span{display:none}.schedule-row label{grid-column:1/-1}} /* v0.7.2 simplified everyday workflow */ .quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px} .quick-action{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:1px 10px;align-items:center;text-align:left;padding:12px 14px!important;min-height:66px!important;background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:14px!important;color:var(--text)!important;box-shadow:none!important} .quick-action>span{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,var(--panel2));font-size:17px} .quick-action b{font-size:13px;line-height:1.2}.quick-action small{font-size:10px;color:var(--muted);font-weight:500;line-height:1.25} .quick-action:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line))!important;background:color-mix(in srgb,var(--accent) 4%,var(--panel))!important;transform:translateY(-1px)!important} .simple-flow{display:grid;gap:14px}.flow-step{display:flex;align-items:center;gap:10px;margin-top:2px;padding-top:4px}.flow-step>span{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 15%,var(--panel2));color:var(--accent);font-size:12px;font-weight:900}.flow-step div{display:grid;gap:1px}.flow-step b{font-size:13px}.flow-step small{color:var(--muted);font-size:10px}.simple-grid{gap:10px!important}.quick-activate{margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)} .advanced-box{border-top:1px solid var(--line);padding-top:11px;margin-top:2px}.advanced-box summary{cursor:pointer;color:var(--muted);font-size:11px;font-weight:700;list-style:none}.advanced-box summary::-webkit-details-marker{display:none}.advanced-box summary:before{content:'＋ ';color:var(--accent)}.advanced-box[open] summary:before{content:'− '}.advanced-box .form-grid{margin-top:11px}.simple-notice{margin-bottom:12px;font-size:11px;padding:10px 12px!important} @media(max-width:900px){.quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.quick-actions{grid-template-columns:1fr}.quick-action{min-height:58px!important}.simple-grid{grid-template-columns:1fr!important}} /* ============================================================ v0.8.0 UI refinement — visual only, features preserved ============================================================ */ :root{ --bg:#070a12; --sidebar:#0b101c; --panel:#101725; --panel2:#151e2f; --panel3:#1a2639; --text:#f8fbff; --muted:#91a0b7; --line:#223047; --accent:#7567ff; --accent2:#36c5f0; --good:#31d7a5; --warn:#f5bd57; --bad:#ff657c; --shadow:0 18px 60px rgba(0,0,0,.28); --radius:18px; } body.light{ --bg:#f5f7fb;--sidebar:#ffffff;--panel:#ffffff;--panel2:#f7f9fc;--panel3:#eef2f8; --text:#111827;--muted:#6b7689;--line:#e2e8f0;--shadow:0 16px 45px rgba(27,39,67,.08) } *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 45%,#607089) transparent} *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 42%,#64748b);border-radius:999px;border:2px solid transparent;background-clip:padding-box} body{background:radial-gradient(800px 460px at 15% -10%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),var(--bg)!important} .shell{grid-template-columns:250px minmax(0,1fr)!important} .side{padding:18px 12px!important;background:color-mix(in srgb,var(--sidebar) 96%,transparent)!important;box-shadow:8px 0 30px rgba(0,0,0,.08)} .brand-wrap{padding:6px 9px 16px!important}.logo{border-radius:13px!important}.brand{font-size:17px!important} .nav{padding-right:0!important}.nav-label{padding:18px 10px 7px!important;color:#71809a!important} .nav button{min-height:42px!important;padding:9px 10px!important;border-radius:11px!important;margin:2px 0!important} .nav button:hover{transform:translateX(2px);background:color-mix(in srgb,var(--accent) 6%,var(--panel2))!important} .nav button.active{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 17%,var(--panel2)),color-mix(in srgb,var(--accent2) 5%,var(--panel2)))!important;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line))!important;box-shadow:none!important} .side-foot{border-radius:12px!important;background:color-mix(in srgb,var(--panel) 94%,transparent)!important} .topbar{height:64px!important;padding:0 24px!important;background:color-mix(in srgb,var(--bg) 90%,transparent)!important} .search{width:min(560px,50vw)!important}.search input{height:40px!important;min-height:40px!important;border-radius:12px!important;background:var(--panel)!important} .content{padding:24px!important;max-width:1560px!important}.page-head{margin-bottom:18px!important;align-items:center!important}.page-head h1{font-size:28px!important;letter-spacing:-.85px!important}.eyebrow{font-size:10px!important;letter-spacing:1px!important} .card{border-radius:16px!important;background:var(--panel)!important;box-shadow:0 8px 28px rgba(0,0,0,.10)!important;border-color:color-mix(in srgb,var(--line) 92%,transparent)!important}.card:hover{border-color:color-mix(in srgb,var(--accent) 18%,var(--line))!important} .card-head{padding:16px 17px 0!important}.card-body{padding:15px 17px!important} .metric{padding:16px!important}.metric-value{font-size:24px!important}.metric-label{font-size:11px!important}.metrics{gap:12px!important}.dashboard-grid,.split{gap:12px!important} button,.button,.primary,.ghost,.mini,.icon-btn{font-weight:700;letter-spacing:-.01em} .primary{border-radius:10px!important;padding:9px 13px!important;min-height:38px!important;box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 18%,transparent)!important} .primary:hover{transform:translateY(-1px)!important}.ghost,.mini,.icon-btn,.button{border-radius:10px!important}.mini{min-height:32px!important;padding:6px 9px!important} .icon-btn{width:36px!important;height:36px!important} input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),textarea{min-height:42px!important;padding:9px 11px!important;border-radius:10px!important;background:var(--panel2)!important;border:1px solid var(--line)!important;color:var(--text)!important} textarea{min-height:104px!important;line-height:1.5} input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)} input:focus,textarea:focus{border-color:color-mix(in srgb,var(--accent) 80%,white)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)!important} input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:19px!important;height:19px!important;border:1.5px solid #526079!important;border-radius:6px!important;background:var(--panel2)!important;display:inline-grid!important;place-content:center!important;vertical-align:middle!important} input[type="checkbox"]::before{content:"✓";font-size:12px;font-weight:900;color:white;transform:scale(0);transition:transform .13s ease} input[type="checkbox"]:checked{background:linear-gradient(135deg,var(--accent),var(--accent2))!important;border-color:transparent!important} input[type="checkbox"]:checked::before{transform:scale(1)} input[type="radio"]{accent-color:var(--accent);width:17px;height:17px} .toolbar,.table-toolbar,.calendar-filters,.analytics-controls{align-items:center!important;gap:8px!important}.toolbar{padding:11px 13px!important}.toolbar input,.toolbar .bt-select,.toolbar button{height:36px!important;min-height:36px!important}.toolbar input{max-width:320px} .table-card{border-radius:16px!important}.table-wrap{border-radius:0 0 16px 16px!important}th{padding:11px 14px!important;font-size:9px!important;letter-spacing:.75px!important}td{padding:12px 14px!important}tbody tr:hover{background:color-mix(in srgb,var(--accent) 4%,var(--panel2))!important} .row-actions{display:flex;align-items:center;gap:5px;flex-wrap:nowrap} .modal-bg{backdrop-filter:blur(8px)!important;background:rgba(3,6,13,.72)!important}.modal{border-radius:18px!important;padding:18px!important;background:var(--panel)!important;border-color:color-mix(in srgb,var(--line) 90%,transparent)!important}.modal-title{margin-bottom:15px!important}.modal-title h2{font-size:20px!important}.actions{gap:8px!important} .settings-tabs,.segmented{gap:3px}.settings-tabs button,.segmented button{border-radius:8px!important} .notice,.announce{border-radius:11px!important}.badge{border-radius:999px!important;padding:4px 7px!important}.toast{border-radius:12px!important} /* Custom dropdowns */ .bt-select{position:relative;width:100%;min-width:0}.bt-select-native{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;inset:auto auto 0 0!important} .bt-select-trigger{width:100%;height:42px;min-height:42px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);padding:0 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;font-size:12px;font-weight:600;box-shadow:none;transition:border-color .15s,box-shadow .15s,background .15s} .bt-select-trigger:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));background:color-mix(in srgb,var(--accent) 3%,var(--panel2))}.bt-select.open .bt-select-trigger{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 11%,transparent)}.bt-select.disabled{opacity:.55;pointer-events:none}.bt-select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.bt-select-arrow{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;color:var(--muted);font-size:16px;line-height:1;transition:transform .15s}.bt-select.open .bt-select-arrow{transform:rotate(180deg);color:var(--accent)} .bt-select-popover{position:fixed;z-index:9999;padding:6px;background:color-mix(in srgb,var(--panel) 98%,transparent);border:1px solid color-mix(in srgb,var(--line) 92%,transparent);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.34);backdrop-filter:blur(16px);animation:btSelectIn .14s ease-out}.bt-select-options{max-height:240px;overflow:auto;overscroll-behavior:contain;display:grid;gap:2px}.bt-select-option{width:100%;min-height:36px;border:0;border-radius:8px;background:transparent;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 9px;text-align:left;font-size:12px;font-weight:600}.bt-select-option:hover{background:color-mix(in srgb,var(--accent) 9%,var(--panel2))}.bt-select-option.selected{background:color-mix(in srgb,var(--accent) 14%,var(--panel2));color:color-mix(in srgb,var(--text) 86%,var(--accent2))}.bt-select-option b{color:var(--accent);font-size:13px}.bt-select-option:disabled{opacity:.4;pointer-events:none}.bt-select-search{display:flex;align-items:center;gap:7px;padding:5px 5px 7px}.bt-select-search input{min-height:34px!important;height:34px!important;font-size:11px!important}.bt-select-empty{padding:16px 10px;text-align:center;color:var(--muted);font-size:11px} .toolbar .bt-select{width:auto;min-width:140px}.toolbar .bt-select-trigger{height:36px;min-height:36px}.calendar-filters .bt-select,.analytics-controls .bt-select{width:auto;min-width:150px}.calendar-filters .bt-select-trigger,.analytics-controls .bt-select-trigger{height:36px;min-height:36px}.dashboard-builder-row .bt-select{width:120px;margin-left:auto}.dashboard-builder-row .bt-select-trigger{height:34px;min-height:34px} @keyframes btSelectIn{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}} /* Single-panel login */ .login-single{min-height:100vh;position:relative;display:grid!important;place-items:center;overflow:hidden;padding:28px;background:radial-gradient(700px 500px at 20% 10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 60%),radial-gradient(600px 460px at 85% 85%,rgba(54,197,240,.10),transparent 62%),var(--bg)!important} .login-single:before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--line) 28%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 28%,transparent) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 72%);pointer-events:none}.login-orb{position:absolute;border-radius:999px;filter:blur(10px);pointer-events:none}.login-orb-a{width:260px;height:260px;left:-90px;top:-60px;background:color-mix(in srgb,var(--accent) 12%,transparent)}.login-orb-b{width:220px;height:220px;right:-70px;bottom:-70px;background:rgba(54,197,240,.08)} .login-shell{position:relative;z-index:2;width:min(440px,100%)}.login-brand-single{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:18px}.login-brand-single .logo{width:42px;height:42px}.login-brand-single .brand{font-size:18px}.login-brand-single span{display:block;font-size:10px;color:var(--muted);margin-top:1px}.login-card-single{width:100%!important;padding:30px!important;border-radius:20px!important;background:color-mix(in srgb,var(--panel) 96%,transparent)!important;border:1px solid color-mix(in srgb,var(--line) 90%,transparent)!important;box-shadow:0 28px 90px rgba(0,0,0,.34)!important;backdrop-filter:blur(18px)}.login-lock{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;font-size:21px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,transparent),rgba(54,197,240,.10));border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line))}.login-card-single .login-kicker{margin:0 0 4px!important;color:#9c91ff!important;font-size:10px!important}.login-card-single h1{margin:0;font-size:27px;letter-spacing:-1px;line-height:1.15}.login-subtitle{font-size:12px;line-height:1.55;margin:8px 0 4px}.login-field{margin-top:15px!important}.login-field>span{font-size:10px!important;margin-bottom:6px!important}.input-icon{position:relative}.input-icon>span{position:absolute!important;left:12px!important;top:50%!important;transform:translateY(-50%);z-index:2;font-size:14px}.input-icon>input{height:44px!important;padding-left:38px!important;padding-right:58px!important;border-radius:11px!important}.password-toggle{right:6px!important;top:50%;transform:translateY(-50%);font-size:10px!important;border-radius:8px!important;min-height:30px!important}.login-submit{height:44px!important;margin-top:18px!important;border-radius:11px!important;display:flex!important;align-items:center;justify-content:center;gap:10px}.login-submit b{font-size:16px}.login-spinner{display:inline-block;animation:spin .7s linear infinite}.login-error{min-height:18px;margin-top:8px!important;font-size:10px!important}.login-divider{display:flex;align-items:center;gap:10px;margin:8px 0 12px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.7px}.login-divider:before,.login-divider:after{content:"";height:1px;background:var(--line);flex:1}.login-mini-features{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.login-mini-features span{padding:7px 9px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);font-size:10px;color:var(--muted)}.login-help{margin-top:14px!important;padding-top:12px!important;font-size:9px!important}.login-v2 .login-art,.login-v2 .login-panel{display:none!important}@keyframes spin{to{transform:rotate(360deg)}} @media(max-width:900px){.shell{grid-template-columns:1fr!important}.content{padding:18px!important}.topbar{padding:0 14px!important}.search{width:calc(100vw - 128px)!important}.side{width:252px!important}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}.form-grid{grid-template-columns:1fr!important}.toolbar{flex-wrap:wrap}.toolbar input{max-width:none;min-width:180px}} @media(max-width:560px){.login-single{padding:18px}.login-card-single{padding:23px!important}.login-card-single h1{font-size:24px}.login-mini-features{grid-template-columns:1fr 1fr}.content{padding:13px!important}.page-head{align-items:flex-start!important;flex-direction:column!important}.metrics{grid-template-columns:1fr!important}.quick-actions{grid-template-columns:1fr!important}.row-actions{flex-wrap:wrap}.bt-select-popover{max-width:calc(100vw - 16px)}.toolbar>*{width:100%!important}.toolbar .bt-select{width:100%!important}.calendar-filters{flex-wrap:wrap}.calendar-filters .bt-select{width:100%!important}} /* v0.8.1 performance + centered login */ html,body,#app{min-height:100%;} /* Reduce GPU-heavy effects that can make local/Linux browsers feel sluggish. */ .side,.topbar,.login-center-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .modal-bg{backdrop-filter:blur(2px)!important;-webkit-backdrop-filter:blur(2px)!important} .card{animation:none!important} .bt-select-popover{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .login.login-centered{ min-height:100dvh!important; width:100%!important; display:flex!important; align-items:center!important; justify-content:center!important; position:relative!important; overflow:hidden!important; padding:24px!important; background: radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 32rem), radial-gradient(circle at 85% 88%,rgba(53,167,255,.11),transparent 30rem), var(--bg)!important; } .login-bg-shape{position:absolute;border-radius:999px;pointer-events:none;opacity:.55} .login-bg-a{width:260px;height:260px;left:-90px;top:-90px;background:color-mix(in srgb,var(--accent) 16%,transparent)} .login-bg-b{width:220px;height:220px;right:-75px;bottom:-75px;background:rgba(53,167,255,.10)} .login-center-wrap{ position:relative!important; z-index:2!important; width:min(420px,100%)!important; margin:auto!important; display:block!important; } .login-center-card{ width:100%!important; margin:0!important; padding:30px!important; border-radius:20px!important; border:1px solid var(--line)!important; background:var(--panel)!important; box-shadow:0 24px 70px rgba(0,0,0,.28)!important; text-align:left!important; } .login-mark{ width:48px;height:48px;border-radius:14px;display:grid;place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff; box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 28%,transparent);margin-bottom:12px } .login-mark svg{width:23px;height:23px} .login-brand-title{font-size:15px;font-weight:850;letter-spacing:-.2px;margin-bottom:20px} .login-center-card .login-kicker{margin:0 0 5px!important;color:#9c91ff!important;font-size:10px!important;text-transform:uppercase;letter-spacing:.9px;font-weight:800} .login-center-card h1{margin:0!important;font-size:29px!important;letter-spacing:-1.1px!important;line-height:1.1!important} .login-center-card .login-subtitle{font-size:12px!important;line-height:1.55!important;margin:8px 0 18px!important} .login-center-card .login-field{display:block!important;margin-top:13px!important} .login-center-card .login-field>span{display:block!important;margin-bottom:6px!important;font-size:10px!important;font-weight:750!important;color:var(--muted)!important} .login-center-card .input-icon{position:relative!important;display:flex!important;align-items:center!important} .login-center-card .input-icon>span{position:absolute!important;left:12px!important;top:50%!important;transform:translateY(-50%)!important;z-index:2!important;font-size:14px!important} .login-center-card .input-icon>input{height:44px!important;padding-left:38px!important;padding-right:58px!important;border-radius:11px!important} .login-center-card .password-toggle{position:absolute!important;right:6px!important;top:50%!important;transform:translateY(-50%)!important;border:0!important;background:transparent!important;color:var(--muted)!important;font-size:10px!important;font-weight:800!important;padding:7px!important;min-height:28px!important} .login-center-card .login-submit{width:100%!important;height:44px!important;margin-top:18px!important;border-radius:11px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important} .login-center-card .login-error{min-height:18px!important;margin-top:8px!important;font-size:10px!important;color:var(--bad)!important} .login-center-card .login-help{margin-top:14px!important;padding-top:12px!important;border-top:1px solid var(--line)!important;text-align:center!important;font-size:9px!important;color:var(--muted)!important} @media(max-width:560px){.login.login-centered{padding:16px!important}.login-center-card{padding:24px!important}.login-center-card h1{font-size:26px!important}} /* v0.8.2 simplified clients + real revenue chart */ .revenue-card{min-width:0} .revenue-head{align-items:flex-start;gap:14px;flex-wrap:wrap} .revenue-range{margin-left:auto;flex-wrap:wrap} .revenue-range button{min-width:auto!important;padding:7px 10px!important;font-size:11px!important;line-height:1!important} .revenue-chart-wrap{width:100%;overflow:hidden;min-height:260px;display:flex;align-items:center} .revenue-line-chart{width:100%;height:auto;min-height:240px;overflow:visible} .rev-grid{stroke:var(--line);stroke-width:1;opacity:.72} .rev-axis{fill:var(--muted);font-size:11px;font-weight:600} .rev-area{pointer-events:none} .rev-line{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 5px 9px color-mix(in srgb,var(--accent) 22%,transparent))} .rev-point circle{fill:var(--panel);stroke:var(--accent);stroke-width:4;transition:r .16s ease,fill .16s ease} .rev-point:hover circle{r:7;fill:var(--accent)} .renewals-strip{margin-bottom:16px} .renewal-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;padding:0 18px 18px} .renewal-card{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:12px 13px!important;min-height:64px!important;border:1px solid var(--line)!important;border-radius:14px!important;background:var(--panel2)!important;color:var(--text)!important;box-shadow:none!important} .renewal-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))!important;background:color-mix(in srgb,var(--accent) 6%,var(--panel2))!important;transform:translateY(-1px)} .renewal-card>span{display:grid;gap:4px;min-width:0}.renewal-card>span:last-child{justify-items:end}.renewal-card b,.renewal-card small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.renewal-card small{color:var(--muted);font-size:11px} @media(max-width:700px){.revenue-range{width:100%;margin-left:0}.revenue-range button{flex:1}.revenue-chart-wrap{min-height:210px}.revenue-line-chart{min-height:200px}.renewal-cards{grid-template-columns:1fr}} .renewal-dashboard-row{width:100%;border:0!important;background:transparent!important;color:inherit!important;text-align:left!important;box-shadow:none!important;min-height:0!important;border-radius:12px!important} .renewal-dashboard-row:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)!important;transform:none!important} /* v0.9.0 simplification */ .notif-count{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg)} .top-actions .icon-btn{position:relative}.finance-actions,.settings-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tool-link{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:14px;padding:14px}.tool-link>b{font-size:12px}.tool-link>span{grid-column:2;font-size:10px;color:var(--muted);font-weight:500}.tool-link:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));transform:translateY(-1px)} .module-list{display:grid;gap:10px}.module-row{display:flex!important;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:var(--panel2)}.module-row span{display:grid;gap:3px}.module-row small{color:var(--muted);font-size:10px}.module-row input{margin:0!important} .forced-password{z-index:12000}.admin-tabs{overflow-x:auto;white-space:nowrap}.simple-flow .advanced-box{margin-top:14px}.simple-grid{align-items:end}.quick-actions{grid-template-columns:repeat(4,minmax(0,1fr))}.row-actions{justify-content:flex-end}.head-actions{align-self:center} @media(max-width:900px){.finance-actions,.settings-tools{grid-template-columns:1fr}.quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.quick-actions{grid-template-columns:1fr}.head-actions{width:auto!important}.head-actions .primary,.head-actions .ghost,.head-actions .button{width:auto!important}.table-wrap td .row-actions{justify-content:flex-start}.finance-actions,.settings-tools{grid-template-columns:1fr}} /* v0.9.1 frontend completion */ .notification-bell{position:relative}.bell-count{position:absolute;right:-3px;top:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ef4444;color:white;font-size:10px;font-weight:900;display:grid;place-items:center;border:2px solid var(--bg)} .admin-tabs,.finance-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px;padding:5px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.admin-tabs button,.finance-tabs button{min-height:36px;padding:7px 12px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:12px;font-weight:800}.admin-tabs button.active,.finance-tabs button.active{background:color-mix(in srgb,var(--accent) 16%,var(--panel2));color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)} .module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.module-toggle{display:flex!important;align-items:center;justify-content:space-between;gap:15px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)}.module-toggle>span{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center}.module-toggle b{font-size:13px}.module-toggle small{grid-column:2;color:var(--muted);margin-top:3px}.module-toggle input{flex:none} .data-record-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.data-record-card{min-height:96px!important;padding:16px!important;border:1px solid var(--line)!important;border-radius:16px!important;background:var(--panel2)!important;color:var(--text)!important;text-align:left!important;display:grid!important;grid-template-columns:32px 1fr!important;column-gap:10px!important;align-content:center!important}.data-record-card>b{font-size:13px}.data-record-card>small{grid-column:2;color:var(--muted);font-weight:500}.data-record-card:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))!important;transform:translateY(-2px)!important} .page-subactions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.extension-buttons{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 14px}.admin-log-list{max-height:520px;overflow:auto}.force-password{z-index:9999}.force-password .modal{pointer-events:auto}.force-password:before{content:'';position:absolute;inset:0} @media(max-width:900px){.module-grid{grid-template-columns:1fr}.data-record-grid{grid-template-columns:1fr}.admin-tabs,.finance-tabs{overflow-x:auto;flex-wrap:nowrap}.admin-tabs button,.finance-tabs button{white-space:nowrap}} /* ===== v0.9.2 discoverability / navigation ===== */ .section-nav{ display:flex;align-items:center;gap:6px;margin:0 0 18px;padding:6px; border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--panel) 92%,transparent); overflow-x:auto;scrollbar-width:none } .section-nav::-webkit-scrollbar{display:none} .section-nav button,.section-nav a{ appearance:none;border:0;background:transparent;color:var(--muted);text-decoration:none; min-height:38px;padding:8px 12px;border-radius:10px;display:inline-flex;align-items:center; gap:7px;white-space:nowrap;font:inherit;font-size:12px;font-weight:750;cursor:pointer } .section-nav button:hover,.section-nav a:hover{background:var(--panel2);color:var(--text)} .section-nav .active{background:color-mix(in srgb,var(--accent) 15%,var(--panel2));color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)} .section-nav small{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:10px} .quick-actions-strip{ display:flex;gap:8px;margin:-4px 0 18px;overflow-x:auto;padding:2px 1px 5px;scrollbar-width:none } .quick-actions-strip::-webkit-scrollbar{display:none} .quick-actions-strip button{ border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:13px; min-height:44px;padding:8px 13px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer } .quick-actions-strip button:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--panel2));transform:translateY(-1px)} .quick-actions-strip span{font-size:16px}.quick-actions-strip b{font-size:12px} .breadcrumbs{display:flex;align-items:center;gap:7px;margin:0 0 8px;color:var(--muted);font-size:11px} .breadcrumbs button{border:0;background:transparent;color:var(--muted);padding:0;min-height:auto;font:inherit;cursor:pointer} .breadcrumbs button:hover{color:var(--accent)}.breadcrumbs b{opacity:.45}.breadcrumbs span{color:var(--text);font-weight:650} .notification-drawer-wrap{position:fixed;inset:0;z-index:10050} .drawer-scrim{position:absolute;inset:0;background:rgba(3,7,18,.36)} .notification-drawer{ position:absolute;right:10px;top:10px;bottom:10px;width:min(430px,calc(100vw - 20px)); display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line); border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.35);overflow:hidden;animation:drawerIn .18s ease-out } @keyframes drawerIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:17px 18px;border-bottom:1px solid var(--line)} .drawer-head>div{display:flex;flex-direction:column;gap:2px}.drawer-head b{font-size:16px}.drawer-head small{color:var(--muted)} .drawer-body{flex:1;overflow:auto;padding:8px} .drawer-notification{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:13px} .drawer-notification:hover{background:var(--panel2)}.drawer-notification.read{opacity:.62} .drawer-notification p{margin:3px 0 5px;color:var(--muted);font-size:12px;line-height:1.42} .drawer-notification small{color:var(--muted);font-size:10px}.drawer-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--accent);flex:none} .drawer-foot{display:flex;gap:7px;padding:12px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel2) 55%,var(--panel))} .drawer-foot>*{flex:1}.drawer-loading{padding:28px;text-align:center;color:var(--muted)} .search{position:relative} .command-menu{ position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:10020;padding:7px; background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 65px rgba(0,0,0,.28); max-height:min(480px,70vh);overflow:auto } .command-menu.hidden{display:none} .command-title{padding:6px 9px 8px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px} .command-menu button{width:100%;border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:11px;text-align:left;padding:10px;border-radius:11px;cursor:pointer} .command-menu button:hover{background:var(--panel2)}.command-menu button>span{width:28px;height:28px;display:grid;place-items:center;background:var(--panel2);border-radius:9px} .command-menu button div{display:flex;flex-direction:column;gap:2px}.command-menu button b{font-size:12px}.command-menu button small{font-size:10px;color:var(--muted)} .top-quick{font-size:20px!important;font-weight:400!important} @media(max-width:700px){ .section-nav{margin-bottom:14px} .quick-actions-strip{margin-bottom:14px} .drawer-foot{flex-wrap:wrap}.drawer-foot>*{flex:1 1 30%} .command-menu{position:fixed;left:10px;right:10px;top:70px} } /* v0.9.3 audit completion */ .usage-list{display:grid;gap:14px}.usage-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(160px,2fr) 52px;gap:12px;align-items:center}.usage-row>div:first-child{display:flex;justify-content:space-between;gap:10px}.usage-row span,.usage-row small{color:var(--muted);font-size:12px}.usage-track{height:9px;border-radius:999px;background:var(--panel3);overflow:hidden}.usage-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s ease}.recipe-list,.bulk-renew-list{display:grid;gap:10px;max-height:52vh;overflow:auto;padding-right:3px}.recipe-row,.bulk-renew-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}.recipe-row input[type=number]{width:90px!important;min-width:90px}.bulk-renew-row small,.recipe-row small{display:block;color:var(--muted);margin-top:2px}.plan-usage-card{margin-top:14px}@media(max-width:700px){.usage-row{grid-template-columns:1fr}.usage-row>small{justify-self:end}.recipe-row{align-items:flex-start;flex-wrap:wrap}.recipe-row input[type=number]{margin-left:34px}} /* Stability: display configured business logo inside the existing logo slot. */ .logo img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit} /* v0.9.6 — temporary password modal interaction fix */ .force-password::before{ pointer-events:none !important; } .force-password .modal{ position:relative; z-index:1; pointer-events:auto !important; } .force-password input, .force-password button, .force-password label, .force-password .modal-scroll, .force-password .actions{ pointer-events:auto !important; } /* v0.9.7 — mobile-safe forced temporary-password screen */ .force-password{ position:fixed !important; inset:0 !important; z-index:2147483000 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important; overflow:auto !important; -webkit-overflow-scrolling:touch; touch-action:auto !important; pointer-events:auto !important; background:rgba(3,6,13,.88) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .force-password::before, .force-password::after{ display:none !important; content:none !important; pointer-events:none !important; } .force-password .modal{ position:relative !important; z-index:2147483001 !important; width:min(460px,100%) !important; max-width:100% !important; max-height:none !important; overflow:visible !important; margin:auto !important; transform:none !important; animation:none !important; pointer-events:auto !important; touch-action:auto !important; } .force-password .modal-scroll{ overflow:visible !important; max-height:none !important; pointer-events:auto !important; touch-action:auto !important; } .force-password label{ position:relative !important; z-index:2 !important; display:block !important; pointer-events:auto !important; touch-action:auto !important; } .force-password input{ position:relative !important; z-index:3 !important; display:block !important; width:100% !important; min-height:48px !important; font-size:16px !important; /* prevents iOS zoom/focus quirks */ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; touch-action:manipulation !important; -webkit-user-select:text !important; user-select:text !important; } .force-password button{ position:relative !important; z-index:3 !important; min-height:48px !important; pointer-events:auto !important; touch-action:manipulation !important; } @media(max-width:560px){ .force-password{ align-items:flex-start !important; padding-top:max(24px, env(safe-area-inset-top)) !important; } .force-password .modal{ width:100% !important; margin-top:auto !important; margin-bottom:auto !important; border-radius:18px !important; } } /* v0.9.8 — mobile-first usability/stability */ html,body{max-width:100%;overflow-x:hidden} .shell,.main,.content,#view,.card,.table-card,.form-grid,.split,.dashboard-grid{min-width:0;max-width:100%} .modal-save.saving{opacity:.72;cursor:wait} .modal-save:disabled{opacity:.72!important;transform:none!important} @media(max-width:700px){ body{overflow-x:hidden!important} .content{padding:12px!important;width:100%!important;max-width:100vw!important} .page-head{gap:10px!important;margin-bottom:12px!important} .page-head h1{font-size:24px!important;line-height:1.12!important} .page-head .muted{font-size:12px!important} .head-actions{width:100%!important;display:flex!important;gap:7px!important;flex-wrap:wrap!important;justify-content:flex-start!important} .head-actions>*{width:auto!important;max-width:100%!important} .card{width:100%!important;max-width:100%!important;border-radius:16px!important} .card-head,.card-body{padding-left:13px!important;padding-right:13px!important} .form-grid,.simple-grid,.profile-grid,.module-grid,.data-record-grid{grid-template-columns:minmax(0,1fr)!important;gap:11px!important} .form-grid>*,.simple-grid>*,.profile-grid>*{grid-column:1!important;min-width:0!important} input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea{ width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important; min-height:46px!important;font-size:16px!important } select{ appearance:auto!important;-webkit-appearance:menulist!important; background-image:none!important;padding-right:10px!important } .bt-select{display:none!important} select.bt-select-native{ position:static!important;opacity:1!important;pointer-events:auto!important; width:100%!important;height:46px!important;min-height:46px!important; padding:8px 10px!important;border:1px solid var(--line)!important;border-radius:12px!important; display:block!important } .modal-bg{padding:0!important;align-items:flex-end!important;display:flex!important;overflow:hidden!important} .modal{ width:100%!important;max-width:none!important;max-height:94dvh!important;margin:0!important; border-radius:20px 20px 0 0!important;padding:0!important;overflow:hidden!important; display:flex!important;flex-direction:column!important } .modal-title{padding:15px 15px 10px!important;margin:0!important;flex:0 0 auto} .modal-title h2{font-size:20px!important} .modal-scroll{padding:4px 15px 16px!important;overflow-y:auto!important;overflow-x:hidden!important;flex:1 1 auto!important;-webkit-overflow-scrolling:touch} .modal .actions{ position:sticky!important;bottom:0!important;z-index:5!important;flex:0 0 auto!important; display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important; margin:0!important;padding:10px 15px max(10px,env(safe-area-inset-bottom))!important; border-top:1px solid var(--line)!important;background:var(--panel)!important } .modal .actions button{width:100%!important;min-height:48px!important;font-size:14px!important} .advanced-box{margin-top:10px!important} .advanced-box summary{padding:12px!important;font-size:13px!important} .flow-step{margin:12px 0 8px!important} .flow-step>span{width:28px!important;height:28px!important} .flow-step small{display:none!important} .quick-activate{padding:9px 10px!important} .settings-tabs,.finance-tabs,.admin-tabs,.section-nav{ flex-wrap:wrap!important;overflow:visible!important;white-space:normal!important;gap:5px!important } .settings-tabs button,.finance-tabs button,.admin-tabs button,.section-nav button,.section-nav a{ flex:1 1 auto!important;min-width:0!important;white-space:normal!important;text-align:center!important } .toolbar{display:grid!important;grid-template-columns:1fr!important;gap:7px!important} .toolbar>*{width:100%!important;min-width:0!important} .table-wrap{overflow-x:visible!important;width:100%!important} table{width:100%!important;table-layout:fixed!important} th,td{white-space:normal!important;overflow-wrap:anywhere!important} .row-actions{display:flex!important;flex-wrap:wrap!important;gap:6px!important} .row-actions>*{flex:1 1 auto!important} .metrics{grid-template-columns:1fr!important} .metric{min-height:auto!important} .quick-grid,.quick-actions{grid-template-columns:1fr 1fr!important} .quick-action{min-width:0!important;padding:12px!important} .quick-action small{display:none!important} .notification-drawer{width:min(92vw,380px)!important} .toast{left:12px!important;right:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;width:auto!important} } @media(max-width:390px){ .quick-grid,.quick-actions{grid-template-columns:1fr!important} .modal .actions{grid-template-columns:1fr!important} } /* v0.9.9 — focused mobile cleanup */ .login-center-card .login-input-clean>input{ padding-left:14px!important; } .login-center-card .login-input-clean>span{ display:none!important; } .login-center-card .login-input-clean #loginPassword{ padding-right:70px!important; } .service-mobile-list{ display:grid; gap:12px; width:100%; min-width:0; } .service-mobile-card{ width:100%; min-width:0; padding:15px; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:0 8px 24px rgba(0,0,0,.06); overflow:hidden; } .service-mobile-head{ display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; } .service-mobile-head h3{ margin:0 0 3px; font-size:18px; line-height:1.2; overflow-wrap:anywhere; } .service-mobile-summary{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .service-mobile-summary>div{ min-width:0; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); } .service-mobile-summary span{ display:block; margin-bottom:3px; color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; } .service-mobile-summary b{ display:block; font-size:14px; overflow-wrap:anywhere; } .service-mobile-actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px!important; margin-top:12px; width:100%; } .service-mobile-actions>*{ width:100%!important; min-width:0!important; min-height:42px!important; } .service-mobile-actions>:last-child:nth-child(odd){ grid-column:1/-1; } .service-recurring-field[hidden], .service-duration-field[hidden]{ display:none!important; } @media(max-width:390px){ .service-mobile-summary{grid-template-columns:1fr} } /* v0.10.0 — simplified mobile workflow */ .client-common-actions, .finance-easy-actions{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:12px 0 16px; } .client-common-actions button, .finance-easy-actions button{ min-width:0; min-height:42px; } .settings-easy-nav{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 14px; } .settings-easy-nav button{ min-height:38px; padding:8px 11px; border:1px solid var(--line); border-radius:11px; background:var(--panel); color:var(--text); font-weight:750; } .settings-easy-nav button.active{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--panel)); } .simple-form-intro{ margin-bottom:12px; padding:10px 12px; border-radius:12px; background:color-mix(in srgb,var(--accent) 7%,var(--panel2)); color:var(--muted); font-size:12px; } .mobile-record-list{display:grid;gap:10px} .mobile-record-card{ width:100%;min-width:0;padding:13px;border:1px solid var(--line);border-radius:15px;background:var(--panel); } .mobile-record-head{display:flex;align-items:flex-start;gap:9px} .mobile-record-title{border:0;background:transparent;color:var(--text);text-align:left;padding:0;min-width:0} .mobile-record-title b{display:block;font-size:16px;overflow-wrap:anywhere} .mobile-record-title small{display:block;color:var(--muted);margin-top:2px;overflow-wrap:anywhere} .mobile-select{padding-top:2px} .mobile-record-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:11px} .mobile-record-grid>div{min-width:0;padding:8px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)} .mobile-record-grid span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:3px} .mobile-record-grid b{display:block;font-size:12px;overflow-wrap:anywhere} .mobile-record-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px} .mobile-record-actions button{width:100%!important;min-width:0!important;min-height:40px!important} .mobile-filter-card{display:grid;gap:8px;margin:0 0 10px;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--panel)} .mobile-filter-row{display:grid;grid-template-columns:1fr 1fr;gap:7px} .mobile-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 12px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--panel)} .mobile-mode-switch button{border:0;border-radius:9px;background:transparent;color:var(--muted);min-height:38px;font-weight:750} .mobile-mode-switch button.active{background:color-mix(in srgb,var(--accent) 12%,var(--panel2));color:var(--text)} .mobile-action-sheet{display:grid;gap:8px} @media(max-width:700px){ .client-common-actions,.finance-easy-actions{grid-template-columns:1fr 1fr} .client-common-actions button,.finance-easy-actions button{font-size:12px;padding:10px 8px} .settings-easy-nav{display:grid;grid-template-columns:1fr 1fr} .settings-easy-nav button{width:100%} .mobile-record-grid{grid-template-columns:1fr 1fr} .mobile-record-actions{grid-template-columns:repeat(2,minmax(0,1fr))} .mobile-record-actions>:last-child:nth-child(odd){grid-column:1/-1} .mobile-bulk-bar{position:sticky;top:64px;z-index:15;border-radius:12px;margin-bottom:10px} .appointment-simple-grid{grid-template-columns:1fr!important} .appointment-more .form-grid{grid-template-columns:1fr!important} /* Every ordinary table becomes a readable card instead of requiring horizontal scrolling. */ .table-card{background:transparent!important;border:0!important;box-shadow:none!important} .table-card .table-wrap{overflow:visible!important} .table-card table,.table-card tbody,.table-card tr,.table-card td{display:block!important;width:100%!important} .table-card thead{display:none!important} .table-card tbody{display:grid!important;gap:10px!important} .table-card tbody tr:not(.empty-row){ border:1px solid var(--line)!important;border-radius:14px!important;padding:9px!important;background:var(--panel)!important; } .table-card tbody td{ display:grid!important;grid-template-columns:minmax(82px,34%) minmax(0,1fr)!important;gap:10px!important; align-items:start!important;padding:8px!important;border:0!important;border-bottom:1px dashed color-mix(in srgb,var(--line) 72%,transparent)!important; white-space:normal!important;text-align:left!important;overflow-wrap:anywhere!important; } .table-card tbody td:last-child{border-bottom:0!important} .table-card tbody td::before{ content:attr(data-label);display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em; } .table-card tbody td[data-label=""]::before{display:none} .table-card tbody td[data-label=""]{grid-template-columns:1fr!important} .table-card .row-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important} .table-card .row-actions>*{width:100%!important;min-width:0!important} .table-card .empty-row td{display:block!important;border:0!important} .table-card .empty-row td::before{display:none!important} } @media(max-width:390px){ .client-common-actions,.finance-easy-actions,.settings-easy-nav{grid-template-columns:1fr} .mobile-record-grid,.mobile-filter-row{grid-template-columns:1fr} } /* v0.11.0 — client-centered workflow + mobile containment */ .client-easy-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 16px} .client-easy-actions button{min-width:0;min-height:44px} .renew-simple-summary{display:grid;gap:4px;padding:12px 14px;margin-bottom:12px;border:1px solid var(--line);border-radius:13px;background:var(--panel2)} .renew-simple-summary b{font-size:15px}.renew-simple-summary span,.renew-simple-summary small{color:var(--muted)} .easy-client-create .flow-step,.easy-sale-form .flow-step{margin-top:12px} @media(max-width:700px){ html,body,.shell,.main,.content,#view{width:100%!important;max-width:100vw!important;min-width:0!important;overflow-x:hidden!important} .main{overflow:hidden!important}.content{margin:0!important;padding:12px!important}#view>*{max-width:100%!important;min-width:0!important} .page-head{width:100%!important;max-width:100%!important;min-width:0!important}.page-head>div:first-child{min-width:0!important;max-width:100%!important} .page-head h1,.page-head .muted{max-width:100%!important;overflow-wrap:anywhere!important} .head-actions{width:100%!important;max-width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important} .head-actions>*{width:100%!important;min-width:0!important;max-width:100%!important} .client-easy-actions{grid-template-columns:1fr 1fr}.client-easy-actions button{width:100%!important} .card,.table-card,.table-wrap,table,tbody,tr,td,.empty{min-width:0!important;max-width:100%!important} .table-card .table-wrap{width:100%!important;margin:0!important}.table-card tbody tr,.table-wrap tr{width:100%!important;max-width:100%!important;margin:0!important} .table-card tbody{width:100%!important;max-width:100%!important}.table-card tbody td{width:100%!important;max-width:100%!important} .empty{width:100%!important;margin:0!important;padding:32px 12px!important;overflow-wrap:anywhere!important} .list-row{min-width:0!important;max-width:100%!important;flex-wrap:wrap!important}.list-row>.grow{min-width:0!important} .list-row .row-actions{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.list-row .row-actions>*{width:100%!important;min-width:0!important} .section-nav,.settings-tabs,.finance-tabs,.admin-tabs{max-width:100%!important} .topbar{width:100%!important;max-width:100vw!important;display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;gap:7px!important;padding:0 9px!important} .search{width:100%!important;min-width:0!important;max-width:100%!important}.search input{min-width:0!important}.top-actions{gap:5px!important} .top-actions .icon-btn,.mobile-menu{width:38px!important;height:38px!important} } @media(max-width:390px){.client-easy-actions,.head-actions{grid-template-columns:1fr!important}} /* ===== v0.12.0 usability / mobile / language pass ===== */ .mobile-more-wrap{position:relative;display:none}.mobile-more{display:none}.mobile-more-menu{position:absolute;right:0;top:46px;z-index:90;min-width:165px;padding:7px;border:1px solid var(--line);border-radius:13px;background:var(--panel);box-shadow:var(--shadow)}.mobile-more-menu button{width:100%;display:flex;align-items:center;gap:9px;border:0;background:transparent;color:var(--text);padding:10px;border-radius:9px;text-align:left}.mobile-more-menu button:hover{background:var(--panel2)}.mobile-more-menu svg{width:18px}.mobile-more-menu.hidden{display:none!important} .client-workspace{margin:12px 0 16px;padding:14px}.client-workspace-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.client-workspace-head>div:first-child{display:grid;gap:2px}.client-workspace-head small{color:var(--muted)}.workspace-balance{text-align:right}.workspace-balance span{display:block;font-size:10px;text-transform:uppercase;color:var(--muted);font-weight:800}.workspace-balance strong{font-size:19px}.client-workspace-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.workspace-action{min-width:0;min-height:58px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);display:flex;align-items:center;justify-content:flex-start;gap:9px;padding:10px;text-align:left}.workspace-action>span{display:grid;min-width:0}.workspace-action b{font-size:12px}.workspace-action small{font-size:10px;color:var(--muted);margin-top:2px;line-height:1.25}.workspace-action.primary{background:linear-gradient(135deg,var(--accent),#8b5cf6);color:white;border:0}.workspace-action.primary small{color:#fffbd}.client-action-guide{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;color:var(--muted);font-size:10px}.client-action-guide span{padding:6px 8px;border-radius:9px;background:var(--panel2);border:1px solid var(--line)} .renew-preview{display:flex;justify-content:space-between;gap:12px;margin-top:6px;padding-top:7px;border-top:1px dashed var(--line)}.renew-preview span{color:var(--muted)} .default-payment-setting{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,280px);gap:12px;align-items:center;padding:12px;margin-bottom:12px;border:1px solid var(--line);border-radius:13px;background:var(--panel2)}.default-payment-setting>div{display:grid;gap:3px}.default-payment-setting small{color:var(--muted)} .single-settings-nav{margin-bottom:14px} .empty{min-height:0!important;padding:24px 14px!important}.empty:before{font-size:21px!important;margin-bottom:6px!important}.empty-mini-icon{font-size:20px;margin-bottom:6px}.empty-action{display:block;margin:11px auto 0;width:max-content!important;max-width:100%} .confirmation-modal .actions{margin-top:16px} @media(max-width:700px){ .topbar{grid-template-columns:42px minmax(0,1fr) auto!important;gap:6px!important;padding:0 8px!important}.top-actions{gap:5px!important}.top-actions>#theme,.top-actions>#logout{display:none!important}.mobile-more-wrap,.mobile-more{display:block!important}.mobile-more{display:grid!important}.top-actions{display:grid!important;grid-template-columns:38px 38px!important}.top-actions .icon-btn{width:38px!important;height:38px!important} .search svg{display:none!important}.search input{padding-left:12px!important;padding-right:10px!important;font-size:14px!important}.search{min-width:0!important} .client-workspace{padding:11px!important}.client-workspace-actions{grid-template-columns:1fr 1fr!important}.workspace-action{min-height:60px!important}.client-action-guide{display:grid!important;grid-template-columns:1fr!important}.client-workspace-head{align-items:flex-start!important} .default-payment-setting{grid-template-columns:1fr!important}.single-settings-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}.single-settings-nav button{width:100%!important;white-space:normal!important;min-height:42px!important} .settings-easy-nav{display:none!important} .confirmation-bg{align-items:flex-end!important;padding:0!important}.confirmation-modal{width:100%!important;max-width:none!important;margin:0!important;border-radius:20px 20px 0 0!important;padding:18px 15px max(15px,env(safe-area-inset-bottom))!important;animation:none!important}.confirmation-modal .actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}.confirmation-modal .actions button{min-height:48px!important;width:100%!important} .empty{padding:18px 10px!important;margin:0!important}.empty:before{font-size:18px!important}.empty-action{min-height:42px!important} .list{gap:8px!important}.list-row{width:100%!important;max-width:100%!important;padding:10px!important;border:1px solid color-mix(in srgb,var(--line) 70%,transparent)!important;border-radius:11px!important;background:var(--panel2)!important;overflow:hidden!important}.list-row>.grow{flex:1 1 100%!important;width:100%!important}.list-row>.row-actions{width:100%!important}.list-row>button:not(.link),.list-row>a.button{max-width:100%!important} .data-record-grid,.permission-grid,.module-grid{grid-template-columns:1fr!important}.split,.dashboard-grid,.profile-grid{grid-template-columns:1fr!important} .page-subactions,.extension-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}.page-subactions>*{width:100%!important;min-width:0!important} .card-head{gap:8px!important;flex-wrap:wrap!important}.card-head>div:first-child{min-width:0!important}.card-head h3{overflow-wrap:anywhere!important}.card-head button{max-width:100%!important} } @media(max-width:390px){.client-workspace-actions,.single-settings-nav,.page-subactions,.extension-buttons,.confirmation-modal .actions{grid-template-columns:1fr!important}} /* ===== v0.12.1 mobile drawer scroll ownership fix ===== */ .side-backdrop{display:none} @media(max-width:850px){ html.bt-drawer-open, body.bt-drawer-open{ overflow:hidden!important; overscroll-behavior:none!important; touch-action:none!important; } .side{ position:fixed!important; top:0!important; bottom:auto!important; left:-285px!important; width:min(286px,86vw)!important; height:100vh!important; height:100dvh!important; max-height:100dvh!important; display:flex!important; flex-direction:column!important; padding: max(14px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important; overflow:hidden!important; overscroll-behavior:contain!important; z-index:120!important; transition:left .22s ease!important; touch-action:pan-y!important; -webkit-transform:translateZ(0); transform:translateZ(0); } .side.open{ left:0!important; box-shadow:30px 0 80px rgba(0,0,0,.55)!important; } .side .brand-wrap{ flex:0 0 auto!important; padding-top:4px!important; padding-bottom:14px!important; } .side .nav{ flex:1 1 auto!important; min-height:0!important; width:100%!important; overflow-y:auto!important; overflow-x:hidden!important; overscroll-behavior-y:contain!important; -webkit-overflow-scrolling:touch!important; touch-action:pan-y!important; padding-right:2px!important; padding-bottom:16px!important; scrollbar-width:none!important; } .side .nav::-webkit-scrollbar{ display:none!important; width:0!important; } .side .side-foot{ flex:0 0 auto!important; margin-top:8px!important; margin-bottom:0!important; position:relative!important; z-index:2!important; } .side-backdrop{ display:block!important; position:fixed!important; inset:0!important; width:100vw!important; height:100vh!important; height:100dvh!important; padding:0!important; margin:0!important; border:0!important; border-radius:0!important; background:rgba(0,0,0,.48)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; z-index:110!important; transition:opacity .18s ease,visibility .18s ease!important; touch-action:none!important; } .side-backdrop.show{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; } body.bt-drawer-open .main{ pointer-events:none!important; user-select:none!important; } body.bt-drawer-open .side, body.bt-drawer-open .side *{ pointer-events:auto!important; } body.bt-drawer-open .side-backdrop{ pointer-events:auto!important; } } /* ===== v0.13.0 polish / consistency ===== */ button,.button,.primary,.ghost,.mini{min-height:38px;line-height:1.15} .primary,.ghost,.button{display:inline-flex;align-items:center;justify-content:center;gap:7px} .head-actions,.page-subactions{align-items:center} .bt-bulk-bar{margin:0 0 12px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel)} .bt-bulk-bar.hidden{display:none!important}.bulk-row-check,.bulk-card-check input,.lead-select input,.btPaySelect,.btFieldSelect,.btAnnouncementSelect{width:18px!important;height:18px!important;min-height:18px!important;accent-color:var(--accent);flex:0 0 auto}.bulk-card-check,.lead-select{display:flex;align-items:center}.lead-select{position:absolute;right:10px;top:10px;z-index:2}.lead-card{position:relative;padding-top:36px}.service-mobile-head .bulk-card-check{padding-top:2px} .settings-group{border:1px solid var(--line);border-radius:14px;padding:14px;background:color-mix(in srgb,var(--panel2) 48%,transparent)} .settings-group-head{margin-bottom:12px}.settings-group-head h3{margin:0 0 3px;font-size:14px}.settings-group-head p{margin:0;color:var(--muted);font-size:11px}.settings-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.settings-group-grid>label{min-width:0}.settings-group-grid label:has([name="business_address"]){grid-column:1/-1}.settings-group small{display:block;color:var(--muted);font-size:10px;margin-top:5px;line-height:1.35} #settingsForm{align-items:start}.single-settings-nav{flex-wrap:wrap!important;overflow:visible!important}.single-settings-nav button{white-space:normal} .finance-easy-actions{max-width:540px;grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-bottom:14px}.finance-easy-actions button{min-height:44px}.finance-tabs{flex-wrap:wrap;overflow:visible!important}.finance-tabs button{white-space:normal} .empty{min-height:0!important;padding:22px 14px!important}.empty.error{display:block}.retry-page{margin-top:12px} .kanban-col .lead-card:last-child{margin-bottom:0} @media(max-width:700px){ .settings-group-grid{grid-template-columns:1fr}.settings-group-grid label:has([name="business_address"]){grid-column:auto} .bt-bulk-bar{display:grid;grid-template-columns:1fr 1fr}.bt-bulk-bar>span{grid-column:1/-1}.bt-bulk-bar button{width:100%} .finance-easy-actions{grid-template-columns:1fr 1fr!important;max-width:none}.finance-tabs,.single-settings-nav,.admin-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;border-bottom:0!important}.finance-tabs button,.single-settings-nav button,.admin-tabs button{width:100%!important;border:1px solid var(--line)!important;border-radius:10px!important;text-align:center!important;min-width:0!important} .kanban{grid-template-columns:1fr!important;overflow:visible!important}.kanban-col{min-height:0!important}.lead-card{padding-top:36px!important} .content{overflow-x:hidden!important}.page-head .head-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}.page-head .head-actions>*{width:100%!important;min-width:0!important} .list-row{flex-wrap:wrap!important}.list-row>input[type="checkbox"]{flex:0 0 18px!important}.list-row>.grow{flex:1 1 calc(100% - 34px)!important} } @media(max-width:390px){.finance-tabs,.single-settings-nav,.admin-tabs,.finance-easy-actions,.page-head .head-actions,.bt-bulk-bar{grid-template-columns:1fr!important}.bt-bulk-bar>span{grid-column:auto}} /* ===== v0.14.0 final pre-setup mobile / consistency QA ===== */ html,body,#app,.shell,.main,.content,#view{max-width:100%;min-width:0} body{overflow-x:hidden} .content,#view,.card,.table-card,.split,.profile-grid,.dashboard-grid,.metrics,.settings-panel{min-width:0;max-width:100%} .card,.settings-panel,.client-workspace{overflow:hidden} img,svg,canvas{max-width:100%} .row-actions,.head-actions,.page-subactions,.actions{flex-wrap:wrap} .row-actions>*{max-width:100%} .compact-empty{min-height:0!important;padding:18px 14px!important;text-align:center!important;overflow-wrap:anywhere} .compact-empty .empty-mini-icon{font-size:22px;margin-bottom:7px} @media(max-width:850px){ .topbar{grid-template-columns:auto minmax(0,1fr) auto!important;gap:8px!important;padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important} .search{min-width:0!important;width:100%!important}.search input{min-width:0!important;width:100%!important} .top-actions{display:flex!important;gap:6px!important;min-width:0!important}.top-actions>.icon-btn:not(#notifBell):not(#mobileMore),.top-actions>#theme,.top-actions>#logout{display:none!important} #notifBell,#mobileMore,.mobile-menu{flex:0 0 46px!important;width:46px!important;min-width:46px!important} .content{padding:12px!important;overflow-x:hidden!important} .page-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important}.page-head>div{min-width:0!important}.page-head h1,.page-head .muted{overflow-wrap:anywhere!important} .page-head .head-actions,.page-subactions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:7px!important}.page-head .head-actions>*,.page-subactions>*{width:100%!important;min-width:0!important} .metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.metric{min-width:0!important;padding:12px!important}.metric-value{font-size:22px!important}.metric-label{font-size:10px!important;overflow-wrap:anywhere} .split,.profile-grid,.dashboard-grid,.data-record-grid,.permission-grid,.module-grid,.form-grid,.settings-group-grid{grid-template-columns:minmax(0,1fr)!important} .form-grid>*{grid-column:auto!important;min-width:0!important} input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea{max-width:100%!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;font-size:16px!important} .settings-tabs,.finance-tabs,.admin-tabs,.single-settings-nav,.section-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;overflow:visible!important;white-space:normal!important}.settings-tabs>* ,.finance-tabs>* ,.admin-tabs>* ,.single-settings-nav>* ,.section-nav>*{min-width:0!important;width:100%!important;white-space:normal!important;text-align:center!important} .bt-bulk-bar,.bulk-bar{position:sticky!important;top:68px!important;z-index:25!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;max-width:100%!important}.bt-bulk-bar.hidden,.bulk-bar.hidden{display:none!important}.bt-bulk-bar>span,.bulk-bar>span{grid-column:1/-1!important} .list-row{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere}.list-row .grow{min-width:0!important}.list-row .row-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:6px!important}.list-row .row-actions>*{width:100%!important;min-width:0!important} .client-workspace-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}.workspace-action{min-width:0!important}.workspace-action span{min-width:0!important}.workspace-action b,.workspace-action small{overflow-wrap:anywhere!important} .client-action-guide{display:grid!important;grid-template-columns:1fr!important;gap:5px!important} .modal-bg{padding:0!important;align-items:flex-end!important}.modal{width:100%!important;max-width:none!important;max-height:94dvh!important;border-radius:20px 20px 0 0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}.modal-scroll{min-width:0!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important}.modal .actions{position:sticky!important;bottom:0!important;background:var(--panel)!important;border-top:1px solid var(--line)!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;padding-bottom:max(10px,env(safe-area-inset-bottom))!important}.modal .actions>*{width:100%!important;min-width:0!important} .table-card,.table-wrap{max-width:100%!important;overflow:visible!important}.table-card table,.table-card tbody,.table-card tr,.table-card td{display:block!important;width:100%!important;max-width:100%!important}.table-card thead{display:none!important}.table-card tbody{display:grid!important;gap:9px!important}.table-card tbody tr:not(.empty-row){padding:9px!important;border:1px solid var(--line)!important;border-radius:13px!important;background:var(--panel)!important;overflow:hidden!important}.table-card tbody td{display:grid!important;grid-template-columns:minmax(78px,32%) minmax(0,1fr)!important;gap:9px!important;padding:7px!important;border:0!important;border-bottom:1px dashed color-mix(in srgb,var(--line) 70%,transparent)!important;white-space:normal!important;overflow-wrap:anywhere!important}.table-card tbody td:last-child{border-bottom:0!important}.table-card tbody td::before{content:attr(data-label);color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.table-card tbody td[data-label=""]{grid-template-columns:1fr!important}.table-card tbody td[data-label=""]::before{display:none!important} .kanban{grid-template-columns:1fr!important;overflow:visible!important}.kanban-col{min-width:0!important;width:100%!important} .empty{margin:0!important;max-width:100%!important} } @media(max-width:430px){.metrics,.page-head .head-actions,.page-subactions,.settings-tabs,.finance-tabs,.admin-tabs,.single-settings-nav,.section-nav,.client-workspace-actions,.bt-bulk-bar,.bulk-bar{grid-template-columns:1fr!important}.bt-bulk-bar>span,.bulk-bar>span{grid-column:auto!important}.modal .actions{grid-template-columns:1fr!important}} /* ===== v0.15.0 super-admin settings / restore / empty-state fixes ===== */ /* Empty-state JavaScript already inserts the icon; suppress the older CSS pseudo-icon. */ .empty:before{content:none!important;display:none!important} .platform-settings-form{display:grid;gap:14px} .platform-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} .admin-settings-card{min-width:0} .admin-settings-card .card-head{padding-bottom:10px} .admin-settings-card .card-body{padding-top:4px} .admin-settings-card .check{align-self:center} .platform-save-bar{position:sticky;bottom:10px;z-index:20;display:flex;justify-content:flex-end;padding:10px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.18)} .admin-system-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} .admin-system-grid>div{min-width:0;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)} .admin-system-grid span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px} .admin-system-grid b{display:block;overflow-wrap:anywhere} .maintenance-settings{border-color:color-mix(in srgb,var(--warn,#f59e0b) 40%,var(--line))} .restore-warning{padding:12px;border:1px solid color-mix(in srgb,#f59e0b 40%,var(--line));border-radius:13px;background:color-mix(in srgb,#f59e0b 8%,var(--panel2));margin-bottom:12px} .restore-warning p{margin:5px 0 0;color:var(--muted);line-height:1.45} .restore-confirm-field{margin-top:12px} .restore-restart-screen{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;padding:24px;background:rgba(3,6,13,.94);color:#fff;text-align:center} .restore-restart-screen>div{max-width:420px} .restore-restart-screen h2{margin:10px 0 6px} .restore-restart-screen p{color:#a8b3c7;line-height:1.45} .restore-spinner{font-size:44px;animation:btRestoreSpin 1s linear infinite} @keyframes btRestoreSpin{to{transform:rotate(360deg)}} .login-maintenance{margin:12px 0;padding:10px 12px;border:1px solid color-mix(in srgb,#f59e0b 45%,#d6dbe5);border-radius:12px;background:rgba(245,158,11,.08);font-size:13px;line-height:1.4} #refundPaymentQuick{white-space:nowrap} @media(max-width:900px){ .platform-settings-grid{grid-template-columns:1fr} .admin-system-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .platform-save-bar{bottom:max(8px,env(safe-area-inset-bottom))} } @media(max-width:560px){ .admin-system-grid{grid-template-columns:1fr} .platform-save-bar{padding:8px} .platform-save-bar button{width:100%!important} } /* ===== v0.16.0 first-time setup ===== */ .first-setup{ position:fixed;inset:0;z-index:2147482000;background:linear-gradient(160deg,var(--bg) 0%,color-mix(in srgb,var(--accent) 8%,var(--bg)) 100%); display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;overscroll-behavior:contain; } .setup-card{width:min(900px,100%);max-height:min(900px,94dvh);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 100px rgba(0,0,0,.36);overflow:hidden} .setup-head{display:flex;align-items:center;gap:16px;padding:22px 24px 16px;border-bottom:1px solid var(--line)} .setup-logo{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#35c9ff);color:white;flex:0 0 auto;overflow:hidden} .setup-logo svg,.setup-logo img{width:34px;height:34px;object-fit:cover}.setup-logo img{width:100%;height:100%} .setup-kicker{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.11em;color:var(--accent)} .setup-head h1{margin:3px 0 3px;font-size:27px}.setup-head p{margin:0;color:var(--muted)} .setup-progress{display:grid;grid-template-columns:repeat(4,1fr);padding:14px 24px;border-bottom:1px solid var(--line);gap:8px} .setup-progress-step{display:flex;align-items:center;gap:8px;color:var(--muted);min-width:0} .setup-progress-step span{width:26px;height:26px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:900;background:var(--panel2)} .setup-progress-step small{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .setup-progress-step.active{color:var(--text)}.setup-progress-step.active span{background:var(--accent);border-color:var(--accent);color:#fff}.setup-progress-step.done span{background:color-mix(in srgb,var(--accent) 18%,var(--panel2));border-color:var(--accent);color:var(--accent)} .setup-body{padding:22px 24px;overflow:auto;flex:1 1 auto;min-height:0} .setup-step{display:none}.setup-step.active{display:block} .setup-step-title{margin-bottom:18px}.setup-step-title.compact{margin:20px 0 10px}.setup-step-title h2,.setup-step-title h3{margin:0 0 5px}.setup-step-title p{margin:0;color:var(--muted)} .setup-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .setup-toggle-card{display:flex;align-items:flex-start;gap:11px;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--panel2);cursor:pointer;min-width:0} .setup-toggle-card>span{font-size:23px}.setup-toggle-card div{min-width:0}.setup-toggle-card b{display:block;margin-bottom:4px}.setup-toggle-card small{color:var(--muted);line-height:1.35}.setup-toggle-card input{margin-top:5px} .setup-note{margin-top:14px;padding:11px 13px;border-radius:12px;background:color-mix(in srgb,var(--accent) 7%,var(--panel2));color:var(--muted);font-size:12px} .setup-payment-methods{display:flex;flex-wrap:wrap;gap:8px}.setup-method{cursor:pointer}.setup-method input{position:absolute;opacity:0;pointer-events:none}.setup-method span{display:block;padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);font-weight:800}.setup-method input:checked+span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel2));color:var(--text)} .setup-notify-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .setup-dashboard-preview{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:18px 0} .setup-widget-preview{padding:15px 10px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);min-width:0;text-align:center} .setup-widget-preview span{width:25px;height:25px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,var(--panel));color:var(--accent);display:grid;place-items:center;margin:0 auto 8px;font-size:10px;font-weight:900} .setup-widget-preview b{font-size:12px;overflow-wrap:anywhere} .setup-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px}.setup-summary>div,.account-login-card>div{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}.setup-summary span,.account-login-card span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px} .setup-actions{display:flex;align-items:center;gap:9px;padding:14px 24px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--panel)} .setup-actions button{min-width:112px;min-height:44px} .account-login-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px} @media(max-width:700px){ .first-setup{padding:0;align-items:stretch}.setup-card{max-height:none;height:100dvh;width:100%;border-radius:0;border:0} .setup-head{padding:max(16px,env(safe-area-inset-top)) 16px 13px}.setup-logo{width:48px;height:48px;border-radius:14px}.setup-head h1{font-size:22px}.setup-head p{font-size:12px} .setup-progress{padding:10px 14px;gap:5px}.setup-progress-step{justify-content:center}.setup-progress-step small{display:none} .setup-body{padding:16px}.setup-choice-grid,.setup-notify-grid,.setup-summary,.account-login-card{grid-template-columns:1fr} .setup-dashboard-preview{grid-template-columns:1fr 1fr}.setup-widget-preview:last-child:nth-child(odd){grid-column:1/-1} .setup-actions{padding:10px 14px max(10px,env(safe-area-inset-bottom))}.setup-actions button{min-width:0;flex:1} } /* v0.16.1 first-time setup select polish */ .first-setup .bt-select-trigger{ min-height:44px!important; height:44px!important; border-radius:12px!important; background:color-mix(in srgb,var(--panel2) 96%,transparent)!important; border-color:color-mix(in srgb,var(--line) 92%,transparent)!important; font-size:13px!important; font-weight:600!important; padding:0 12px!important; } .first-setup .bt-select-trigger:hover{ border-color:color-mix(in srgb,var(--accent) 45%,var(--line))!important; } .first-setup .bt-select.open .bt-select-trigger{ border-color:var(--accent)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)!important; } /* Setup is a full-screen overlay; keep enhanced dropdown menus above it. */ .first-setup ~ .bt-select-popover{z-index:2147483000!important} .first-setup .setup-actions .primary:disabled{ opacity:.7!important; cursor:wait!important; transform:none!important; } /* ===== v0.16.3 fixed/collapsible desktop sidebar ===== */ .sidebar-desktop-close{display:none} @media(min-width:851px){ .shell{ display:block!important; min-height:100vh!important; } .side{ position:fixed!important; top:0!important; left:0!important; bottom:0!important; width:250px!important; height:100vh!important; height:100dvh!important; max-height:100dvh!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; transform:translateX(0); transition:transform .22s ease!important; z-index:40!important; } .side .brand-wrap{ flex:0 0 auto!important; } .side .nav{ flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important; } .side .side-foot{ flex:0 0 auto!important; } .main{ margin-left:250px!important; width:calc(100% - 250px)!important; min-width:0!important; transition:margin-left .22s ease,width .22s ease!important; } .sidebar-desktop-close{ display:grid!important; place-items:center!important; flex:0 0 32px!important; width:32px!important; height:32px!important; min-height:32px!important; margin-left:auto!important; padding:0!important; border:1px solid var(--line)!important; border-radius:9px!important; background:var(--panel)!important; color:var(--muted)!important; font-size:22px!important; line-height:1!important; transition:.18s!important; } .sidebar-desktop-close:hover{ color:var(--text)!important; background:var(--panel2)!important; border-color:color-mix(in srgb,var(--accent) 38%,var(--line))!important; } .shell.sidebar-collapsed .side{ transform:translateX(-100%)!important; pointer-events:none!important; } .shell.sidebar-collapsed .main{ margin-left:0!important; width:100%!important; } .shell.sidebar-collapsed .mobile-menu{ display:grid!important; } } /* ===== v0.16.4 UI polish ===== */ :root{ --control-height:42px; --compact-radius:12px; --section-gap:16px; } /* General rhythm and readability */ body{line-height:1.45} .content{padding:30px 30px 38px;max-width:1680px} .page-head{align-items:center;margin-bottom:24px} .page-head>div:first-child{min-width:0} .page-head h1{font-size:clamp(25px,2.1vw,31px);line-height:1.12;margin:5px 0 5px} .page-head .muted{line-height:1.5} .section{margin-top:var(--section-gap)} .split,.dashboard-grid{gap:var(--section-gap)} /* Sidebar polish without changing navigation behavior */ .side{padding:16px 12px 14px!important} .side .brand-wrap{min-height:64px;padding:4px 7px 14px;gap:10px;border-bottom:1px solid color-mix(in srgb,var(--line) 78%,transparent);margin-bottom:7px} .side .brand-wrap>div:nth-child(2){min-width:0} .side .logo{width:40px;height:40px;border-radius:12px;flex:0 0 40px;overflow:hidden} .side .logo img{width:100%;height:100%;object-fit:cover;display:block} .side .brand{font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side .biz-name{max-width:150px;font-size:10.5px;line-height:1.35;margin-top:3px} .side .nav{padding:2px 2px 8px 0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 58%,transparent) transparent} .side .nav-label{padding:15px 10px 6px;font-size:9px;letter-spacing:1.15px} .side .nav button{min-height:40px;padding:9px 10px;margin:2px 0;border-radius:10px;gap:10px} .side .nav button:hover{background:color-mix(in srgb,var(--accent) 5%,var(--panel2))} .side .side-foot{margin-top:8px;padding:11px 12px;border-radius:12px;line-height:1.45;box-shadow:0 8px 24px rgba(0,0,0,.08)} .sidebar-desktop-close{box-shadow:none!important} /* Top bar */ .topbar{height:68px;padding:0 30px;border-bottom-color:color-mix(in srgb,var(--line) 82%,transparent)} .search{width:min(560px,50vw)} .search input{height:40px;background:color-mix(in srgb,var(--panel) 72%,var(--panel2));padding-left:39px} .search svg{top:11px} .top-actions{gap:7px} .icon-btn{width:38px;height:38px;border-radius:10px} .icon-btn:hover,.ghost:hover{transform:none} /* Cards and dashboard */ .card{border-color:color-mix(in srgb,var(--line) 90%,transparent);box-shadow:0 10px 30px rgba(0,0,0,.10)} .card-head{min-height:54px;padding:17px 18px 0;align-items:center;gap:12px} .card-head h3{font-size:14px;letter-spacing:-.1px} .card-body{padding:16px 18px 18px} .metrics{gap:var(--section-gap)} .metric{min-height:144px;padding:18px;display:flex;flex-direction:column;justify-content:flex-start} .metric-top{min-height:40px} .metric-icon{width:40px;height:40px;border-radius:12px} .metric-value{font-size:26px;line-height:1.08;margin:14px 0 4px} .metric-label{font-size:11px;line-height:1.35} .metric-sub{margin-top:5px;line-height:1.35} .quick-actions{gap:10px} .quick-action{min-height:54px;border-radius:13px} .list{gap:3px} .list-row{min-height:48px;padding:10px 11px;border-radius:10px} .list-row+.list-row{border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)} .list-row:hover{background:color-mix(in srgb,var(--accent) 4%,var(--panel2))} .avatar{width:36px;height:36px;border-radius:10px} .badge{min-height:25px;padding:4px 8px} /* Chart/analytics surface consistency */ .revenue-card{overflow:hidden} .revenue-head{padding-bottom:2px} .revenue-range,.seg{gap:2px} .revenue-range button,.seg button{min-height:34px} .revenue-chart-wrap{min-width:0} /* Tables */ .table-card{border-radius:var(--radius)} .table-toolbar,.toolbar{gap:9px;padding:12px 14px;align-items:center} .table-wrap{overflow:auto;max-width:100%;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 46%,transparent) transparent} table{font-size:12px} th,td{padding:12px 15px;vertical-align:middle} th{position:sticky;top:0;z-index:3;height:38px;background:color-mix(in srgb,var(--panel2) 96%,var(--panel));box-shadow:0 1px 0 var(--line);font-size:9.5px;letter-spacing:.75px} tbody tr{background:transparent} tbody tr:hover{background:color-mix(in srgb,var(--accent) 4%,var(--panel2))} tbody tr:last-child td{border-bottom:0} td .muted{margin-top:2px;font-size:10.5px} .row-actions{gap:6px;justify-content:flex-end} .mini{min-height:31px;border-radius:9px} .link{line-height:1.35} /* Forms */ input,select,textarea{min-height:var(--control-height);border-radius:var(--compact-radius);padding:10px 12px;background:color-mix(in srgb,var(--panel2) 92%,var(--panel));border-color:color-mix(in srgb,var(--line) 94%,transparent)} textarea{min-height:96px;resize:vertical;line-height:1.45} input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--accent) 26%,var(--line))} input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--accent) 76%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)} .form-grid{gap:13px 14px} .form-grid label,.modal-scroll>label{min-width:0} .form-grid label span,.modal-scroll>label>span{margin-bottom:6px;font-size:10.5px;letter-spacing:.01em} .hint,small{line-height:1.45} /* Buttons */ .primary,.ghost,.button,.danger{min-height:38px;border-radius:10px;padding:9px 13px} .primary{box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 22%,transparent)} .primary:hover{transform:none;box-shadow:0 9px 22px color-mix(in srgb,var(--accent) 28%,transparent)} .compact-action{min-height:36px} .actions{gap:8px;align-items:center} /* Modals */ .modal-bg{padding:22px;background:rgba(3,6,13,.76)} .modal{padding:0!important;width:min(700px,100%);max-height:min(90dvh,860px);overflow:hidden!important;border-radius:18px;display:flex;flex-direction:column} .modal.wide{width:min(920px,100%)} .modal.small{width:min(480px,100%)} .modal-title{flex:0 0 auto;margin:0!important;padding:18px 20px 14px;border-bottom:1px solid var(--line);background:var(--panel)} .modal-title h2{font-size:19px;line-height:1.2} .modal-title .muted{font-size:11px;margin-top:4px} .modal-scroll{flex:1 1 auto;min-height:0;overflow:auto;padding:18px 20px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 46%,transparent) transparent} .modal>.actions{flex:0 0 auto;margin:0!important;padding:13px 20px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel) 97%,var(--panel2));justify-content:flex-end} .modal>.actions .primary,.modal>.actions .ghost,.modal>.actions .danger{min-width:92px} .confirmation-modal{padding:20px!important;display:block} .confirmation-modal .actions{padding:0;margin-top:18px!important;border:0;background:transparent} .modal hr{border:0;border-top:1px solid var(--line);margin:18px 0} /* Settings/forms grouping */ .settings-group{padding:15px;border-radius:14px} .settings-group-head{margin-bottom:13px;padding-bottom:10px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)} .settings-group-grid{gap:13px 14px} .settings-panel{border-radius:var(--radius)} .single-settings-nav,.finance-tabs,.admin-tabs{gap:4px} .single-settings-nav button,.finance-tabs button,.admin-tabs button{min-height:37px} /* Kanban, cards and compact mobile surfaces */ .kanban{gap:14px} .kanban-col{border-radius:15px} .lead-card,.service-mobile-card,.renewal-card{border-radius:13px} .lead-card:hover,.service-mobile-card:hover,.renewal-card:hover{border-color:color-mix(in srgb,var(--accent) 32%,var(--line))} /* Empty states and notifications */ .empty{padding:32px 18px!important;line-height:1.55} .notice,.announce,.simple-notice{border-radius:12px;line-height:1.5} .toast{right:20px;bottom:20px;border-radius:11px;max-width:min(420px,calc(100vw - 40px))} /* Better focus visibility for keyboard navigation */ button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 75%,white);outline-offset:2px} /* Light theme keeps the same hierarchy without heavy shadows */ body.light .card,body.light .side-foot,body.light .modal{box-shadow:0 8px 26px rgba(31,41,55,.07)} body.light th{background:color-mix(in srgb,var(--panel2) 93%,white)} @media(max-width:1150px){ .content{padding:24px 22px 32px} .metric{min-height:132px} } @media(max-width:850px){ .content{padding:18px 16px 28px!important} .topbar{height:62px;padding:0 14px!important} .side{padding:14px 11px!important} .side .brand-wrap{min-height:58px} .table-toolbar,.toolbar{padding:10px 12px} th,td{padding:11px 13px} .modal-bg{padding:12px} .modal{max-height:94dvh} } @media(max-width:700px){ .page-head{gap:13px;margin-bottom:18px} .page-head h1{font-size:24px} .metrics{gap:10px} .metric{min-height:116px;padding:15px} .metric-value{font-size:23px;margin-top:11px} .dashboard-grid,.split{gap:10px} .card-head{padding:14px 14px 0} .card-body{padding:13px 14px 15px} .table-wrap{margin:0} .row-actions{justify-content:flex-start} .modal-bg{align-items:end;padding:0} .modal,.modal.wide,.modal.small{width:100%;max-width:none;max-height:94dvh;border-radius:18px 18px 0 0;border-bottom:0} .modal-title{padding:16px 16px 13px} .modal-scroll{padding:16px} .modal>.actions{padding:11px 16px max(11px,env(safe-area-inset-bottom))} .modal>.actions>*{flex:1;min-width:0!important} } @media(max-width:420px){ .content{padding:14px 11px 24px!important} .metric{min-height:108px} .side .brand{font-size:15px} .side .biz-name{max-width:142px} .top-actions{gap:5px} .icon-btn{width:36px;height:36px} } /* ===== v0.16.5 checkbox + analytics month selector polish ===== */ .table-card .select-cell{width:46px!important;min-width:46px!important;padding-left:12px!important;padding-right:12px!important;text-align:center!important} .table-card .select-cell input[type="checkbox"], .table-card input.bulk-row-check[type="checkbox"]{ appearance:none!important; -webkit-appearance:none!important; width:18px!important; min-width:18px!important; height:18px!important; min-height:18px!important; padding:0!important; margin:0!important; border:1px solid color-mix(in srgb,var(--muted) 48%,var(--line))!important; border-radius:5px!important; background:color-mix(in srgb,var(--panel2) 92%,transparent)!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--panel) 55%,transparent)!important; display:inline-grid!important; place-items:center!important; vertical-align:middle!important; cursor:pointer!important; transition:border-color .14s ease,background .14s ease,box-shadow .14s ease,transform .1s ease!important; } .table-card .select-cell input[type="checkbox"]::before, .table-card input.bulk-row-check[type="checkbox"]::before{ content:""!important; width:8px!important; height:4px!important; border-left:2px solid #fff!important; border-bottom:2px solid #fff!important; transform:rotate(-45deg) scale(0)!important; margin-top:-2px!important; transition:transform .12s ease!important; } .table-card .select-cell input[type="checkbox"]:hover, .table-card input.bulk-row-check[type="checkbox"]:hover{ border-color:color-mix(in srgb,var(--accent) 72%,var(--line))!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent)!important; } .table-card .select-cell input[type="checkbox"]:checked, .table-card input.bulk-row-check[type="checkbox"]:checked{ border-color:var(--accent)!important; background:linear-gradient(135deg,var(--accent),var(--accent2))!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)!important; } .table-card .select-cell input[type="checkbox"]:checked::before, .table-card input.bulk-row-check[type="checkbox"]:checked::before{transform:rotate(-45deg) scale(1)!important} .table-card .select-cell input[type="checkbox"]:active, .table-card input.bulk-row-check[type="checkbox"]:active{transform:scale(.92)!important} .analytics-controls{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important} .analytics-month-picker{display:inline-flex;align-items:center;gap:6px;padding:4px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel2) 88%,transparent)} .analytics-month-picker input[type="month"]{width:170px!important;min-width:0!important;min-height:36px!important;height:36px!important;padding:6px 10px!important;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;font-weight:700;color:var(--text)!important;cursor:pointer} .analytics-month-picker .month-step{width:34px;height:34px;min-width:34px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:24px;line-height:1;display:grid;place-items:center;cursor:pointer} .analytics-month-picker .month-step:hover{background:color-mix(in srgb,var(--accent) 12%,var(--panel2));color:var(--text)} .analytics-custom-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto} .analytics-custom-range input[type="date"]{width:155px!important} @media(max-width:900px){.analytics-custom-range{width:100%;margin-left:0}.analytics-month-picker{flex:1 1 245px;justify-content:space-between}.analytics-month-picker input[type="month"]{flex:1;width:auto!important}.analytics-custom-range input[type="date"]{flex:1 1 145px;width:auto!important}} /* ===== v0.16.6 project-wide checkbox polish ===== */ input[type="checkbox"]{ appearance:none!important; -webkit-appearance:none!important; width:18px!important; min-width:18px!important; height:18px!important; min-height:18px!important; padding:0!important; margin:0!important; flex:0 0 18px!important; border:1px solid color-mix(in srgb,var(--muted) 52%,var(--line))!important; border-radius:5px!important; background:color-mix(in srgb,var(--panel2) 94%,transparent)!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--panel) 50%,transparent)!important; display:inline-grid!important; place-items:center!important; vertical-align:middle!important; cursor:pointer!important; transition:border-color .14s ease,background .14s ease,box-shadow .14s ease,transform .1s ease,opacity .14s ease!important; } input[type="checkbox"]::before{ content:""!important; width:8px!important; height:4px!important; border:0!important; border-left:2px solid #fff!important; border-bottom:2px solid #fff!important; margin-top:-2px!important; transform:rotate(-45deg) scale(0)!important; transform-origin:center!important; transition:transform .12s ease!important; } input[type="checkbox"]:hover:not(:disabled){ border-color:color-mix(in srgb,var(--accent) 72%,var(--line))!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent)!important; } input[type="checkbox"]:focus-visible{ outline:none!important; border-color:var(--accent)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)!important; } input[type="checkbox"]:checked{ border-color:var(--accent)!important; background:linear-gradient(135deg,var(--accent),var(--accent2))!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)!important; } input[type="checkbox"]:checked::before{transform:rotate(-45deg) scale(1)!important} input[type="checkbox"]:active:not(:disabled){transform:scale(.92)!important} input[type="checkbox"]:disabled{cursor:not-allowed!important;opacity:.45!important;filter:saturate(.7)!important} /* Keep checkbox rows aligned consistently in forms, settings, permissions and bulk lists. */ .check input[type="checkbox"], .module-toggle input[type="checkbox"], .setup-toggle-card input[type="checkbox"], .permission-grid input[type="checkbox"], .list-row>input[type="checkbox"], .bulk-bar input[type="checkbox"]{margin:0!important} .check{align-items:center!important} .module-toggle input[type="checkbox"]{align-self:center!important} .setup-toggle-card input[type="checkbox"]{margin-top:3px!important} .list-row>input[type="checkbox"]{flex:0 0 18px!important} /* Selection columns keep a compact, centered footprint everywhere. */ .select-cell{width:46px!important;min-width:46px!important;text-align:center!important} .select-cell input[type="checkbox"], .bulk-row-check[type="checkbox"]{display:inline-grid!important} @media(max-width:700px){ input[type="checkbox"]{width:19px!important;min-width:19px!important;height:19px!important;min-height:19px!important;flex-basis:19px!important} .list-row>input[type="checkbox"]{flex-basis:19px!important} } /* ===== v0.16.7 UI reliability / overlay polish ===== */ html.bt-overlay-open,body.bt-overlay-open{ overflow:hidden!important; overscroll-behavior:none!important; } .modal-bg,.notification-drawer-wrap{ overscroll-behavior:contain; } .modal,.notification-drawer{ min-width:0; max-width:100%; } .modal-scroll,.drawer-body,.recipe-list,.bulk-renew-list,.admin-log-list{ overscroll-behavior:contain; } .modal-scroll{ max-width:100%; scrollbar-gutter:stable; } .modal-scroll>*{max-width:100%} .modal-scroll img,.modal-scroll video,.modal-scroll canvas{max-width:100%;height:auto} .notification-drawer{max-height:calc(100dvh - 20px)} .drawer-body{min-height:0;scrollbar-gutter:stable} .modal-title{gap:12px} .modal-title>div{min-width:0} .modal-title h2{overflow-wrap:anywhere} .modal>.actions{min-width:0;flex-wrap:wrap} button:disabled,.primary:disabled,.ghost:disabled,.danger:disabled{cursor:not-allowed!important;opacity:.58;transform:none!important} @media(max-width:700px){ .notification-drawer{right:0;top:0;bottom:0;width:100%;max-height:100dvh;border-radius:0;border-top:0;border-bottom:0} .drawer-head{padding-top:max(15px,env(safe-area-inset-top))} .drawer-foot{padding-bottom:max(12px,env(safe-area-inset-bottom))} .modal-scroll{scrollbar-gutter:auto} } /* ===== v0.17.2 modal performance ===== */ html{scrollbar-gutter:stable} .modal-bg{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; animation-duration:.10s!important; } .modal{ animation-duration:.12s!important; contain:layout; } /* v0.17.3 subscription states */ .plan-grace-banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;margin:0 0 16px;border:1px solid rgba(245,158,11,.35);border-radius:12px;background:rgba(245,158,11,.10)} .plan-grace-banner span{color:var(--muted)} .subscription-expired-screen{min-height:calc(100vh - 160px);display:grid;place-items:center;padding:24px} .subscription-expired-card{max-width:720px;width:100%;text-align:center;padding:34px} .subscription-expired-card .subscription-lock{font-size:44px;margin-bottom:8px} .subscription-expired-card .details{margin:22px 0;text-align:left} .expired-exports{margin:22px 0;text-align:left}.expired-exports>.row-actions{margin-top:10px;flex-wrap:wrap} /* ===== v0.17.4 ACCOUNT RECOVERY & SECURITY ===== */ .login-link{appearance:none;border:0;background:transparent;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;padding:.35rem .5rem;margin:.1rem auto 0;display:block;text-align:center} .login-link:hover{text-decoration:underline}.login-link.hidden{display:none}.login-error.good{color:var(--good,#22c55e)} .auth-success-card{text-align:center}.security-action-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}.security-action-row+.security-action-row{border-top:1px solid var(--line)} @media(max-width:700px){.security-action-row{align-items:stretch;flex-direction:column}.security-action-row button{width:100%}} /* ===== v0.17.7 CLIENT PROFILES & REPORTS ===== */ .client-profile-workspace{margin-bottom:12px} .client-profile-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin:0 0 14px;padding:7px;border:1px solid var(--line);border-radius:14px;background:var(--panel);max-width:100%;min-width:0} .client-profile-tab{min-width:0;min-height:38px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:11px;font-weight:800;padding:8px 10px;white-space:normal;overflow-wrap:anywhere} .client-profile-tab:hover{background:var(--panel2);color:var(--text)} .client-profile-tab.active{background:var(--accent);color:#fff} .client-profile-panel{min-width:0;max-width:100%} .client-profile-panel>.card,.client-profile-panel>.profile-grid,.client-profile-panel>.metrics{min-width:0;max-width:100%} .client-profile-panel .list-row{min-width:0;max-width:100%} .client-profile-panel .list-row>.grow{min-width:0} .client-profile-panel .list-row .muted,.client-profile-panel .details b{overflow-wrap:anywhere;white-space:normal} .client-profile-metrics,.client-payment-metrics{margin-bottom:14px} .client-notes-body{min-height:120px} .client-note-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65} .report-summary-metrics{grid-template-columns:repeat(3,minmax(0,1fr))} .reports-grid>section{min-width:0} .reports-grid .mini-bar-row{min-width:0} .reports-grid .mini-bar-row>span{min-width:0} @media(max-width:1050px){.client-profile-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.report-summary-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:700px){.client-profile-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px}.client-profile-tab{min-height:36px;padding:7px 8px}.client-profile-panel .row-actions{width:100%;justify-content:flex-start}.client-profile-panel .list-row{align-items:flex-start;flex-wrap:wrap}.reports-grid .mini-bar-row{grid-template-columns:minmax(72px,90px) minmax(0,1fr) minmax(60px,76px)}} @media(max-width:430px){.client-profile-tabs{grid-template-columns:1fr}.report-summary-metrics{grid-template-columns:1fr!important}} /* ===== v0.17.10 WORKFLOW & ORGANIZATION ===== */ .appointment-quick-status{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin:2px 0 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel2)} .appointment-quick-status>span{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.appointment-quick-status>div{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.appointment-quick-status .active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} .cal-event.scheduled{border-left:3px solid #eab308}.cal-event.confirmed{border-left:3px solid #22c55e}.cal-event.completed{opacity:.78}.cal-event.canceled,.cal-event.no_show{opacity:.62;text-decoration:line-through} .module-trash-button{white-space:nowrap}.outstanding-tools{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:12px}.outstanding-tools input{max-width:360px} .command-menu .search-result{position:relative}.command-menu .search-result em{margin-left:auto;font-size:10px;font-style:normal;color:var(--muted);border:1px solid var(--border);padding:3px 6px;border-radius:999px;white-space:nowrap}.command-loading,.command-empty{padding:12px;color:var(--muted);font-size:13px} .quick-create-menu{position:fixed;z-index:1250;width:min(330px,calc(100vw - 24px));max-height:min(520px,70vh);overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 50px #0008;padding:8px}.quick-create-menu button{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:0;background:transparent;color:var(--text);padding:10px;border-radius:10px;cursor:pointer}.quick-create-menu button:hover{background:var(--panel2)}.quick-create-menu button>span{font-size:18px;width:26px;text-align:center}.quick-create-menu button>div{display:flex;flex-direction:column;gap:2px}.quick-create-menu small{color:var(--muted)} .notification-row .openNotif{white-space:nowrap}.drawer-notification-actions{display:flex;gap:5px;flex-direction:column;align-items:flex-end} @media(max-width:700px){.appointment-quick-status{align-items:flex-start;flex-direction:column}.appointment-quick-status>div{justify-content:flex-start}.outstanding-tools{align-items:stretch;flex-direction:column}.outstanding-tools input{max-width:none}.quick-create-menu{left:12px!important;right:12px!important;width:auto}.notification-row{align-items:flex-start}.drawer-notification-actions{flex-direction:row;align-items:center}} /* ===== v0.17.11 FINAL PRODUCTION QA ===== */ /* Reserve real space for the desktop collapse control so branding can never sit underneath it. */ @media(min-width:851px){ .side .brand-wrap{display:grid!important;grid-template-columns:40px minmax(0,1fr) 32px!important;align-items:center!important;column-gap:9px!important;padding-right:5px!important} .side .brand-wrap>div:nth-child(2){min-width:0!important;width:auto!important;overflow:hidden!important} .side .brand{font-size:15.5px!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .side .biz-name{max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .sidebar-desktop-close{grid-column:3!important;margin-left:0!important;position:static!important;z-index:2!important} } /* Uploaded logos are constrained to the existing mark instead of changing sidebar dimensions. */ .side .logo,.setup-logo{overflow:hidden!important;display:grid!important;place-items:center!important} .side .logo img,.setup-logo img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;border-radius:inherit!important} .side .logo img{padding:2px!important} /* Equal card rhythm prevents the uneven Super Admin Settings columns seen with different card heights. */ .platform-settings-grid{grid-auto-flow:row!important;align-items:stretch!important;gap:12px!important} .admin-settings-card{height:100%!important;align-self:stretch!important;display:flex!important;flex-direction:column!important;margin:0!important} .admin-settings-card .card-body{flex:1 1 auto!important} .platform-settings-form{gap:12px!important} .maintenance-compensation-box{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;margin-top:8px;border:1px solid color-mix(in srgb,var(--warn,#f59e0b) 30%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--warn,#f59e0b) 5%,var(--panel2))} .maintenance-compensation-box>div{display:grid;gap:3px;min-width:0}.maintenance-compensation-box small{color:var(--muted);line-height:1.4}.maintenance-compensation-box button{flex:0 0 auto} .maintenance-duration-presets{display:flex;gap:7px;flex-wrap:wrap}.maintenance-duration-presets .mini{min-width:48px} .maintenance-extension-history{display:grid;gap:7px;padding:12px;margin-top:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}.maintenance-extension-history>div{display:flex;justify-content:space-between;gap:10px;padding-top:7px;border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent)}.maintenance-extension-history span{min-width:0;overflow-wrap:anywhere}.maintenance-extension-history small{color:var(--muted);white-space:nowrap} .quick-create-top{position:relative}.quick-create-top:after{content:'+';position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:9px;font-weight:900;border:2px solid var(--bg)} @media(max-width:850px){.platform-settings-grid{grid-template-columns:1fr!important}.maintenance-compensation-box{align-items:stretch;flex-direction:column}.maintenance-compensation-box button{width:100%}.maintenance-extension-history>div{flex-direction:column}.maintenance-extension-history small{white-space:normal}} /* v0.17.11 Quick Create discoverability */ .quick-create-top{width:auto!important;min-width:39px!important;padding:0 11px!important;display:flex!important;align-items:center!important;gap:7px!important} .quick-create-top .quick-create-label{font-size:12px;font-weight:800;white-space:nowrap} @media(max-width:700px){.quick-create-top{width:39px!important;padding:0!important;display:grid!important}.quick-create-top .quick-create-label{display:none!important}} .quick-create-top:after{content:none!important} /* v0.17.11 final client-deletion choice */ .delete-history-choice{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:12px;margin:10px 0;cursor:pointer} .delete-history-choice input{margin-top:3px;flex:0 0 auto} .delete-history-choice span{display:grid;gap:4px}.delete-history-choice small{color:var(--muted);line-height:1.45} .delete-history-choice:has(input:checked){border-color:var(--accent)} .delete-history-choice.danger-choice:has(input:checked){border-color:#ef4444} /* ===== v0.17.12 MOBILE BUTTON RELIABILITY ===== Mobile modals are already flex columns: the scroll area is the only scrolling child and the action footer is outside it. Keeping that footer sticky created an unnecessary composited layer and can cause hit-testing problems on some mobile WebKit/Chromium builds. Keep it as a normal flex child instead. */ @media(max-width:700px){ .modal-bg{ pointer-events:auto!important; touch-action:pan-y!important; } .modal,.modal.wide,.modal.small{ contain:none!important; pointer-events:auto!important; isolation:isolate!important; } .modal-scroll{ position:relative!important; z-index:1!important; min-height:0!important; overscroll-behavior:contain!important; touch-action:pan-y!important; } .modal>.actions{ position:relative!important; inset:auto!important; bottom:auto!important; z-index:20!important; flex:0 0 auto!important; pointer-events:auto!important; touch-action:manipulation!important; -webkit-user-select:none!important; user-select:none!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; padding:11px 16px max(14px,env(safe-area-inset-bottom))!important; } .modal>.actions>button, .modal-title>button, .confirmation-modal .actions>button{ position:relative!important; z-index:21!important; width:100%!important; min-width:0!important; min-height:48px!important; pointer-events:auto!important; touch-action:manipulation!important; -webkit-tap-highlight-color:transparent; } .modal>.actions>button:only-child{grid-column:1/-1!important} .force-password .actions{grid-template-columns:1fr!important} .force-password .actions>button{grid-column:1/-1!important} /* Keep page-level controls independently tappable while a modal is not open. */ button,.button,a.button{touch-action:manipulation} } @media(max-width:430px){ /* Do not stack Cancel/Save vertically on narrow phones. Keeping them side by side keeps both controls above mobile browser chrome and the keyboard edge. */ .modal>.actions,.confirmation-modal .actions{grid-template-columns:repeat(2,minmax(0,1fr))!important} .modal>.actions>button:only-child,.confirmation-modal .actions>button:only-child{grid-column:1/-1!important} } /* ===== v0.17.27 final pre-production polish ===== */ /* Use the platform/system font stack so the app has no external font dependency. */ body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif} /* Quick Create: keep the desktop label readable and keep the action visible on mobile. */ .quick-create-top{min-width:118px!important;height:39px!important;flex:0 0 auto!important;justify-content:center!important} .quick-create-top .quick-create-label{overflow:visible!important;text-overflow:clip!important} @media(max-width:850px){ .top-actions>#quickCreateTop:not(#notifBell):not(#mobileMore){display:grid!important;width:38px!important;min-width:38px!important;height:38px!important;padding:0!important;place-items:center!important} .top-actions>#quickCreateTop .quick-create-label{display:none!important} .top-actions{display:flex!important;grid-template-columns:none!important;gap:5px!important} } /* Appointment status controls wrap cleanly instead of overlapping. */ .appointment-quick-status{min-width:0!important} .appointment-quick-status>div{min-width:0!important;max-width:100%!important;display:grid!important;grid-template-columns:repeat(4,minmax(92px,1fr))!important;width:min(100%,460px)!important} .appointment-quick-status .mini{min-width:0!important;white-space:normal!important;line-height:1.2!important;text-align:center!important} @media(max-width:700px){.appointment-quick-status>div{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}} @media(max-width:380px){.appointment-quick-status>div{grid-template-columns:1fr!important}} /* Keep page action buttons tidy when Trash + Archive + Add actions share the same header. */ .page-head .head-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap} /* Unlimited plan usage never renders a negative progress bar. */ .usage-row.unlimited .usage-track i{width:100%!important;opacity:.18} .usage-row.unlimited small{color:var(--good);font-weight:800} /* Location selectors fit the existing settings form. */ .location-timezone-note{font-size:10px;color:var(--muted);margin-top:5px} /* v0.17.27 profile/location finishing rules */ .client-profile-metrics{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important} .location-manual{margin-top:8px;display:grid;gap:5px}.location-manual.hidden{display:none!important}.location-manual small{color:var(--muted);font-size:10px} /* v0.17.28 built-in Support center */ .nav button{position:relative}.nav-ticket-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;line-height:1}.support-metrics{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}.support-tabs{overflow:auto;white-space:nowrap}.support-subject-cell{max-width:340px;overflow:hidden;text-overflow:ellipsis}.support-ticket-form textarea,.support-reply-box textarea{resize:vertical;min-height:110px}.support-tech-toggle{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel2)}.support-tech-toggle.hidden{display:none}.support-tech-toggle .check-line{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--text)}.support-tech-toggle input[type=checkbox]{width:auto}.support-tech-toggle small{display:block;margin-top:6px;color:var(--muted);line-height:1.45}.support-modal{width:min(980px,100%)}.support-ticket-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.support-ticket-meta>div{border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:11px}.support-ticket-meta span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.7px;font-weight:800;margin-bottom:5px}.support-tech{margin:12px 0}.support-tech .card-body{display:grid;gap:7px;font-size:12px}.support-user-agent{overflow-wrap:anywhere}.support-thread{display:grid;gap:12px;margin-top:14px;max-height:48vh;overflow:auto;padding:2px 4px 2px 0}.support-message{max-width:82%;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}.support-message.from-support{margin-left:auto;background:color-mix(in srgb,var(--accent) 14%,var(--panel2));border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}.support-message.from-business{margin-right:auto}.support-message-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:7px;font-size:11px}.support-message-head small{color:var(--muted);white-space:nowrap}.support-message-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}.support-reply-box{border-top:1px solid var(--line);padding-top:15px}.support-admin-controls{margin-bottom:14px}.support-actions{flex-wrap:wrap}.support-actions .primary{margin-left:auto}.support-filter-bar{display:grid;grid-template-columns:minmax(180px,1.5fr) repeat(4,minmax(130px,.75fr));gap:9px;padding:14px;border-bottom:1px solid var(--line)}.badge.support-open{background:#6d5dfc18;color:#a99fff} @media(max-width:900px){.support-filter-bar{grid-template-columns:1fr 1fr}.support-filter-bar input{grid-column:1/-1}.support-ticket-meta{grid-template-columns:1fr 1fr}.support-message{max-width:92%}} @media(max-width:620px){.support-metrics{grid-template-columns:1fr}.support-filter-bar{grid-template-columns:1fr}.support-filter-bar input{grid-column:auto}.support-ticket-meta{grid-template-columns:1fr}.support-message{max-width:96%}.support-message-head{align-items:flex-start;flex-direction:column;gap:3px}.support-actions .primary{margin-left:0}.support-actions>*{flex:1 1 auto}} /* v0.17.44 Unified Add Client form. */ .bt-client-type{border:0;padding:0;margin:0 0 4px;min-width:0} .bt-client-type legend{font-size:11px;font-weight:800;color:var(--muted);padding:0;margin-bottom:9px} .bt-client-type-options{display:grid;grid-template-columns:1fr 1fr;gap:10px} .bt-client-type-item{display:flex;align-items:center;gap:9px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);cursor:pointer;min-width:0} .bt-client-type-item.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel2))} .bt-client-type-item input{width:16px;height:16px;flex:none;accent-color:var(--accent)} .bt-client-type-item span{display:flex;flex-direction:column;gap:4px;min-width:0} .bt-client-type-item b{font-size:12px} .bt-client-type-item small{color:var(--muted);font-size:10px;line-height:1.35} .bt-expiry-panel{padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--panel2);display:grid;gap:9px} .bt-expiry-panel .flow-step{margin:0!important} .bt-never-expire{display:flex;gap:10px;align-items:center;justify-content:flex-start;padding:11px;border:1px solid var(--line);border-radius:10px;align-self:end;min-height:41px;cursor:pointer} .bt-never-expire input{width:17px;height:17px;flex:none;accent-color:var(--accent)} .bt-never-expire span{margin:0!important} .bt-xui-credential-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:11px} .bt-service-match{padding:9px 12px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:11px;line-height:1.45} .bt-service-match.good{border-color:color-mix(in srgb,var(--good) 45%,var(--line));color:var(--good)} .bt-service-match.warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));color:var(--warn)} @media(max-width:560px){.bt-client-type-item{padding:9px;align-items:flex-start}.bt-client-type-item small{font-size:9px}} .bt-unified-client #easyClientPasswordWrap{position:relative} .bt-unified-client #easyClientXuiPass{padding-right:74px} .bt-unified-client #easyClientPasswordWrap .bt-password-visibility{position:absolute;right:6px;bottom:5px;min-width:57px;z-index:1} .bt-unified-client input[type="date"]{color-scheme:dark} body.light .bt-unified-client input[type="date"]{color-scheme:light}