:root{
  --admin-primary:#2563eb;
  --admin-primary-dark:#1d4ed8;
  --admin-text:#172033;
  --admin-muted:#6f7c94;
  --admin-line:#e3e9f3;
  --admin-surface:#fff;
  --admin-bg:#f4f7fc;
  --admin-success:#15936a;
  --admin-danger:#dc4453;
}

.admin-body{min-height:100vh;background:radial-gradient(circle at 8% 0,#eaf1ff 0,transparent 29rem),var(--admin-bg)}
.topbar{height:70px;position:sticky;top:0;z-index:20;border-bottom-color:#e6ebf4;background:rgba(255,255,255,.94);box-shadow:0 8px 30px rgba(36,64,117,.05);backdrop-filter:blur(12px)}
.topbar>a{display:flex;align-items:center;min-width:0}
.brand-identity{display:inline-flex;align-items:center;gap:11px;color:var(--admin-text);font-weight:760;line-height:1.2}
.brand-identity img,.brand-identity i{width:38px;height:38px;flex:0 0 38px;border-radius:11px;object-fit:cover}
.brand-identity i{display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#3478f6,#1954d7);font-size:21px;font-style:normal;box-shadow:0 7px 18px rgba(37,99,235,.24)}
.brand-identity--header span{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar nav{gap:5px}
.topbar nav>a,.topbar nav button{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:8px;color:#5e6b82;font-size:14px;transition:.18s ease}
.topbar nav>a:hover,.topbar nav button:hover{color:var(--admin-primary);background:#eef4ff}
.admin-shell{padding-top:38px;padding-bottom:56px}
.page-heading{margin-bottom:25px}
.page-heading h1{font-size:28px;letter-spacing:-.02em}
.page-heading p{line-height:1.65}
.button,.primary{min-height:42px;border-radius:10px;background:linear-gradient(135deg,#3377f3,#215bd9);box-shadow:0 8px 18px rgba(37,99,235,.18);transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.button:hover,.primary:hover{color:#fff;background:linear-gradient(135deg,#286cf0,#174fc9);box-shadow:0 10px 23px rgba(37,99,235,.25);transform:translateY(-1px)}

.guide-list{gap:14px}
.guide-row-pro{grid-template-columns:minmax(0,1fr) 128px 228px;padding:22px 23px;border-color:var(--admin-line);border-radius:14px;box-shadow:0 9px 28px rgba(33,57,105,.045);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.guide-row-pro:hover{border-color:#cfd9eb;box-shadow:0 13px 34px rgba(33,57,105,.08);transform:translateY(-1px)}
.guide-name-line{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.guide-name-line h3{margin:0}
.status-badge{display:inline-flex;align-items:center;gap:5px;min-height:23px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.status-badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status-badge.is-enabled{color:#12805e;background:#e9f8f2}
.status-badge.is-disabled{color:#7a8497;background:#eef1f5}
.guide-row-pro .link-box code{max-height:56px;overflow:auto}
.guide-row-pro .link-box button{min-width:78px;font-weight:650;transition:.16s ease}
.guide-row-pro .link-box button:hover{background:#dfe9ff}
.guide-row-pro .metrics{justify-content:center}
.guide-row-pro .metrics span{min-width:48px}
.guide-row-pro .metrics b{font-size:19px}
.guide-name-line .copy-data-line{display:flex;align-items:center;gap:22px;margin-left:48px;position:relative;top:4px;color:#748097;font-size:12px;white-space:nowrap}
.guide-name-line .copy-data-line span{color:#748097}
.guide-name-line .copy-data-line strong{color:#344159;font-weight:750}
.guide-name-line .copy-data-line .inline-metric{padding-left:16px;border-left:1px solid #dfe5ef}
.qr-action{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;justify-self:center;width:118px;height:72px;gap:6px;border:1px solid #cbd9f0;border-radius:10px;background:linear-gradient(145deg,#f7faff,#edf4ff);color:#245bc5;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.17s ease}
.qr-action span{display:block;width:22px;height:22px;background:currentColor;line-height:1;font-size:0;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3zm2 2v4h4V5H5zm8-2h8v8h-8V3zm2 2v4h4V5h-4zM3 13h8v8H3v-8zm2 2v4h4v-4H5zm8-2h3v3h-3v-3zm4 0h4v3h-2v2h-2v-5zm-4 5h2v3h-2v-3zm3 1h2v2h-2v-2zm3-2h2v4h-2v-4z'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3zm2 2v4h4V5H5zm8-2h8v8h-8V3zm2 2v4h4V5h-4zM3 13h8v8H3v-8zm2 2v4h4v-4H5zm8-2h3v3h-3v-3zm4 0h4v3h-2v2h-2v-5zm-4 5h2v3h-2v-3zm3 1h2v2h-2v-2zm3-2h2v4h-2v-4z'/%3E%3C/svg%3E") center/contain no-repeat}
.qr-action:hover{border-color:#9fbaea;background:#eaf2ff;box-shadow:0 8px 18px rgba(37,99,235,.12);transform:translateY(-1px)}
.row-actions-pro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;font-size:13px}
.row-actions-pro a,.row-actions-pro button{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:34px;margin:0;padding:0 10px;border:1px solid #dfe6f1;border-radius:8px;background:#fff;color:#53627b;font:inherit;font-weight:650;cursor:pointer;transition:.16s ease}
.row-actions-pro a:hover,.row-actions-pro button:hover{border-color:#bed0ef;color:var(--admin-primary);background:#f5f8ff}
.row-actions-pro form{display:block;margin:0}
.row-actions-pro .status-action.is-start{border-color:#bde5d7;color:var(--admin-success);background:#f1fbf7}
.row-actions-pro .status-action.is-stop{color:#a26a17;background:#fffaf0;border-color:#f1ddba}
.row-actions-pro .delete-action{color:var(--admin-danger);border-color:#f1cbd0;background:#fff8f8}
.row-actions-pro .delete-action:hover{color:#c62f40;border-color:#eaaeb6;background:#fff1f2}

.guide-form section,.empty{border-color:var(--admin-line);border-radius:14px;box-shadow:0 9px 28px rgba(33,57,105,.04)}
.guide-form input:not([type=checkbox]),.guide-form textarea,.login input{border-color:#d8e0ed;border-radius:9px;outline:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.guide-form input:not([type=checkbox]):focus,.guide-form textarea:focus,.login input:focus{border-color:#70a0f3;box-shadow:0 0 0 3px rgba(37,99,235,.11);background:#fff}
.guide-form input[type=file]{padding:9px;background:#f9fbff}
.guide-form input[type=file]::file-selector-button{margin-right:12px;padding:7px 11px;border:0;border-radius:7px;background:#eaf1ff;color:#245bc5;font-weight:650;cursor:pointer}

.settings-shell{max-width:720px!important}
.settings-form section{padding:27px}
.settings-form section>h2{padding-bottom:17px;border-bottom:1px solid #edf0f5}
.logo-preview,.logo-placeholder{display:flex;align-items:center;gap:16px;min-height:92px;margin:0 0 22px;padding:15px;border:1px dashed #cbd7e9;border-radius:12px;background:#f8faff}
.logo-preview img{width:62px;height:62px;border:1px solid #e0e6f0;border-radius:15px;object-fit:cover;box-shadow:0 7px 20px rgba(31,55,100,.1)}
.logo-preview .checkbox{margin:0;color:#65718a}
.logo-placeholder{justify-content:center;color:#8a95a9;font-size:13px}

.login-pro{position:relative;overflow:hidden;background:radial-gradient(circle at 15% 18%,#dfeaff 0,transparent 26rem),radial-gradient(circle at 90% 85%,#dff6f1 0,transparent 22rem),#f5f8fd}
.login-pro:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(37,99,235,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.035) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent)}
.login-pro .login-card{position:relative;z-index:1;width:420px;padding:38px;border-radius:20px;border-color:#dfe6f1;box-shadow:0 24px 70px rgba(24,52,104,.12)}
.login-brand{padding-bottom:20px;border-bottom:1px solid #edf0f5}
.brand-identity--login img,.brand-identity--login i{width:46px;height:46px;flex-basis:46px;border-radius:13px}
.brand-identity--login{font-size:18px}
.login-pro h1{margin-top:25px}
.login-pro p{line-height:1.65}

.qr-modal[hidden]{display:none}
.qr-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.qr-modal-backdrop{position:absolute;inset:0;background:rgba(12,23,44,.56);backdrop-filter:blur(5px)}
.qr-dialog{position:relative;z-index:1;width:min(100%,430px);padding:28px;border:1px solid #dfe6f1;border-radius:20px;background:#fff;box-shadow:0 28px 80px rgba(11,26,54,.28);text-align:center;animation:qr-dialog-in .18s ease-out}
.qr-close{position:absolute;top:14px;right:15px;width:34px;height:34px;border:0;border-radius:9px;background:#f1f4f9;color:#69758b;font-size:24px;line-height:1;cursor:pointer}
.qr-heading{display:flex;align-items:center;gap:12px;padding-right:35px;text-align:left}
.qr-heading>span{display:grid;place-items:center;width:43px;height:43px;flex:0 0 43px;border-radius:12px;background:#eaf2ff;color:#2864e8;font-size:25px}
.qr-heading h2{margin:0 0 4px;font-size:19px}
.qr-heading p{margin:0;color:#7c879b;font-size:13px}
.qr-canvas-shell{display:grid;place-items:center;min-height:302px;margin:21px 0 13px;padding:10px;border:1px solid #e4e9f2;border-radius:15px;background:#f8faff;color:#c33;font-size:13px}
.qr-canvas-shell canvas{display:block;width:min(100%,280px);height:auto;border-radius:5px}
.qr-guide-name{display:block;margin:0 0 7px;color:#26334b;font-size:15px}
.qr-guide-url{display:block;overflow-wrap:anywhere;color:#758097;font-size:11px;line-height:1.6}
.qr-download{width:100%;margin-top:19px}
.qr-modal-open{overflow:hidden}
@keyframes qr-dialog-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .guide-row-pro{grid-template-columns:minmax(0,1fr) 128px}
  .guide-row-pro .row-actions-pro{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
  .topbar{height:62px}
  .brand-identity--header img,.brand-identity--header i{width:34px;height:34px;flex-basis:34px}
  .brand-identity--header span{max-width:145px}
  .topbar nav{gap:2px}
  .topbar nav a{display:none}
  .topbar nav a[href="/admin/settings"]{display:inline-flex}
  .topbar nav button{padding:0 8px}
  .admin-shell{padding-top:26px;padding-bottom:40px}
  .page-heading h1{font-size:24px}
  .guide-row-pro{grid-template-columns:1fr;padding:18px;gap:16px}
  .guide-row-pro .metrics{justify-content:flex-start}
  .guide-name-line{flex-wrap:wrap}
  .guide-name-line .copy-data-line{width:100%;margin:6px 0 0;top:0;gap:14px;white-space:normal}
  .guide-row-pro .row-actions-pro{grid-column:auto;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .qr-action{width:112px;height:52px;flex-direction:row}
  .settings-form section{padding:20px}
}
@media(max-width:430px){
  .login-pro .login-card{padding:28px 23px}
  .brand-identity--login span{font-size:16px}
}