:root{
  --bg:#eef3f8;
  --panel:#ffffff;
  --panel-soft:#f8fbff;
  --border:#d7e1ee;
  --text:#1f2f43;
  --muted:#6f7f93;
  --nav:#233c56;
  --nav-deep:#20364e;
  --nav-active:#2f4b68;
  --nav-sub:#213852;
  --nav-sub-active:#2f93d8;
  --blue:#2f87f5;
  --blue-deep:#2576df;
  --shadow:0 16px 38px rgba(24,45,77,.08);
  --radius:8px;
  --sidebar-width:190px;
  --sidebar-collapsed-width:68px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Arial,"Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
button,input{font:inherit}

.auth-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35)),
    var(--bg);
}
.auth-card{
  width:min(360px, calc(100vw - 48px));
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border:1px solid #dbe6f3;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:30px 26px 32px;
}
.auth-mark,
.brand-mark{
  background-image:url("/static/cloudview-logo.svg");
  background-repeat:no-repeat;
  background-position:center;
}
.auth-mark{
  width:64px;
  height:64px;
  margin:0 auto 20px;
  border-radius:18px;
  background-color:#f6fbff;
  background-size:52px auto;
  border:1px solid #d8e5f4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 24px rgba(47,135,245,.08);
}
.auth-mark-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.auth-mark-configured{
  background-image:none;
}
.brand-mark{
  width:56px;height:56px;
  border-radius:16px;
  background-color:#fff;
  background-size:48px 48px;
  border:1px solid #dce8f8;
}
.auth-title{
  margin:0;
  text-align:center;
  font-size:23px;
  font-weight:800;
  color:#183253;
}
.auth-subtitle{
  margin:8px 0 22px;
  text-align:center;
  color:#59708d;
  font-size:14px;
}
.auth-form{display:grid;gap:14px}
.captcha-row{
  display:grid;
  grid-template-columns:1fr 120px;
  gap:10px;
  align-items:center;
}
.captcha-image{
  height:42px;
  padding:0;
  border:1px solid #c9d7ea;
  border-radius:4px;
  background:#f7fbff;
  cursor:pointer;
  overflow:hidden;
}
.captcha-image img{
  display:block;
  width:100%;
  height:100%;
}
.field{
  width:100%;
  height:44px;
  border:1px solid #c9d7ea;
  border-radius:4px;
  padding:0 14px;
  background:#edf3ff;
  color:#18273a;
  outline:none;
}
.field:focus{
  border-color:#8fb5ef;
  box-shadow:0 0 0 3px rgba(47,135,245,.12);
}
.primary-btn{
  height:42px;
  border:0;
  border-radius:4px;
  background:linear-gradient(180deg, var(--blue), var(--blue-deep));
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.auth-foot{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:var(--muted);
}
.auth-foot a{color:#2d6cd3}
.error{
  margin:0 0 8px;
  color:#d64545;
  font-size:13px;
}

.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:var(--sidebar-width) 1fr;
  background:var(--bg);
  transition:grid-template-columns .24s ease;
}
.app-sidebar{
  background:var(--nav);
  color:#fff;
  min-height:100vh;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03);
  overflow:hidden;
  transition:width .24s ease;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px 15px;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:gap .2s ease, padding .2s ease;
}
.brand-mark{
  width:42px;height:42px;
  border-radius:12px;
  background-color:rgba(255,255,255,.96);
  background-size:36px 36px;
  border-color:rgba(255,255,255,.22);
  flex:0 0 42px;
  transition:width .2s ease, height .2s ease, background-size .2s ease;
}
.brand-copy{
  display:flex;
  flex-direction:column;
  gap:1px;
  line-height:1.1;
  min-width:0;
  overflow:hidden;
  opacity:1;
  transition:opacity .18s ease, transform .2s ease, width .2s ease;
}
.brand-copy strong{font-size:15px;letter-spacing:0;font-weight:800}
.brand-copy span{font-size:11px;color:rgba(255,255,255,.78)}
.sidebar-nav{padding:0}
.nav-section{
  padding:16px 18px 8px;
  font-size:12px;
  color:rgba(255,255,255,.55);
  letter-spacing:0;
}
.nav-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:45px;
  padding:0 18px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.95);
  font-size:14px;
  font-weight:700;
  text-align:left;
  position:relative;
  appearance:none;
  transition:background .18s ease, padding .22s ease, gap .22s ease;
}
.nav-link:hover,
.nav-link.is-active{
  background:var(--nav-active);
}
.nav-placeholder{
  cursor:default;
}
.nav-link::before{
  content:'';
  width:16px;
  height:16px;
  flex:0 0 16px;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  opacity:.95;
}
.nav-link span.label{
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  opacity:1;
  transition:opacity .16s ease, width .2s ease;
}
.nav-link em{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  flex:0 0 16px;
  font-style:normal;
  color:rgba(255,255,255,.55);
  font-weight:600;
  transition:opacity .16s ease, width .2s ease;
}
.nav-group{
  margin-top:0;
}
.nav-group > .nav-link{
  cursor:pointer;
}
.nav-group.is-open > .nav-link,
.nav-group > .nav-link:hover{
  background:var(--nav-active);
}
.nav-group > .nav-link em::before{
  content:'';
  width:7px;
  height:7px;
  border-top:2px solid rgba(255,255,255,.9);
  border-right:2px solid rgba(255,255,255,.9);
  transform:rotate(45deg);
  transition:transform .16s ease;
}
.nav-group.is-open > .nav-link em::before{
  transform:rotate(135deg);
}
.sub-nav{
  display:none;
  padding:0;
  background:var(--nav-sub);
  overflow:hidden;
}
.nav-group.is-open > .sub-nav{
  display:block;
}
.sub-nav-link{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:0 18px 0 42px;
  color:rgba(255,255,255,.9);
  font-size:13px;
  font-weight:700;
}
.sub-nav-link:hover,
.sub-nav-link.is-active{
  background:var(--nav-sub-active);
  color:#fff;
}
.sub-nav-link.nav-placeholder:hover{
  background:transparent;
  color:rgba(255,255,255,.9);
}
.nav-dashboard::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 19V9'/%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M19 19v-8'/%3E%3C/svg%3E");
}
.nav-tasks::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='6' height='6' rx='1'/%3E%3Crect x='14' y='5' width='6' height='6' rx='1'/%3E%3Crect x='4' y='15' width='6' height='4' rx='1'/%3E%3Crect x='14' y='13' width='6' height='6' rx='1'/%3E%3C/svg%3E");
}
.nav-users::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9.5' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9'/%3E%3Cpath d='M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
}
.nav-products::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5 12 4l8 4.5-8 4.5-8-4.5Z'/%3E%3Cpath d='M4 8.5v7L12 20l8-4.5v-7'/%3E%3Cpath d='M12 13v7'/%3E%3C/svg%3E");
}
.nav-notify::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 17H5c1.5-1.7 2-3.6 2-6a5 5 0 0 1 10 0c0 2.4.5 4.3 2 6h-2'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
}
.nav-logs::before,
.nav-logs-group .nav-link::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h7l4 4v12H7z'/%3E%3Cpath d='M14 4v5h5'/%3E%3Cpath d='M10 13h6'/%3E%3Cpath d='M10 17h4'/%3E%3C/svg%3E");
}
.nav-system::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a8 8 0 0 0 .1-6l-2 1a7 7 0 0 0-1.4-1.4l1-2a8 8 0 0 0-6-.1l-.6 2.1a7 7 0 0 0-2 0L7 6.5a8 8 0 0 0-4.4 4.4l2 1a7 7 0 0 0 0 2l-2 1A8 8 0 0 0 7 19.4l1-2a7 7 0 0 0 2 0l.6 2.1a8 8 0 0 0 6-.1l-1-2a7 7 0 0 0 1.4-1.4z'/%3E%3C/svg%3E");
}
.app-shell.is-sidebar-collapsed{
  grid-template-columns:var(--sidebar-collapsed-width) 1fr;
}
.app-shell.is-sidebar-collapsed .brand{
  justify-content:center;
  gap:0;
  padding:14px 0 15px;
}
.app-shell.is-sidebar-collapsed .brand-mark{
  width:40px;
  height:40px;
  flex-basis:40px;
  background-size:34px 34px;
}
.app-shell.is-sidebar-collapsed .brand-copy{
  width:0;
  opacity:0;
  transform:translateX(-8px);
  pointer-events:none;
}
.app-shell.is-sidebar-collapsed .nav-section{
  height:8px;
  padding:0;
  opacity:0;
  overflow:hidden;
}
.app-shell.is-sidebar-collapsed .nav-link{
  justify-content:center;
  gap:0;
  padding:0;
}
.app-shell.is-sidebar-collapsed .nav-link::before{
  margin:0;
}
.app-shell.is-sidebar-collapsed .nav-link span.label{
  width:0;
  flex:0 0 0;
  opacity:0;
}
.app-shell.is-sidebar-collapsed .nav-link em{
  width:0;
  flex-basis:0;
  opacity:0;
  overflow:hidden;
}
.app-shell.is-sidebar-collapsed .sub-nav{
  display:none!important;
}

