*{box-sizing:border-box}
html{min-height:100%;background:#f3f4f6}
body{min-height:100vh;margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f4f6;color:#202124;line-height:1.45;display:flex;flex-direction:column}
a{color:#202124}
.container{width:min(1180px,94%);margin:0 auto}
.topbar{position:relative;z-index:1000;background:#202124;color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.18)}
.topbar-inner{min-height:64px;display:grid;grid-template-columns:48px minmax(0,1fr) 150px;align-items:center;gap:12px}
.topbar-title{justify-self:center;color:#fff;text-decoration:none;font-weight:700;font-size:1.15rem;letter-spacing:.01em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.topbar-logo{justify-self:end;display:flex;align-items:center;justify-content:flex-end;width:150px;height:52px}
.topbar-logo img{display:block;width:auto;max-width:150px;max-height:46px;height:auto;object-fit:contain}
.topbar-spacer{display:block;width:48px;height:1px}
.nav-toggle,.nav-close{appearance:none;border:0;font:inherit;cursor:pointer}
.nav-toggle{width:42px;height:42px;padding:9px;border-radius:7px;background:transparent;display:flex;flex-direction:column;justify-content:center;gap:5px}
.nav-toggle:hover,.nav-toggle:focus-visible{background:rgba(255,255,255,.12);outline:none}
.nav-toggle span{display:block;width:24px;height:2px;border-radius:2px;background:#fff;margin:0 auto}
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:1001}
.flyout-nav{position:fixed;top:0;left:0;width:min(360px,88vw);height:100vh;background:#fff;color:#202124;z-index:1002;box-shadow:6px 0 24px rgba(0,0,0,.22);overflow-y:auto}
.flyout-nav-inner{padding:18px 16px 24px}
.flyout-nav-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 16px;border-bottom:1px solid #ddd}
.flyout-nav-header strong{font-size:1.05rem}
.nav-close{width:38px;height:38px;border-radius:7px;background:transparent;font-size:2rem;line-height:1;color:#555}
.nav-close:hover,.nav-close:focus-visible{background:#f1f1f1;outline:none}
.flyout-nav-list{list-style:none;margin:12px 0 0;padding:0}
.flyout-nav-list li{margin:0}
.flyout-nav-list a{display:block;padding:13px 12px;border-radius:7px;text-decoration:none;font-weight:600}
.flyout-nav-list a:hover,.flyout-nav-list a:focus-visible{background:#f1f1f1;outline:none}
.flyout-nav-list a.is-active{background:#e7e7e7}
.flyout-divider{height:1px;background:#ddd;margin:12px 0}
body.nav-open{overflow:hidden}
.main-content{width:min(1180px,94%);padding:24px 0 50px;flex:1}
.footer{background:#e5e7eb;padding:11px 0;color:#555;font-size:.88rem;margin-top:auto}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.footer-company,.footer-user{display:flex;align-items:center;gap:7px;min-width:0}
.footer-user{margin-left:auto}
.footer a{color:#444}
.footer-separator{color:#999}
.card{background:#fff;border:1px solid #ddd;border-radius:10px;padding:22px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.narrow{max-width:620px;margin:30px auto}
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.form-row{margin-bottom:15px}
.form-row label{display:block;font-weight:700;margin-bottom:6px}
input[type=text],input[type=email],input[type=password],select,textarea{width:100%;padding:10px;border:1px solid #bbb;border-radius:6px;font:inherit;background:#fff}
textarea{resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 2fr;gap:15px}
.btn{display:inline-block;background:#202124;color:#fff;border:0;border-radius:6px;padding:10px 15px;text-decoration:none;cursor:pointer;font:inherit}
.btn:hover{opacity:.88}.btn-secondary{background:#6b7280}.btn-danger{background:#a33}.btn-small{padding:6px 9px;font-size:.88rem}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#e5e7eb;font-size:.8rem}
.small{font-size:.88rem;color:#666}.alert{padding:12px 14px;border-radius:7px;margin:12px 0}.alert-success{background:#e8f5e9;border:1px solid #a5d6a7}.alert-error{background:#ffebee;border:1px solid #ef9a9a}
.password-field{display:flex;gap:8px}.password-field input{flex:1}.password-toggle{width:48px;border:1px solid #bbb;background:#fff;border-radius:6px;cursor:pointer;font-size:1.1rem}
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid #ddd;vertical-align:top}
.actions{display:flex;gap:6px;flex-wrap:wrap}.inline-form{display:inline;margin:0}
.sortable-list{list-style:none;padding:0;margin:10px 0}.sortable-item{display:flex;align-items:center;gap:10px;background:#fafafa;border:1px solid #d7d7d7;border-radius:7px;padding:10px;margin-bottom:7px;min-height:48px}.sortable-item strong{flex:1}.drag-handle{cursor:grab;font-size:1.3rem;color:#777;user-select:none}.sortable-placeholder{height:48px;border:2px dashed #999;border-radius:7px;margin-bottom:7px;background:#f1f1f1}.item-action{margin-left:auto}.rule-sort-group{margin-bottom:24px}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}.check-card{display:block;border:1px solid #ddd;border-radius:7px;padding:12px;background:#fafafa}.check-card input{margin-right:7px}.check-card .small{display:block;margin-left:24px;margin-top:4px}
@media(max-width:700px){
    .topbar-inner{min-height:48px;grid-template-columns:40px minmax(0,1fr) 82px;gap:6px}
    .topbar-title{font-size:.72rem;letter-spacing:0}
    .topbar-logo{width:82px;height:42px}
    .topbar-logo img{max-width:76px;max-height:34px}
    .nav-toggle{width:38px;height:38px;padding:7px}
    .nav-toggle span{width:22px}
    .main-content{padding-top:16px}
    .form-grid{grid-template-columns:1fr}
    .sortable-item{align-items:flex-start;flex-wrap:wrap}
    .item-action{margin-left:0}
    .actions{min-width:220px}
    .footer-inner{align-items:flex-start;flex-direction:column;gap:4px}
    .footer-user{margin-left:0}
}
@media(max-width:420px){
    .container{width:calc(100% - 20px)}
    .topbar-inner{grid-template-columns:38px minmax(0,1fr) 68px}
    .topbar-logo{width:68px}
    .topbar-logo img{max-width:62px;max-height:30px}
    .topbar-title{font-size:.66rem}
    .flyout-nav{width:90vw}
}