*{box-sizing:border-box} :root{--bg:#fff;--panel:#fff;--soft:#f7f7f7;--soft2:#f1f1f1;--text:#222;--muted:#777;--line:#d6d6d6;--link:#1769aa;--ok:#2e7444;--warn:#9a7000;--danger:#a33}
html,body{margin:0;padding:0} body{font:13px/1.45 Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
.topbar{height:49px;border-bottom:1px solid var(--line);background:#fafafa;display:flex;align-items:center;padding:0 18px;gap:22px;position:sticky;top:0;z-index:20}
.brand{font-size:17px;font-weight:bold;color:#111;letter-spacing:-.5px}.brand span{font-weight:normal}
.topnav{height:100%;display:flex;align-items:stretch;gap:2px}.topnav a{padding:0 11px;display:flex;align-items:center;color:#555;border-bottom:2px solid transparent}.topnav a.active{border-color:#555;color:#111}.topnav a:hover{background:#f0f0f0;text-decoration:none}
.top-right{margin-left:auto;display:flex;align-items:center;gap:9px;color:#666}.dot{width:7px;height:7px;background:#4a8d58;border-radius:50%}
.menu{display:none;border:1px solid var(--line);background:#fff;padding:5px 8px}
.layout{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:calc(100vh - 49px)}
.sidebar{border-right:1px solid var(--line);background:#fafafa;padding:16px 12px}.group{margin-bottom:22px}.group-title{font-size:10px;font-weight:bold;color:#888;letter-spacing:.08em;padding:0 8px 6px}
.side{display:block;color:#444;padding:6px 8px;border:1px solid transparent}.side span{display:inline-block;width:15px;color:#999}.side:hover{background:#f0f0f0;text-decoration:none}.side.active{background:#ededed;border-color:#d2d2d2;color:#111}
main{min-width:0}.content{max-width:1500px;margin:auto;padding:27px}.head{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:21px}.crumb{font-size:11px;color:#888;margin-bottom:4px}h1{font-size:22px;font-weight:600;margin:0}h2{font-size:15px;margin:0 0 3px;font-weight:600}h3{font-size:13px;margin:0 0 7px}.muted{color:var(--muted);font-size:12px}.actions{display:flex;gap:7px;align-items:center}
.btn{font:inherit;border:1px solid #bbb;background:#f7f7f7;padding:7px 10px;border-radius:2px;color:#333;cursor:pointer}.btn:hover{background:#ededed}.btn-dark{background:#444;color:#fff;border-color:#444}.btn-danger{color:#933}.input,.select,.textarea{font:inherit;border:1px solid #bbb;background:#fff;padding:7px 9px;border-radius:2px;color:#333}.input:focus,.select:focus,.textarea:focus{outline:1px solid #888}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:20px}.stat{padding:15px 17px;border-right:1px solid var(--line)}.stat:last-child{border-right:0}.stat-label{font-size:12px;color:#777}.stat-value{font-size:24px;font-weight:600;margin:3px 0}.up{color:var(--ok);font-size:11px}.warning{color:var(--warn);font-size:11px}
.grid2{display:grid;grid-template-columns:1.45fr 1fr;gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.panel{border:1px solid var(--line);background:#fff;margin-bottom:20px}.panel-head{min-height:59px;padding:12px 15px;background:#fafafa;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:15px}.panel-body{padding:15px}
table{border-collapse:collapse;width:100%;min-width:650px}th,td{text-align:left;padding:9px 11px;border-bottom:1px solid #e5e5e5;white-space:nowrap}th{font-size:11px;color:#666;background:#fcfcfc;font-weight:600}tbody tr:hover{background:#fafafa}tbody tr:last-child td{border-bottom:0}.table-scroll{overflow:auto}
.badge{font-size:10px;padding:2px 6px;border:1px solid #ccc;display:inline-block}.ok{color:var(--ok);background:#f4faf5;border-color:#cadcca}.off{color:#777;background:#f4f4f4}.warn{color:var(--warn);background:#fffaf0;border-color:#dfd2aa}.danger{color:#933;background:#fff5f5;border-color:#e0c3c3}
.kv{display:grid;grid-template-columns:150px 1fr}.kv div{padding:8px 0;border-bottom:1px solid #eee}.kv div:nth-child(odd){color:#777}.progress{height:7px;border:1px solid #ccc;background:#f3f3f3}.progress span{display:block;height:100%;background:#777}
.chart{width:100%;height:240px;display:block}.chart-grid{stroke:#e7e7e7;stroke-width:1}.chart-line{fill:none;stroke:#555;stroke-width:2}.chart-fill{fill:#eee}.axis{font-size:10px;fill:#888}
.bar-chart{display:flex;align-items:flex-end;height:210px;gap:12px;padding:10px 10px 0;border-bottom:1px solid #ccc}.bar{flex:1;background:#777;min-width:12px;position:relative}.bar em{position:absolute;top:-17px;width:100%;text-align:center;font-style:normal;font-size:10px;color:#666}.bar-label{font-size:10px;color:#888;text-align:center;margin-top:5px}
.query{font-family:Consolas,Monaco,monospace;font-size:12px;background:#fafafa;border:1px solid #ddd;padding:13px;overflow:auto;white-space:pre-wrap}.query .kw{font-weight:bold;color:#444}
.filters{display:flex;gap:7px;flex-wrap:wrap}.filterbar{padding:12px 15px;border-bottom:1px solid var(--line);background:#fcfcfc}
.pagination{padding:10px 12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;color:#777;font-size:11px}.pages button{border:1px solid #ccc;background:#fff;padding:5px 8px;margin-left:3px}.pages button.active{background:#444;color:#fff;border-color:#444}
.form{display:grid;grid-template-columns:180px 1fr;gap:12px 18px;align-items:start}.form label{color:#666;padding-top:7px}.textarea{min-height:110px;resize:vertical}.check{display:flex;gap:8px;align-items:center}
.footer{font-size:11px;color:#999;padding:3px 0 25px}
.notice{border:1px solid #ddd;background:#fafafa;padding:10px 12px;margin-bottom:15px}.notice.warnbox{border-color:#ddd1a9;background:#fffaf0}
.mini-list>div{padding:9px 0;border-bottom:1px solid #eee;display:flex;justify-content:space-between;gap:10px}.mini-list>div:last-child{border:0}
@media(max-width:950px){.layout{grid-template-columns:180px 1fr}.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}.grid2,.grid3{grid-template-columns:1fr}}
@media(max-width:700px){.topbar{padding:0 12px}.menu{display:block}.topnav{display:none;position:absolute;top:49px;left:0;right:0;height:auto;background:#fafafa;border-bottom:1px solid #ccc;padding:4px 12px;flex-direction:column}.topnav.open{display:flex}.topnav a{padding:8px;border:0}.top-right{font-size:11px}.sidebar{display:none}.sidebar.open{display:block;border-right:0;border-bottom:1px solid var(--line)}.layout{display:block}.content{padding:16px 12px}.head{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:1fr 1fr}.stat{padding:12px}.stat-value{font-size:19px}.panel-head{align-items:flex-start;flex-direction:column}.form{grid-template-columns:1fr}.actions{width:100%}.actions .input{flex:1;min-width:0}.pagination{flex-direction:column}}

/* v3 modules */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:15px}.tabs a{padding:8px 12px;color:#666;border:1px solid transparent;border-bottom:0}.tabs a.active{background:#fff;border-color:var(--line);color:#111;margin-bottom:-1px}
.split{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px}.listbox{border:1px solid var(--line);background:#fff}.listbox a{display:block;padding:9px 11px;border-bottom:1px solid #eee;color:#444}.listbox a.active{background:#f1f1f1;color:#111}.listbox a:last-child{border-bottom:0}
.timeline{padding:4px 15px}.event{display:grid;grid-template-columns:110px 12px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid #eee}.event:last-child{border:0}.event-time{font-size:11px;color:#888}.event-dot{width:7px;height:7px;border-radius:50%;background:#777;margin-top:5px}.event-title{font-weight:600}.event-detail{font-size:11px;color:#777;margin-top:2px}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metric{border:1px solid var(--line);padding:12px;background:#fff}.metric .num{font-size:20px;font-weight:600;margin:3px 0}.spark{height:35px;margin-top:6px}.spark svg{width:100%;height:100%}
.code{font-family:Consolas,Monaco,monospace;background:#f7f7f7;border:1px solid #ddd;padding:12px;font-size:12px;overflow:auto}.tree{font-family:Consolas,Monaco,monospace;font-size:12px}.tree div{padding:4px 0}.tree .indent{padding-left:20px}
.file-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.file{border:1px solid var(--line);padding:12px;background:#fff}.file-icon{font-size:24px;margin-bottom:8px}.file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-meta{font-size:10px;color:#888;margin-top:3px}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.day{min-height:90px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px;font-size:11px}.day b{display:block;margin-bottom:5px}.day.today{background:#f3f3f3}.day .cal-event{font-size:10px;background:#eee;border:1px solid #d5d5d5;padding:3px;margin-top:4px}
.ticket{display:grid;grid-template-columns:1fr 170px;gap:0}.ticket-main{padding:15px;border-right:1px solid var(--line)}.ticket-side{padding:15px;background:#fafafa}.comment{border-bottom:1px solid #eee;padding:12px 0}.comment:last-child{border:0}.comment-head{display:flex;justify-content:space-between;color:#777;font-size:11px}.comment p{margin:5px 0 0;color:#444;font-size:12px}
.toggle{position:relative;display:inline-block;width:32px;height:17px}.toggle input{display:none}.slider{position:absolute;inset:0;background:#ccc;border-radius:20px}.slider:before{content:"";position:absolute;width:13px;height:13px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.15s}.toggle input:checked+.slider{background:#666}.toggle input:checked+.slider:before{transform:translateX(15px)}
@media(max-width:900px){.split{grid-template-columns:1fr}.file-grid{grid-template-columns:repeat(2,1fr)}.metric-grid{grid-template-columns:1fr 1fr}.ticket{grid-template-columns:1fr}}
@media(max-width:600px){.file-grid,.metric-grid{grid-template-columns:1fr}.event{grid-template-columns:75px 12px 1fr}.calendar .day{min-height:65px}}

/* v4 navigation, detail pages & modal system */
.topnav a{white-space:nowrap}
.breadcrumb a{color:#777}
.subnav{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);margin:-5px 0 20px}
.subnav a{padding:8px 12px;color:#666;border-bottom:2px solid transparent}
.subnav a.active{color:#111;border-bottom-color:#555}
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.entity{display:flex;gap:12px;align-items:center}
.avatar{width:38px;height:38px;border:1px solid #ccc;background:#f4f4f4;display:grid;place-items:center;font-weight:bold;color:#555}
.entity h1{margin:0 0 3px}.entity p{margin:0}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.4fr) 320px;gap:20px}
.side-card{border:1px solid var(--line);background:#fafafa;padding:14px;margin-bottom:15px}
.side-card h3{border-bottom:1px solid #ddd;padding-bottom:8px}
.info-grid{display:grid;grid-template-columns:170px 1fr}.info-grid div{padding:8px 0;border-bottom:1px solid #eee}.info-grid .label{color:#777}
.action-menu{position:relative}.action-menu select{min-width:120px}
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:100;align-items:center;justify-content:center;padding:18px}
.modal-backdrop.open{display:flex}
.modal{width:min(620px,100%);max-height:90vh;overflow:auto;background:#fff;border:1px solid #aaa;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.modal.large{width:min(900px,100%)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--line);background:#fafafa}.modal-head h2{margin:0}
.modal-body{padding:15px}.modal-foot{display:flex;justify-content:flex-end;gap:7px;padding:11px 15px;border-top:1px solid var(--line);background:#fafafa}
.close-modal{border:0;background:transparent;font-size:20px;line-height:1;color:#777;cursor:pointer}
.form-grid{display:grid;grid-template-columns:150px 1fr;gap:12px 16px;align-items:center}.form-grid label{color:#666}.full{grid-column:1/-1}
.toast{position:fixed;right:18px;bottom:18px;background:#333;color:#fff;padding:10px 13px;border:1px solid #222;z-index:150;display:none}.toast.show{display:block}
.context-actions{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid label{padding-top:4px}}


/* Public SaaS pages — intentionally reuse the Adminer UI language */
.public-shell{min-height:100vh;background:var(--bg)}
.public-topbar{height:49px;border-bottom:1px solid var(--line);background:#fafafa;display:flex;align-items:center;padding:0 22px;gap:22px}
.public-topbar .brand{font-size:17px;font-weight:bold;color:#111;letter-spacing:-.5px}
.public-topbar .brand span{font-weight:normal}
.public-nav{display:flex;align-items:center;gap:2px}
.public-nav a{padding:7px 10px;color:#555;border-bottom:2px solid transparent}
.public-nav a:hover{background:#f0f0f0;text-decoration:none}
.public-right{margin-left:auto;display:flex;align-items:center;gap:7px}
.public-main{max-width:1120px;margin:auto;padding:0 22px}
.public-hero{padding:76px 0 62px;border-bottom:1px solid var(--line)}
.public-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:42px;align-items:center}
.public-kicker{font-size:11px;color:#777;text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}
.public-title{font-size:38px;line-height:1.12;font-weight:600;letter-spacing:-1.3px;margin:0 0 13px}
.public-lead{font-size:15px;color:#666;max-width:640px;margin:0 0 20px}
.public-actions{display:flex;gap:7px;flex-wrap:wrap}
.public-note{font-size:11px;color:#888;margin-top:10px}
.public-console{border:1px solid var(--line);background:#fff}
.public-console-head{height:38px;background:#fafafa;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 11px;gap:6px;font-size:11px;color:#777}
.public-console-body{padding:15px}
.public-code{font:12px/1.65 Consolas,Monaco,monospace;color:#444}
.public-line{height:8px;background:#ededed;margin:7px 0}.public-line.w1{width:72%}.public-line.w2{width:91%}.public-line.w3{width:55%}.public-line.w4{width:83%}
.public-section{padding:42px 0;border-bottom:1px solid var(--line)}
.public-section-head{margin-bottom:17px}
.public-section-head h2{font-size:19px;font-weight:600;margin:0 0 4px}
.public-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.public-card{border:1px solid var(--line);background:#fff;padding:16px}
.public-card h3{font-size:14px;margin:0 0 6px}.public-card p{color:#777;margin:0;font-size:12px}
.public-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.public-price{border:1px solid var(--line);background:#fff;padding:18px}.public-price.featured{border-color:#999}
.public-price .price{font-size:28px;font-weight:600;margin:9px 0}.public-price ul{margin:13px 0;padding-left:17px;color:#666;font-size:12px;line-height:2}
.public-footer{padding:24px 0 35px;color:#999;font-size:11px;display:flex;justify-content:space-between;gap:15px}
.public-auth{min-height:calc(100vh - 49px);display:grid;place-items:center;padding:35px 15px}
.auth-card{width:min(440px,100%);border:1px solid var(--line);background:#fff}
.auth-head{padding:19px 20px;border-bottom:1px solid var(--line);background:#fafafa}
.auth-head h1{font-size:20px;margin:0 0 4px}.auth-head p{margin:0;color:#777;font-size:12px}
.auth-body{padding:20px}.auth-form{display:grid;gap:13px}.auth-field{display:grid;gap:5px}.auth-field label{font-size:12px;color:#555}.auth-links{display:flex;justify-content:space-between;gap:10px;font-size:11px}.auth-submit{width:100%}
.auth-foot{padding:13px 20px;border-top:1px solid var(--line);background:#fafafa;text-align:center;font-size:11px;color:#777}
.check-row{display:flex;align-items:center;gap:7px;font-size:11px;color:#666}.check-row input{width:auto}
@media(max-width:800px){.public-hero-grid,.public-cards,.public-pricing{grid-template-columns:1fr}.public-title{font-size:31px}.public-nav{display:none}.public-main{padding:0 14px}.public-hero{padding:48px 0 40px}}