.app-main{min-width:0;display:flex;flex-direction:column}
.topbar{
  height:56px;
  background:#fff;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
}
.topbar-left,
.topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.topbar-title{
  font-size:15px;
  font-weight:700;
  color:#1b2d43;
  white-space:nowrap;
}
.icon-btn{
  width:30px;height:30px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#2f425b;
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  font-size:18px;
}
.sidebar-toggle{
  transition:background .18s ease, transform .2s ease, color .18s ease;
}
.sidebar-toggle.is-active{
  background:#eef5fd;
  color:#1f6fdd;
}
.sidebar-toggle.is-active{
  transform:rotate(180deg);
}
.user-chip{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid transparent;
  background:transparent;
  color:#2b3d54;
  font-size:13px;
  min-height:36px;
  padding:3px 9px 3px 4px;
  border-radius:6px;
  cursor:pointer;
  appearance:none;
}
.user-avatar{
  width:30px;height:30px;border-radius:8px;
  background:var(--blue);
  color:#fff;font-weight:800;
  display:inline-grid;place-items:center;
}
.account-menu{
  position:relative;
}
.account-name{
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.account-menu.is-open .user-chip,
.user-chip:hover{
  background:#f5f9fe;
  border-color:#dce7f3;
}
.account-caret{
  color:#6d8096;
  font-size:13px;
  line-height:1;
}
.account-menu.is-open .account-caret{
  transform:rotate(180deg);
}
.account-dropdown{
  display:none;
  position:absolute;
  right:0;
  top:43px;
  z-index:30;
  min-width:136px;
  padding:6px;
  background:#fff;
  border:1px solid #dce6f2;
  border-radius:4px;
  box-shadow:0 12px 28px rgba(31,53,81,.14);
}
.account-menu.is-open .account-dropdown{
  display:block;
}
.account-dropdown::before{
  content:'';
  position:absolute;
  right:22px;
  top:-6px;
  width:10px;
  height:10px;
  background:#fff;
  border-left:1px solid #dce6f2;
  border-top:1px solid #dce6f2;
  transform:rotate(45deg);
}
.refresh-menu{
  position:relative;
}
.refresh-dropdown{
  display:none;
  position:absolute;
  right:0;
  top:43px;
  z-index:30;
  min-width:150px;
  padding:6px;
  background:#fff;
  border:1px solid #dce6f2;
  border-radius:4px;
  box-shadow:0 12px 28px rgba(31,53,81,.14);
}
.refresh-menu.is-open .refresh-dropdown{
  display:block;
}
.refresh-dropdown::before{
  content:'';
  position:absolute;
  right:14px;
  top:-6px;
  width:10px;
  height:10px;
  background:#fff;
  border-left:1px solid #dce6f2;
  border-top:1px solid #dce6f2;
  transform:rotate(45deg);
}
.refresh-action{
  display:flex;
  align-items:center;
  width:100%;
  min-height:34px;
  padding:0 10px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#29435f;
  font-size:13px;
  white-space:nowrap;
  cursor:pointer;
  appearance:none;
}
.refresh-action:hover{
  background:#f5f9fe;
}
.refresh-action + .refresh-action{
  border-top:1px solid #edf2f8;
  border-radius:0 0 4px 4px;
}
.refresh-action:first-child{
  border-radius:4px 4px 0 0;
}

.account-action,
.account-logout{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-height:34px;
  padding:0 10px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#29435f;
  font-size:13px;
  white-space:nowrap;
  cursor:pointer;
  appearance:none;
}
.account-action{
  border-bottom:1px solid #edf2f8;
  border-radius:4px 4px 0 0;
  margin-bottom:4px;
}
.account-action:hover,
.account-logout:hover{
  background:#f1f6fd;
  color:#1f6fdd;
}
/* ====== unified modals ====== */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:modalFadeIn .18s ease;
}
@keyframes modalFadeIn{
  from{opacity:0}
  to{opacity:1}
}
.modal-backdrop[hidden]{
  display:none;
}
/* shared modal shell */
.profile-modal,
.platform-account-modal,
.member-edit-modal,
.level-create-modal,
.login-notice-modal,
.menu-edit-modal{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.04);
  overflow:hidden;
  animation:modalSlideUp .22s cubic-bezier(.16,1,.3,1);
  max-height:calc(100vh - 40px);
  display:flex;
  flex-direction:column;
}
@keyframes modalSlideUp{
  from{opacity:.6;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.profile-modal{width:min(440px, calc(100vw - 40px))}
.platform-account-modal{width:min(480px, calc(100vw - 40px))}
.member-edit-modal{width:min(580px, calc(100vw - 40px))}
.level-create-modal{width:min(580px, calc(100vw - 40px))}
.login-notice-modal{width:min(680px, calc(100vw - 40px))}
.menu-edit-modal{width:min(680px, calc(100vw - 40px))}
/* header */
.profile-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 24px 0;
}
.profile-modal-head h2{
  margin:0;
  color:#0f172a;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.01em;
}
.profile-modal-head span{
  display:block;
  margin-top:2px;
  color:#94a3b8;
  font-size:12px;
  font-weight:400;
}
.modal-close{
  flex-shrink:0;
  width:28px;
  height:28px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#94a3b8;
  font-size:18px;
  line-height:28px;
  cursor:pointer;
  appearance:none;
  transition:background .15s, color .15s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-close:hover{
  background:#f1f5f9;
  color:#475569;
}
/* body / form area */
.profile-form,
.platform-account-form,
.member-edit-form,
.menu-edit-form,
.login-notice-form,
.level-create-form{
  padding:20px 24px 20px;
  overflow-y:auto;
}
.profile-form{display:grid;gap:14px}
.profile-form .field[readonly]{
  background:#f8fafc;
  color:#64748b;
}
/* action buttons */
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:8px 0 0;
}
.action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 16px;
  border:1px solid #e2e8f0;
  border-radius:7px;
  background:#fff;
  color:#334155;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
}
.action-btn:hover{
  background:#f8fafc;
  border-color:#cbd5e1;
}
.action-btn.primary{
  background:#1677ff;
  border-color:#1677ff;
  color:#fff;
}
.action-btn.primary:hover{
  background:#0958d9;
  border-color:#0958d9;
}
.action-btn.danger{
  background:#ef4444;
  border-color:#ef4444;
  color:#fff;
}
.action-btn.danger:hover{
  background:#dc2626;
  border-color:#dc2626;
}
.config-toast{
  position:fixed;
  left:50%;
  top:96px;
  z-index:120;
  display:grid;
  grid-template-columns:18px minmax(0, 1fr);
  align-items:start;
  gap:10px;
  padding:12px 18px;
  border:1px solid #d7e9c8;
  border-radius:4px;
  background:#f4fbef;
  color:#3f6b2d;
  box-shadow:0 8px 20px rgba(118,156,84,.12);
  width:720px;
  max-width:calc(100vw - 32px);
  white-space:normal;
  opacity:1;
  transition:opacity .22s ease, transform .22s ease;
  transform:translate(-50%, 0);
}
.config-toast.is-error{
  grid-template-columns:18px minmax(0, 1fr) auto;
}
.config-toast.is-success{
  border-color:#d7e9c8;
  background:#f4fbef;
}
.config-toast.is-error{
  border-color:#f0caca;
  background:#fff4f4;
  color:#a53d3d;
}
.config-toast.is-hiding{
  opacity:0;
  transform:translate(-50%, -8px);
}
.config-toast-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#7bbb5b;
  color:#fff;
  font-size:12px;
  font-weight:700;
  flex:0 0 auto;
}
.config-toast.is-error .config-toast-icon{
  background:#d56a6a;
}
.config-toast-text{
  font-size:15px;
  font-weight:500;
  line-height:1.55;
  word-break:break-word;
  overflow-wrap:anywhere;
  max-height:120px;
  overflow-y:auto;
  padding-right:4px;
}
.config-toast-actions{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  flex:0 0 auto;
  white-space:nowrap;
}
.config-toast-action{
  height:26px;
  padding:0 9px;
  border:1px solid rgba(165,61,61,.24);
  border-radius:4px;
  background:#fff;
  color:#a53d3d;
  cursor:pointer;
  font-size:12px;
}
.config-toast-action:hover{
  background:#fff8f8;
  border-color:rgba(165,61,61,.45);
}
.grab-floating-btn{
  position:fixed!important;
  left:82px;
  top:430px;
  z-index:120;
  width:58px;
  height:58px;
  border:2px solid #fff;
  border-radius:50%;
  background:#1f9bff;
  color:#fff;
  display:grid!important;
  place-items:center;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  cursor:grab;
  touch-action:none;
  user-select:none;
  transition:background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.grab-floating-btn:hover{
  background:#1677ff;
  box-shadow:0 14px 30px rgba(22,119,255,.26);
}
.grab-floating-btn:active,
.grab-floating-btn.is-dragging{
  cursor:grabbing;
  transform:scale(.98);
}
.grab-floating-btn span{
  width:24px;
  height:21px;
  border:2px solid currentColor;
  border-radius:5px;
  position:relative;
}
.grab-floating-btn span::after{
  content:'';
  position:absolute;
  left:4px;
  bottom:-7px;
  width:8px;
  height:8px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  background:#1f9bff;
  transform:skewY(-35deg);
}
.app-sidebar{
  position:relative;
}
.grab-log-backdrop{
  position:fixed;
  inset:0;
  z-index:90;
  background:transparent;
  pointer-events:none;
}
.grab-log-backdrop[hidden]{
  display:none;
}
.grab-log-modal{
  position:absolute;
  left:20px;
  top:12px;
  width:min(500px, calc(100vw - 70px));
  height:548px;
  max-height:calc(100vh - 28px);
  background:#fff;
  border-radius:6px;
  border:1px solid #e4e8ef;
  box-shadow:0 16px 36px rgba(0,0,0,.16);
  overflow:hidden;
  touch-action:none;
  pointer-events:auto;
}
.grab-log-head{
  height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px 0 16px;
  border-bottom:1px solid #e6eaf0;
  background:#f8fafc;
  cursor:move;
  user-select:none;
}
.grab-log-head h2{
  margin:0;
  color:#1f2937;
  font-size:16px;
  font-weight:700;
}
.grab-log-tools{
  display:flex;
  align-items:center;
  gap:8px;
}
.grab-log-tool{
  width:24px;
  height:24px;
  border:1px solid #cfd6df;
  border-radius:4px;
  background:#fff;
  color:#303844;
  display:grid;
  place-items:center;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.grab-log-tool:hover{
  border-color:#9fb6d4;
  color:#1677ff;
  background:#f7fbff;
}
.grab-log-body{
  height:calc(100% - 48px);
  overflow:auto;
  padding:8px 16px 18px;
  background:#fff;
}
.grab-log-empty{
  padding-top:28px;
  color:#4b5563;
  font-size:13px;
  font-style:italic;
  text-align:center;
}
.grab-log-line{
  padding:9px 0;
  border-bottom:1px solid #edf0f4;
  color:#111827;
  font-family:"Microsoft YaHei", Arial, sans-serif;
  font-size:13px;
  line-height:1.65;
  word-break:break-all;
}
.grab-log-line.is-error{
  color:#d4380d;
}
.grab-log-line.is-success{
  color:#148a43;
}
.grab-log-line.is-warn{
  color:#ad6800;
}
.page-tabs-shell{
  min-height:37px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 16px;
  background:#f8fbff;
  border-bottom:1px solid var(--border);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.72);
}
.tabs-home{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:28px;
  color:#6d83a0;
  font-size:13px;
  flex:0 0 auto;
}
.page-tabs{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:thin;
}
.page-tab{
  display:inline-flex;
  align-items:center;
  min-width:0;
  height:28px;
  border:1px solid #cbdced;
  border-radius:4px;
  background:#fff;
  color:#31506e;
  overflow:hidden;
  flex:0 0 auto;
}
.page-tab.is-active{
  background:#213c5a;
  border-color:#213c5a;
  color:#fff;
}
.page-tab-link{
  display:flex;
  align-items:center;
  height:100%;
  max-width:150px;
  padding:0 10px;
  color:inherit;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.page-tab-close{
  width:24px;
  height:100%;
  border:0;
  border-left:1px solid rgba(49,80,110,.12);
  background:transparent;
  color:inherit;
  cursor:pointer;
  line-height:1;
  appearance:none;
}
.page-tab-close:hover{
  background:rgba(47,135,245,.12);
}
.page-tab.is-active .page-tab-close{
  border-left-color:rgba(255,255,255,.16);
}
.page-tab.is-active .page-tab-close:hover{
  background:rgba(255,255,255,.12);
}
.content{
  padding:12px 12px 18px;
}
.page-crumb{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.page-crumb .pill{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  border-radius:4px;
  background:#21344b;
  color:#fff;
  font-size:13px;
  font-weight:700;
}
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.page-head h1{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#1f3247;
}
.page-desc{display:none}
.action-row{display:flex;gap:10px;flex-wrap:wrap}
.action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 14px;
  border-radius:4px;
  border:1px solid var(--border);
  background:#fff;
  color:#27445f;
  font-size:13px;
  font-weight:700;
}
.action-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.action-btn.danger{background:#dc4f4f;border-color:#dc4f4f;color:#fff}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:12px;
}
.metric-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:4px;
  min-height:96px;
  padding:20px 16px 14px;
}
.metric-num{
  font-size:26px;
  line-height:1;
  font-weight:800;
  color:#1f3551;
}
.metric-label{
  margin-top:10px;
  font-size:14px;
  color:#607892;
}
.panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:4px;
}
.table-page-panel{
  padding-bottom:0;
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border-bottom:1px solid #e8eef5;
}
.panel-head h2{
  margin:0;
  font-size:15px;
  color:#22384f;
}
.panel-body{padding:0 14px 14px}
.table-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-bottom:1px solid #e8eef5;
}
.toolbar-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.round-tool-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:1px solid #d7e1ee;
  border-radius:20px;
  background:#fff;
  color:#44607f;
  font-size:18px;
}
.toolbar-search{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.toolbar-select,
.toolbar-input{
  height:38px;
  border:1px solid #d7e1ee;
  border-radius:4px;
  background:#fff;
  color:#1d2c41;
  padding:0 12px;
}
.toolbar-select{
  min-width:118px;
}
.toolbar-input{
  width:min(280px, 40vw);
}
.toolbar-submit{
  height:38px;
  padding:0 16px;
  border:0;
  border-radius:4px;
  background:var(--blue);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.table-pagination{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  padding:12px 14px 16px;
}
.pager-total,
.pager-size{
  color:#22384f;
  font-size:13px;
}
.pager-current{
  min-width:24px;
  text-align:center;
  color:#1f6fdd;
  font-weight:700;
}
.pager-size-menu{
  position:relative;
}
.pager-size-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:112px;
  height:34px;
  padding:0 12px;
  border:1px solid #8eb6ff;
  border-radius:4px;
  background:#fff;
  color:#5b6d86;
  cursor:pointer;
}
.pager-size-label{
  white-space:nowrap;
}
.pager-size-caret{
  display:inline-block;
  color:#8a97a8;
  font-size:14px;
  transform:translateY(-1px);
}
.pager-size-menu.is-open .pager-size-caret{
  transform:rotate(180deg) translateY(1px);
}
.pager-size-dropdown{
  position:absolute;
  right:0;
  bottom:calc(100% + 6px);
  min-width:112px;
  padding:6px 0;
  border:1px solid #dfe8f6;
  border-radius:4px;
  background:#fff;
  box-shadow:0 8px 24px rgba(37, 63, 97, .12);
  z-index:20;
}
.pager-size-option{
  display:block;
  padding:8px 14px;
  color:#5d6f88;
}
.pager-size-option.is-active,
.pager-size-option:hover{
  background:#eef5ff;
  color:#1f6fdd;
  font-weight:700;
}
.pager-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:4px;
  color:#8a97a8;
  font-size:18px;
}
.pager-arrow.is-disabled{
  opacity:.45;
  pointer-events:none;
}
.table-link-btn{
  border:0;
  background:transparent;
  color:#1f6fdd;
  cursor:pointer;
  padding:0;
}
.table-link-btn.danger{
  color:#cb3d3d;
}
.collection-search-shell{
  margin:0;
  padding:14px 16px;
  background:#fff!important;
  border:0;
  border-bottom:1px solid #e8eef5;
  border-radius:0;
  box-shadow:none;
}
.collection-panel-search{
  display:block;
  overflow:visible;
}
.collection-filter-form{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:nowrap;
}
.collection-toolbar-refresh{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border:1px solid #d7e5f7;
  border-radius:50%;
  background:#fff;
  color:#1f6fdd;
  font-size:24px;
  flex:0 0 46px;
  box-shadow:0 2px 8px rgba(31,111,221,.06);
}
.collection-search-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin-left:auto;
  min-width:0;
}
.collection-inline-field{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#10284a;
  font-size:14px;
  white-space:nowrap;
}
.collection-filter-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#0f1724;
  font-size:13px;
  font-weight:700;
}
.collection-input,
.collection-select{
  height:42px;
  border:1px solid #cfdced;
  border-radius:4px;
  background:#fff;
  color:#1b2d43;
  padding:0 11px;
  outline:0;
}
.collection-input{
  width:280px;
}
.collection-select{
  width:118px;
}
.collection-sort-select{
  width:198px;
}
.collection-status-select{
  width:118px;
}
.collection-keyword-input{
  width:280px;
}
.collection-name-input{
  width:240px;
}
.collection-issuer-select{
  width:150px;
}
.collection-platform-select{
  width:110px;
}
.collection-sort-select{
  width:150px;
}
.collection-input:focus,
.collection-select:focus{
  border-color:#8fb5ef;
  box-shadow:0 0 0 2px rgba(47,135,245,.12);
}
.collection-query-btn,
.collection-reset-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:42px;
  padding:0 22px;
  border-radius:4px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.collection-query-btn{
  border:1px solid #1677ff;
  background:#1677ff;
  color:#fff;
  min-width:72px;
}
.collection-reset-btn{
  border:1px solid #d7dce3;
  background:#fff;
  color:#1f2f43;
}
.collection-search-icon{
  width:14px;
  height:14px;
  border:2px solid currentColor;
  border-radius:50%;
  position:relative;
}
.collection-search-icon::after{
  content:'';
  position:absolute;
  right:-5px;
  bottom:-4px;
  width:6px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transform:rotate(45deg);
}
.collection-reset-icon{
  width:14px;
  height:14px;
  border:1.8px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  position:relative;
}
.collection-reset-icon::after{
  content:'';
  position:absolute;
  right:-1px;
  top:0;
  width:5px;
  height:5px;
  border-top:1.8px solid currentColor;
  border-right:1.8px solid currentColor;
  transform:rotate(15deg);
}
.collection-panel{
  overflow:hidden;
  box-shadow:0 1px 4px rgba(31,53,81,.05);
}
.collection-page-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
}
.collection-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:58px;
  padding:12px 12px 8px;
}
.collection-tip{
  margin:0;
  color:#ff1717;
  font-size:13px;
  font-weight:700;
}
.collection-error{
  margin:0 12px 10px;
  padding:9px 12px;
  border:1px solid #f3c7c7;
  border-radius:4px;
  background:#fff5f5;
  color:#b73737;
  font-size:13px;
}
.collection-panel-tools{
  display:flex;
  align-items:center;
  gap:7px;
}
.collection-tool-btn{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  border:0;
  background:transparent;
  color:#111827;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.collection-table-scroll{
  margin:0;
  height:auto;
  min-height:212px;
  overflow:auto;
  border:0;
  border-radius:0;
}
.collection-table th,
.collection-table td{
  padding:8px 10px;
}
.collection-table th{
  color:#5d7290;
  background:#fbfcfe;
  border-right:0;
}
.collection-table th:last-child,
.collection-table td:last-child{
  border-right:0;
}
.collection-table td{
  border-right:0;
}
.collection-table td .collection-thumb,
.collection-thumb{
  display:block;
  width:36px!important;
  height:36px!important;
  max-width:36px!important;
  max-height:36px!important;
  object-fit:cover;
  border-radius:4px;
  background:#f4f7fb;
  border:1px solid #edf1f6;
}
.collection-empty-cell{
  height:150px;
  text-align:center!important;
  vertical-align:middle;
  color:#b5bdc8;
}
.collection-empty{
  display:grid;
  justify-items:center;
  gap:10px;
  color:#b5bdc8;
}
.collection-empty-icon{
  position:relative;
  width:50px;
  height:34px;
  border:1px solid #d8dde4;
  border-radius:4px;
  background:#fff;
  box-shadow:0 8px 12px rgba(31,53,81,.05);
}
.collection-empty-icon::before{
  content:'';
  position:absolute;
  left:9px;
  top:-13px;
  width:30px;
  height:22px;
  border:1px solid #d8dde4;
  border-bottom:0;
  border-radius:4px 4px 0 0;
  background:#fff;
  transform:skewX(-18deg);
}
.collection-empty-icon::after{
  content:'';
  position:absolute;
  left:15px;
  top:1px;
  width:20px;
  height:7px;
  border:1px solid #d8dde4;
  border-top:0;
  border-radius:0 0 4px 4px;
  background:#fff;
}
.collection-pagination{
  padding:12px 10px 16px;
  border-top:1px solid #edf1f6;
}
.collection-pagination .pager-size-toggle{
  min-width:94px;
  border-color:#d7dce3;
}
.platform-account-search-shell{
  margin:-12px -12px 10px;
  padding:10px 12px;
  background:#fff;
  border-bottom:1px solid #e8eef5;
}
.platform-account-filter-form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.platform-date-input{
  width:126px;
  height:32px;
  border:1px solid #ccd7e4;
  border-radius:4px;
  background:#fff;
  color:#1b2d43;
  padding:0 10px;
}
.platform-date-separator{
  color:#9aa7b7;
}
.platform-account-panel{
  overflow:hidden;
}
.platform-account-left-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.platform-account-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:50px;
  padding:10px 12px;
}
.platform-create-btn,
.platform-batch-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:28px;
  padding:0 11px;
  border-radius:4px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.platform-create-btn{
  border:1px solid #1677ff;
  background:#1677ff;
  color:#fff;
}
.platform-batch-btn{
  border:1px solid #dfe5ed;
  background:#f8fafc;
  color:#a0adbb;
  cursor:not-allowed;
}
.platform-account-table-scroll{
  height:auto;
  min-height:192px;
}
.platform-checkbox-cell{
  width:48px;
  text-align:center!important;
}
.platform-action-cell{
  display:flex;gap:6px;align-items:center
}
.platform-del-btn{
  background:#ef4444;color:#fff;border:none;border-radius:4px;padding:4px 10px;font-size:12px;cursor:pointer
}
.platform-del-btn:hover{background:#dc2626}
.platform-edit-btn{background:#4f46e5;color:#fff;border:none;border-radius:4px;padding:4px 10px;font-size:12px;cursor:pointer}
.platform-edit-btn:hover{background:#4338ca}
.platform-login-btn{background:#22c55e;color:#fff;border:none;border-radius:4px;padding:4px 10px;font-size:12px;cursor:pointer}
.platform-login-btn:hover{background:#16a34a}
.platform-logout-btn{background:#f59e0b;color:#fff;border:none;border-radius:4px;padding:4px 10px;font-size:12px;cursor:pointer}
.platform-logout-btn:hover{background:#d97706}
.platform-account-empty{
  height:150px;
}
.platform-account-form{
  display:grid;
  gap:16px;
}
.platform-form-line{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:12px;
  align-items:center;
}
.platform-form-line span{
  text-align:right;
  color:#2b3d54;
  font-size:14px;
}
.platform-form-line em{
  color:#f5222d;
  font-style:normal;
}
.platform-form-line .field[readonly],
.platform-form-line select.field:disabled{
  background:#f8fafc;
  color:#94a3b8;
  cursor:default;
}
.platform-form-line-wide{
  align-items:start;
}
.platform-form-line-wide textarea{
  min-height:54px;
  resize:vertical;
}
.platform-send-code-btn{
  padding:6px 12px;
  background:#1677ff;
  color:#fff;
  border:none;
  border-radius:4px;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
}
.platform-send-code-btn:hover{background:#0958d9}
.platform-send-code-btn:disabled{background:#a0c4ff;cursor:not-allowed}
.platform-login-info-cell{max-width:120px}
.platform-login-info-short{color:#22c55e;font-size:12px}
.platform-login-info-na{color:#999}
.platform-view-info-btn{background:none;border:1px solid #d9d9d9;border-radius:3px;color:#666;cursor:pointer;font-size:11px;margin-left:6px;padding:1px 6px}
.platform-view-info-btn:hover{border-color:#1677ff;color:#1677ff}
.platform-form-line-code{
  grid-template-columns:84px 1fr auto;
}
.platform-captcha-section{
  margin-bottom:12px;
}
.platform-form-line-captcha{
  grid-template-columns:84px 1fr;
}
.platform-captcha-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.platform-captcha-row .field{
  flex:1;
}
.platform-captcha-img{
  height:36px;
  border:1px solid #ddd;
  border-radius:4px;
  cursor:pointer;
}
/* login info detail modal */
.platform-info-modal{
  width:min(560px, calc(100vw - 40px));
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.04);
  overflow:hidden;
  animation:modalSlideUp .22s cubic-bezier(.16,1,.3,1);
  max-height:calc(100vh - 40px);
  display:flex;
  flex-direction:column;
}
.platform-info-body{
  padding:16px 24px;
  overflow-y:auto;
  max-height:calc(65vh - 100px);
}
.platform-info-json{
  margin:0;
  padding:14px 16px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:8px;
  font-family:"SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  font-size:13px;
  line-height:1.7;
  color:#334155;
  white-space:pre-wrap;
  word-break:break-all;
  overflow-wrap:break-word;
}
.platform-info-json::selection{
  background:#bdd7ff;
  color:#0f172a;
}
.level-notice{
  margin:0 14px 14px;
  padding:10px 14px;
  border-radius:4px;
  background:#f2f7ff;
  color:#245b9d;
  border:1px solid #cfe0fb;
}
.level-toolbar{
  padding:14px;
  border-bottom:0;
}
.level-create-form{
  margin-top:0;
}
.level-form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.level-description-line,
.level-status-line{
  grid-column:1 / -1;
}
.level-form-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}
.level-table-wrap{
  margin:0 14px 14px;
}
.table-input{
  width:100%;
  border:1px solid #cad7e6;
  border-radius:4px;
  background:#f7faff;
  color:#1d2c41;
  padding:7px 10px;
  min-height:34px;
}
.level-description-input{
  min-width:220px;
}
.level-sort-input{
  max-width:88px;
}
.level-table-check,
.level-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#2c4159;
}
.level-row-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.level-inline-form{
  display:inline;
}
.member-level-table td:nth-child(3),
.member-level-table td:nth-child(4){
  min-width:120px;
}
.config-panel{
  min-height:392px;
}
.config-tabs{
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--border);
  background:#f7f9fc;
}
.config-tab{
  min-width:96px;
  height:40px;
  border:0;
  border-right:1px solid var(--border);
  background:transparent;
  color:#5e7188;
  cursor:pointer;
}
.config-tab.is-active{
  background:#fff;
  color:#1674d1;
  font-weight:700;
}
.config-tab-pane{
  display:none;
  padding:34px 50px 30px;
}
.config-tab-pane.is-active{
  display:block;
}
.config-row{
  display:grid;
  grid-template-columns:160px 170px minmax(280px, 1fr);
  gap:10px;
  align-items:start;
  margin-bottom:28px;
}
.config-row-control{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:32px;
}
.config-label{
  color:#10284a;
  font-weight:700;
  line-height:32px;
}
.config-help{
  color:#5d7290;
  font-size:13px;
  line-height:1.7;
}
.field-line-inline{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  min-height:32px;
}
.field-small{
  width:82px;
  flex:0 0 82px;
  height:32px;
}
.field-unit{
  color:#10284a;
  white-space:nowrap;
}
.system-logo-upload{
  display:flex;
  align-items:flex-start;
  gap:14px;
  width:260px;
}
.system-logo-square{
  position:relative;
  display:grid;
  place-items:center;
  width:86px;
  height:86px;
  border:1px solid #d8e2ef;
  border-radius:6px;
  background:#f8fbff;
  color:#5f7790;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.system-logo-square:hover{
  border-color:#9ebce2;
  background:#f2f7ff;
  color:#1f6fdd;
}
.system-logo-square input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.system-logo-placeholder{
  display:grid;
  place-items:center;
  gap:4px;
  font-size:12px;
  line-height:1.1;
  text-align:center;
  pointer-events:none;
}
.system-logo-plus{
  font-size:30px;
  font-weight:300;
  line-height:1;
}
.system-logo-preview-box{
  display:grid;
  gap:0;
}
.system-logo-preview{
  width:86px;
  height:86px;
  object-fit:contain;
  border:1px solid #d8e2ef;
  border-radius:6px;
  background:#fff;
  padding:8px;
}
.switch-line{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  color:#10284a;
  font-size:14px;
}
.switch-line input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.switch-line i{
  position:relative;
  width:40px;
  height:20px;
  border-radius:999px;
  background:#d7deea;
  transition:background .18s ease;
}
.switch-line i::before{
  content:'';
  position:absolute;
  left:2px;
  top:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(31,53,81,.18);
  transition:transform .18s ease;
}
.switch-line input:checked + i{
  background:#4da0ff;
}
.switch-line input:checked + i::before{
  transform:translateX(20px);
}
.mail-form{
  display:grid;
  gap:20px;
  max-width:680px;
}
.mail-line{
  display:grid;
  grid-template-columns:160px minmax(260px, 360px) auto;
  gap:12px;
  align-items:center;
}
.radio-group{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  grid-column:2 / 4;
}
.mail-line .field{
  background:#fff;
}
.radio-line{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#10284a;
}
.login-notice-edit-btn{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  border:1px solid #d8e2ef;
  border-radius:50%;
  background:#fff;
  color:#8c9caf;
  cursor:pointer;
  line-height:1;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.login-notice-edit-btn:hover{
  background:#f4f8fd;
  border-color:#b9cce4;
  color:#5c7089;
}
.login-notice-edit-btn svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.login-notice-edit-btn.is-hidden{
  display:none;
}
.login-notice-form{
  display:grid;
  gap:12px;
}
.notice-field-line{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:10px;
  align-items:center;
}
.notice-field-line span{
  color:#10284a;
  font-weight:400;
  text-align:right;
}
.notice-field-line-wide{
  align-items:start;
}
.notice-template-field{
  min-height:110px;
  resize:vertical;
}
.notice-token-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  color:#5d7290;
  font-size:13px;
}
.notice-token-row-offset{
  margin-left:100px;
}
.notice-token-btn{
  height:26px;
  padding:0 13px;
  border:1px solid #d7e2ef;
  border-radius:4px;
  background:#fff;
  color:#48617c;
  cursor:pointer;
}
.notice-token-btn:hover{
  background:#eff5ff;
  border-color:#b9cff1;
  color:#1f6fdd;
}
.notice-preview{
  margin-left:100px;
  width:min(500px, calc(100% - 100px));
  min-height:132px;
  padding:14px 12px;
  border-radius:6px;
  background:#f7faff;
  color:#354a63;
  line-height:1.9;
  white-space:pre-wrap;
}
.config-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.table-wrap{overflow:auto}
.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  color:#334a60;
}
.data-table th,
.data-table td{
  padding:11px 10px;
  border-bottom:1px solid #edf1f6;
  text-align:left;
  white-space:nowrap;
}
.data-table th{
  color:#70839a;
  font-weight:700;
  background:#fbfcfe;
}
.table-actions{display:flex;gap:8px;flex-wrap:wrap}
.inline-form{display:inline-flex;margin:0}
.member-filter{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 180px auto;
  gap:12px;
  align-items:end;
  padding-top:14px;
}
.filter-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.member-name{
  display:block;
  color:#253d57;
  font-weight:700;
}
.member-meta{
  display:block;
  margin-top:3px;
  color:#8b9aae;
  font-size:12px;
}
.member-avatar{
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#eef5fd;
  color:#1f6fdd;
  font-size:12px;
  font-weight:700;
  overflow:hidden;
}
.member-avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.member-count{
  display:block;
  color:#22384f;
  font-weight:800;
}
.empty-cell{
  height:70px;
  color:#8a9aad;
  text-align:center!important;
}
.menu-title{
  display:block;
  color:#253d57;
  font-weight:700;
}
.menu-title.depth-2{
  padding-left:18px;
}
.menu-title.depth-2::before{
  content:'鈹?;
  margin-right:8px;
  color:#8da0b5;
}
.menu-key{
  display:block;
  margin-top:3px;
  color:#8b9aae;
  font-size:12px;
}
.menu-tree-cell{
  width:26px;
  min-width:26px;
  padding-right:0!important;
  padding-left:6px!important;
  text-align:center!important;
}
.menu-status-form{
  display:inline-flex;
  align-items:center;
  margin:0;
}
.menu-status-switch{
  display:inline-flex;
  align-items:center;
  gap:0;
  cursor:pointer;
}
.menu-status-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.menu-status-switch i{
  position:relative;
  width:40px;
  height:20px;
  border-radius:999px;
  background:#d7deea;
  transition:background .18s ease;
}
.menu-status-switch i::before{
  content:'';
  position:absolute;
  left:2px;
  top:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(31,53,81,.18);
  transition:transform .18s ease;
}
.menu-status-switch input:checked + i{
  background:#4da0ff;
}
.menu-status-switch input:checked + i::before{
  transform:translateX(20px);
}
.menu-tree-toggle,
.menu-tree-spacer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:20px;
  border-radius:3px;
}
.menu-tree-toggle{
  border:0;
  background:transparent;
  color:#29537a;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  line-height:1;
  transition:color .16s ease, transform .16s ease;
}
.menu-tree-toggle:hover{
  color:#1f6fdd;
}
.menu-tree-toggle.is-open{
  transform:rotate(90deg);
}
.menu-tree-spacer{
  background:transparent;
}
.menu-row-child{
  background:#fbfdff;
}
.menu-row-child .menu-title.depth-2{
  padding-left:34px;
}
.menu-id-cell{
  width:42px;
  text-align:center!important;
  color:#62758c;
}
.menu-icon-cell{
  min-width:148px;
}
.menu-icon-preview{
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  margin-right:8px;
  border-radius:4px;
  background:#eef5fd;
  vertical-align:middle;
}
.menu-icon-preview::before{
  content:'';
  width:16px;
  height:16px;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  filter:brightness(0) saturate(100%) invert(28%) sepia(58%) saturate(682%) hue-rotate(174deg) brightness(89%) contrast(92%);
}
.menu-icon-code{
  color:#35516d;
  font-size:12px;
  vertical-align:middle;
}
.menu-icon-empty{
  color:#9aa8b8;
  font-size:12px;
}
.menu-sort-input{
  width:74px;
  height:32px;
  padding:0 8px;
  border:1px solid #d8e2ef;
  border-radius:4px;
  background:#fff;
  color:#263f5b;
  font-size:13px;
}
.menu-sort-input:focus{
  outline:0;
  border-color:#2f8df0;
  box-shadow:0 0 0 2px rgba(47,141,240,.12);
}
.menu-edit-form{
  display:grid;
  gap:14px;
}
.menu-edit-icon-preview{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
}
.menu-edit-switches{
  display:flex;
  gap:18px;
  align-items:center;
}
.menu-edit-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#2c4159;
  font-size:13px;
}
.menu-row-hidden td{
  background:#fbfcfe;
  color:#9aa8b8;
}
.status-pill{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:4px;
  font-size:12px;
  font-weight:700;
}
.status-pill.is-on{
  background:#eaf7f0;
  color:#19744b;
}
.status-pill.is-off{
  background:#eef2f7;
  color:#718197;
}
.level-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:4px;
  background:#edf4ff;
  color:#225fba;
  font-size:12px;
  font-weight:700;
}
.member-expiry{
  color:#2d4058;
  white-space:nowrap;
}
.member-expiry.is-unlimited{
  color:#6d7f94;
}
.member-edit-form{
  /* padding from unified .member-edit-form rule */}
.member-edit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
}
.member-edit-check{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  gap:8px;
  color:#2c4159;
}
.mobile-config-panel{
  padding:14px;
}
.mobile-config-form{
  display:grid;
  gap:14px;
}
.mobile-config-section{
  border:1px solid var(--border);
  border-radius:4px;
  background:#fff;
  padding:16px;
}
.mobile-config-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.mobile-config-head h2{
  margin:0;
  color:#20364f;
  font-size:16px;
}
.mobile-notice-field{
  min-height:86px;
}
.mobile-banner-list{
  display:grid;
  gap:12px;
}
.mobile-banner-item{
  display:grid;
  grid-template-columns:180px minmax(0, 1fr);
  gap:14px;
  padding:12px;
  border:1px solid #e3ebf5;
  border-radius:4px;
  background:#fbfdff;
}
.mobile-banner-box{
  position:relative;
  display:grid;
  place-items:center;
  width:180px;
  aspect-ratio:16 / 9;
  border:1px dashed #b9c8da;
  border-radius:4px;
  background:#f4f8fd;
  color:#6d85a0;
  font-size:26px;
  cursor:pointer;
  overflow:hidden;
}
.mobile-banner-box input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.mobile-banner-box img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.mobile-banner-fields{
  display:grid;
  gap:10px;
}
.mobile-banner-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mobile-banner-title-row strong{
  color:#243b55;
}
.mobile-banner-switch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#50657c;
  font-size:13px;
}
.mobile-banner-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.mobile-banner-link-line{
  grid-column:1 / -1;
}
.mobile-config-actions{
  display:flex;
  justify-content:flex-end;
}
.subtle{color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:12px}
.form-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:4px;
  padding:16px;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.field-line{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field-line label{
  font-size:13px;
  color:#566a80;
  font-weight:700;
}
.field-line .field,
.field-line textarea,
select.field{
  width:100%;
  border:1px solid #e2e8f0;
  border-radius:7px;
  background:#fff;
  color:#0f172a;
  padding:8px 12px;
  min-height:38px;
  font-size:13px;
  transition:border-color .15s, box-shadow .15s;
  box-sizing:border-box;
}
.field-line .field:focus,
.field-line textarea:focus,
select.field:focus{
  outline:none;
  border-color:#1677ff;
  box-shadow:0 0 0 3px rgba(22,119,255,.1);
}
.field-line .field[readonly],
select.field[readonly]{
  background:#f8fafc;
  color:#64748b;
  cursor:default;
}
.field-line textarea{min-height:80px;resize:vertical}

@media (max-width:1200px){
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-shell{grid-template-columns:var(--sidebar-width) 1fr}
  .app-shell.is-sidebar-collapsed{grid-template-columns:var(--sidebar-collapsed-width) 1fr}
}
@media (max-width:860px){
  .app-shell{grid-template-columns:1fr}
  .app-shell.is-sidebar-collapsed{grid-template-columns:1fr}
  .app-sidebar{min-height:auto}
  .app-shell.is-sidebar-collapsed .app-sidebar{display:none}
  .content{padding:12px}
  .metric-grid,.form-grid{grid-template-columns:1fr}
  .member-filter{grid-template-columns:1fr}
  .topbar{padding:0 12px}
}

/* unified platform / market tags */
.platform-tag,
.market-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 9px;
  border-radius:4px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.platform-tag.is-xmeta{
  color:#1d4ed8;
  background:#dbeafe;
  border:1px solid #bfdbfe;
}
.platform-tag.is-pinpai{
  color:#7e22ce;
  background:#f3e8ff;
  border:1px solid #e9d5ff;
}
.platform-tag.is-other{
  color:#475569;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
}
.market-tag.is-xmeta{
  color:#0f766e;
  background:#ccfbf1;
  border:1px solid #99f6e4;
}
.market-tag.is-pinpai{
  color:#c2410c;
  background:#ffedd5;
  border:1px solid #fed7aa;
}
.market-tag.is-other{
  color:#475569;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
}