.field-title { display:block; font-size:12px; font-weight:700; color:#536075; margin-bottom:7px; }
.term-options { display:flex; flex-wrap:wrap; gap:10px; }
.term-options label { cursor:pointer; }
.term-options input { position:absolute; opacity:0; pointer-events:none; }
.term-options span { display:block; min-width:85px; text-align:center; padding:11px 18px; border:1px solid #dce3ec; border-radius:9px; background:#fff; color:#5b687c; font-weight:700; }
.term-options input:checked + span { border-color:#2563eb; background:#edf3ff; color:#2057d7; box-shadow:0 0 0 2px #2563eb18; }

.mobile-menu-button,
.mobile-menu-backdrop { display:none; }
.search select { border:1px solid #e6ebf2; border-radius:9px; padding:9px 12px; background:#fff; color:#58667b; }

.sidebar-group { margin:0; }
.sidebar-group summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:9px; color:#657289; font-weight:650; cursor:pointer; list-style:none; user-select:none; }
.sidebar-group summary::-webkit-details-marker { display:none; }
.sidebar-group summary::marker { content:''; font-size:0; }
.sidebar-group summary:hover,.sidebar-group summary.active { background:#edf3ff; color:#2057d7; }
.sidebar-group summary i { width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s; }
.sidebar-group[open] summary i { transform:rotate(225deg); }
.sidebar-submenu { display:grid; gap:4px; padding:5px 0 4px 13px; margin-left:12px; border-left:1px solid #dce5f2; }
.sidebar nav .sidebar-submenu a { padding:10px 12px; font-size:13px; }
.sidebar-subtitle { padding:9px 12px 3px; color:#8c98aa; font-size:9px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.sidebar-empty { padding:8px 12px; color:#98a4b5; font-size:11px; font-style:italic; }
.sidebar nav .sidebar-submenu a.sidebar-record { position:relative; padding:8px 10px 8px 24px; color:#718097; font-size:11px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar nav .sidebar-submenu a.sidebar-record::before { content:''; position:absolute; left:10px; top:50%; width:5px; height:5px; border-radius:50%; background:#9aabd0; transform:translateY(-50%); }
.sidebar nav .sidebar-submenu a.sidebar-record:hover { color:#2057d7; background:#f4f7ff; }

section.panel:has(input[name="page"][value="customer_statement"]) { overflow:visible; }
section.panel:has(input[name="page"][value="customer_statement"]) form.actions { display:grid; grid-template-columns:minmax(300px,520px) auto; align-items:end; gap:14px; padding:20px !important; }
section.panel:has(input[name="page"][value="customer_statement"]) form.actions label { display:grid; gap:8px; min-width:0; color:#536075; font-size:12px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
section.panel:has(input[name="page"][value="customer_statement"]) select { width:100%; height:50px; margin:0; padding:0 46px 0 15px; border:1px solid #d8e1ee; border-radius:12px; background-color:#fff; color:#172033; font-size:15px; font-weight:650; text-transform:none; appearance:none; cursor:pointer; box-shadow:0 3px 10px #173b7a0a; background-image:linear-gradient(45deg,transparent 50%,#58708f 50%),linear-gradient(135deg,#58708f 50%,transparent 50%); background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; transition:border-color .2s,box-shadow .2s; }
section.panel:has(input[name="page"][value="customer_statement"]) select:hover { border-color:#aebed4; }
section.panel:has(input[name="page"][value="customer_statement"]) select:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 4px #2563eb1a; }
section.panel:has(input[name="page"][value="customer_statement"]) button { min-height:50px; padding-inline:22px; white-space:nowrap; }

section.panel:has(input[name="page"][value="finance"]) { overflow:visible; }
section.panel:has(input[name="page"][value="finance"]) form.actions { display:grid; grid-template-columns:minmax(260px,420px); gap:10px; padding:20px !important; }
section.panel:has(input[name="page"][value="finance"]) form.actions label { display:grid; gap:8px; color:#536075; font-size:12px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
section.panel:has(input[name="page"][value="finance"]) select { width:100%; height:50px; margin:0; padding:0 46px 0 15px; border:1px solid #d8e1ee; border-radius:12px; background-color:#fff; color:#172033; font-size:15px; font-weight:650; text-transform:none; appearance:none; cursor:pointer; box-shadow:0 3px 10px #173b7a0a; background-image:linear-gradient(45deg,transparent 50%,#58708f 50%),linear-gradient(135deg,#58708f 50%,transparent 50%); background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; transition:border-color .2s,box-shadow .2s; }
section.panel:has(input[name="page"][value="finance"]) select:hover { border-color:#aebed4; }
section.panel:has(input[name="page"][value="finance"]) select:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 4px #2563eb1a; }

.hosting-accordions { display:grid; gap:12px; }
.hosting-accordion { border:1px solid #e2e8f1; border-radius:15px; background:#fff; box-shadow:0 5px 18px #173b7a0b; overflow:hidden; }
.hosting-accordion summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px; cursor:pointer; list-style:none; }
.hosting-accordion summary::-webkit-details-marker { display:none; }
.hosting-accordion summary > div:first-child { display:grid; gap:5px; }
.hosting-accordion summary > div:first-child strong { color:#172033; font-size:17px; }
.hosting-accordion summary > div:first-child span { color:#758198; font-size:13px; }
.hosting-summary-meta { display:flex; align-items:center; justify-content:flex-end; gap:18px; color:#607089; font-size:13px; }
.hosting-summary-meta i { width:10px; height:10px; border-right:2px solid #607089; border-bottom:2px solid #607089; transform:rotate(45deg); transition:transform .2s; }
.hosting-accordion[open] .hosting-summary-meta i { transform:rotate(225deg); }
.hosting-accordion-body { padding:0 20px 20px; border-top:1px solid #edf1f6; }
.hosting-info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding-top:18px; }
.hosting-info-grid > div { display:grid; gap:6px; padding:14px; border:1px solid #edf1f6; border-radius:11px; background:#fafcff; }
.hosting-info-grid span { color:#7a879b; font-size:11px; font-weight:800; text-transform:uppercase; }
.hosting-info-grid strong { color:#26364d; font-size:13px; overflow-wrap:anywhere; }
.hosting-actions { display:flex; justify-content:flex-end; padding-top:16px; }
.empty-state { display:grid; gap:6px; padding:24px; }

.domain-picker { border:1px solid #dfe6f0; border-radius:14px; background:#f9fbfe; padding:16px; }
.domain-picker-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }
.domain-picker-head small { display:block; color:#8190a5; }
.domain-picker-head > strong { padding:7px 10px; border-radius:999px; background:#eaf1ff; color:#245bd5; font-size:12px; white-space:nowrap; }
.domain-check-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-height:310px; overflow:auto; }
.domain-check-grid label { position:relative; cursor:pointer; }
.domain-check-grid input { position:absolute; opacity:0; pointer-events:none; }
.domain-check-grid span { display:grid; gap:4px; min-height:65px; padding:12px 14px; border:1px solid #dde5f0; border-radius:11px; background:#fff; transition:.18s; }
.domain-check-grid span strong { color:#27384e; font-size:13px; overflow-wrap:anywhere; }
.domain-check-grid span small { color:#8794a7; }
.domain-check-grid input:checked + span { border-color:#2563eb; background:#edf3ff; box-shadow:0 0 0 3px #2563eb17; }
.domain-check-grid input:checked + span strong { color:#2057d7; }
.empty-domain-picker { padding:18px; border:1px dashed #cdd8e7; border-radius:10px; color:#78879c; text-align:center; background:#fff; }
.license-empty { display:grid; justify-items:center; gap:8px; padding:34px 20px; text-align:center; }
.license-empty strong { color:#26364d; font-size:16px; }
.license-empty span { max-width:500px; color:#7c899d; }
.license-empty .primary { margin-top:5px; }
tr:target { background:#edf3ff; animation:targetPulse 1.2s ease; }
@keyframes targetPulse { from { box-shadow:inset 4px 0 #2563eb; } to { box-shadow:inset 0 0 transparent; } }

.stats .card small { display:block; margin-top:4px; color:#9aa6b7; font-size:11px; }
.stat-domain { border-top:3px solid #2563eb; }
.stat-hosting { border-top:3px solid #7257d9; }
.stat-license { border-top:3px solid #249866; }
.stat-attention { border-top:3px solid #e69723; }
.dashboard-renewal-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.renewal-panel { min-width:0; }
.renewal-panel .panel-head > div { display:grid; gap:4px; }
.renewal-list { display:grid; }
.renewal-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 18px; border-top:1px solid #edf1f5; transition:background .18s; }
.renewal-row:first-child { border-top:0; }
.renewal-row:hover { background:#fafcff; }
.renewal-row > div { display:grid; gap:4px; min-width:0; }
.renewal-row > div:first-child strong { color:#25364d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.renewal-row > div:first-child span,.renewal-row > div:last-child > span:first-child { color:#8793a6; font-size:11px; }
.renewal-row > div:last-child { justify-items:end; flex:none; }
.renewal-empty { padding:26px 18px; color:#8b97a9; text-align:center; }
.domain-renewals .panel-head { border-left:4px solid #2563eb; }
.hosting-renewals .panel-head { border-left:4px solid #7257d9; }
.control-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.control-grid > a { display:flex; align-items:center; gap:12px; padding:18px; border-right:1px solid #edf1f5; }
.control-grid > a:last-child { border-right:0; }
.control-grid > a:hover { background:#fafcff; }
.control-grid > a div { display:grid; gap:4px; }
.control-grid strong { color:#28384e; font-size:13px; }
.control-grid small { color:#8995a7; font-size:10px; }
.control-icon { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none; font-weight:900; }
.control-icon.blue { color:#245bd5; background:#eaf1ff; }
.control-icon.amber { color:#bd7310; background:#fff1d9; }
.control-icon.red { color:#cf3f3f; background:#ffebeb; }
.website-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.website-card { min-width:0; overflow:hidden; border:1px solid #e0e6ef; border-radius:17px; background:#fff; box-shadow:0 8px 24px #243a5b0b; }
.website-card > img,.website-placeholder { width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid #edf1f5; }
.website-placeholder { display:grid; place-items:center; align-content:center; gap:7px; color:#7c8ba0; background:linear-gradient(135deg,#edf3ff,#f7f9fc); }
.website-placeholder span { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#fff; background:#2563eb; font-weight:900; }
.website-card-body { display:grid; gap:16px; padding:17px; }
.website-card-title { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.website-card-title > div { display:grid; gap:4px; min-width:0; }
.website-card-title strong { overflow:hidden; color:#24364d; text-overflow:ellipsis; white-space:nowrap; }
.website-card-title span:not(.badge) { color:#8390a3; font-size:12px; }
.website-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.website-meta span { display:grid; gap:4px; color:#8a96a8; font-size:10px; }
.website-meta strong { color:#35465c; font-size:12px; overflow-wrap:anywhere; }
.website-empty { grid-column:1/-1; justify-items:center; display:grid; gap:10px; padding:44px; text-align:center; }
.website-hero { display:grid; grid-template-columns:1.3fr .7fr; gap:18px; }
.credential-grid,.website-theme { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:18px; }
.credential-grid > div,.credential-grid > details { min-width:0; display:grid; gap:6px; padding:13px; border:1px solid #e4eaf2; border-radius:11px; background:#f9fbfe; overflow-wrap:anywhere; }
.credential-grid > div > span,.credential-grid summary { color:#65758b; font-size:12px; font-weight:700; }
.credential-grid code { display:block; color:#24364d; overflow-wrap:anywhere; }
.credential-item { display:grid; gap:5px; padding:13px; border:1px solid #e4eaf2; border-radius:11px; background:#f9fbfe; overflow-wrap:anywhere; }
.credential-item small { color:#8592a5; }
.api-box { display:grid; gap:14px; padding:18px; border:1px solid #cfe0ff; border-radius:14px; background:linear-gradient(145deg,#f4f8ff,#fff); }
.api-box > p { margin:0; }
.api-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.api-field { min-width:0; display:grid; align-content:start; gap:10px; padding:15px; border:1px solid #d9e5f6; border-radius:12px; background:#fff; }
.api-field > span { color:#6d7f97; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.api-field code { display:block; min-height:62px; padding:12px; border:1px solid #e3eaf4; border-radius:9px; background:#f7f9fc; color:#24364d; font-size:12px; line-height:1.55; overflow-wrap:anywhere; word-break:break-all; }
.copy-button { width:100%; border:1px solid #bcd1f3; border-radius:9px; padding:10px 12px; background:#edf4ff; color:#245db7; font-weight:800; cursor:pointer; }
.copy-button:hover { background:#e1edff; }
.plugin-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:18px; }
.plugin-grid > div { min-width:0; display:grid; gap:5px; padding:12px; border:1px solid #e4eaf2; border-radius:10px; background:#fff; }
.plugin-grid > div strong { overflow-wrap:anywhere; }
.plugin-grid > div span { color:#8390a3; font-size:11px; }
.plugin-item { display:grid; gap:5px; padding:12px; border:1px solid #e4eaf2; border-radius:10px; }
.plugin-item span { color:#8390a3; font-size:11px; }
.screenshot-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:18px; }
.screenshot-grid figure { margin:0; overflow:hidden; border:1px solid #e1e7ef; border-radius:12px; }
.screenshot-grid img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.screenshot-grid figcaption { padding:9px 11px; color:#65758b; font-size:11px; }
.screenshot-grid figcaption { display:grid; gap:3px; }
.screenshot-grid figcaption strong { color:#35465c; font-size:12px; }
.preview-panel .panel-head > div { display:grid; gap:4px; }
.preview-panel .panel-head form { margin:0; }
.preview-empty { display:grid; place-items:center; gap:7px; padding:42px 18px; color:#8190a5; text-align:center; background:linear-gradient(145deg,#f7faff,#fff); }
.preview-empty span { width:52px; height:52px; display:grid; place-items:center; border-radius:15px; background:#e8f0ff; color:#2563eb; font-size:25px; }
.preview-empty strong { color:#405169; }
.screenshot-upload { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(300px,1.3fr) auto; gap:14px; align-items:end; padding:18px; border-top:1px solid #e5ebf3; background:#fbfcff; }
.upload-caption { display:grid; gap:7px; color:#53647a; font-weight:700; }
.dropzone { min-height:116px; display:grid; place-items:center; align-content:center; gap:5px; padding:18px; border:2px dashed #bfd1eb; border-radius:14px; background:#f4f8ff; color:#43566f; text-align:center; cursor:pointer; transition:.2s; }
.dropzone:hover { border-color:#2563eb; background:#edf4ff; }
.dropzone input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.dropzone-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#2563eb; color:#fff; font-size:20px; }
.dropzone small { color:#8190a5; font-weight:500; }
.modern-check { display:flex!important; flex-direction:row!important; align-items:center; gap:11px; padding:12px; border:1px solid #dce5f2; border-radius:11px; background:#f9fbff; }
.modern-check input { width:20px; height:20px; flex:none; accent-color:#2563eb; }
.modern-check span { font-weight:700; color:#3c4d63; }

@media (max-width:950px) {
  html,body { max-width:100%; overflow-x:hidden; }
  body.mobile-menu-open { overflow:hidden; touch-action:none; }
  .layout { display:block; width:100%; min-width:0; }
  .mobile-menu-button { display:flex; position:fixed; top:max(14px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); z-index:1003; width:44px; height:44px; padding:0; border:0; border-radius:11px; background:#2563eb; box-shadow:0 8px 24px #173b7a30; align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer; transition:left .25s,right .25s,background .2s; -webkit-tap-highlight-color:transparent; }
  .mobile-menu-button[aria-expanded="true"] { left:calc(min(320px,86vw) - 58px); right:auto; box-shadow:none; }
  .mobile-menu-button span { display:block; width:21px; height:2px; border-radius:2px; background:#fff; transition:.2s; }
  .mobile-menu-button[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .mobile-menu-button[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .mobile-menu-button[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .mobile-menu-backdrop { display:block; position:fixed; inset:0; z-index:1000; background:#10243e99; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s,visibility .22s; }
  .mobile-menu-backdrop.menu-open { opacity:1; visibility:visible; pointer-events:auto; }
  .sidebar { position:fixed; z-index:1002; inset:0 auto 0 0; width:min(320px,86vw); max-width:100%; height:100vh; height:100dvh; padding:max(22px,env(safe-area-inset-top)) 16px max(22px,env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; transform:translate3d(-103%,0,0); transition:transform .25s ease; border-right:1px solid #e6ebf2; box-shadow:14px 0 35px #10243e2e; -webkit-overflow-scrolling:touch; }
  .sidebar.menu-open { transform:translateX(0); }
  .sidebar .brand { min-height:44px; margin:0 54px 18px 6px; }
  .sidebar nav { display:grid; width:100%; min-width:0; gap:5px; overflow:visible; }
  .sidebar nav > a,.sidebar-group,.sidebar-group summary,.sidebar-submenu { width:100%; min-width:0; max-width:100%; }
  .sidebar nav a,.sidebar-group summary { white-space:normal; overflow-wrap:anywhere; }
  .sidebar nav > a,.sidebar-group summary { display:flex; align-items:center; min-height:44px; padding:10px 12px; line-height:1.25; }
  .sidebar-group summary { justify-content:space-between; }
  .sidebar-group summary i { display:block; flex:0 0 8px; }
  .sidebar-submenu { margin:2px 0 5px 8px; padding:2px 0 2px 10px; width:calc(100% - 8px); }
  .sidebar nav .sidebar-submenu a { min-height:38px; display:flex; align-items:center; padding:8px 10px; line-height:1.25; }
  .content { width:100%; min-width:0; padding:76px 18px 22px; }
  section.panel:has(input[name="page"][value="customer_statement"]) form.actions { grid-template-columns:1fr; padding:16px !important; }
  section.panel:has(input[name="page"][value="customer_statement"]) button { width:100%; }
  section.panel:has(input[name="page"][value="finance"]) form.actions { grid-template-columns:1fr; padding:16px !important; }
  .hosting-accordion summary { align-items:flex-start; padding:16px; }
  .hosting-summary-meta { display:grid; grid-template-columns:auto auto; gap:8px 12px; }
  .hosting-summary-meta i { position:absolute; right:18px; }
  .hosting-info-grid { grid-template-columns:1fr; }
  .domain-check-grid { grid-template-columns:1fr; }
  .domain-picker-head { display:grid; }
  .dashboard-renewal-grid { grid-template-columns:1fr; }
  .control-grid { grid-template-columns:1fr; }
  .control-grid > a { border-right:0; border-bottom:1px solid #edf1f5; }
  .control-grid > a:last-child { border-bottom:0; }
  .website-grid,.plugin-grid,.screenshot-grid,.website-hero,.credential-grid,.website-theme,.api-columns,.screenshot-upload { grid-template-columns:1fr; }
  .preview-panel .panel-head form,.preview-panel .panel-head button,.screenshot-upload button { width:100%; }
}

@media (max-width:600px) {
  .content { padding-inline:14px; }
  .topbar,.topbar .actions,.topbar .search { width:100%; min-width:0; }
  .topbar .actions { flex-wrap:wrap; }
  .topbar .actions > a,.topbar .actions > button { flex:1 1 auto; text-align:center; }
  .search { flex-wrap:wrap; }
  .search input,.search select,.search button { width:100%; min-width:0; }
  .panel-head { align-items:flex-start; gap:10px; }
}
.sidebar-menu-controls{display:grid;gap:7px;margin:12px 8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.sidebar-menu-controls button{width:100%;border:1px solid rgba(255,255,255,.2);border-radius:9px;padding:9px 10px;background:rgba(255,255,255,.08);color:inherit;font:inherit;font-weight:700;cursor:pointer}
.sidebar-menu-controls button:hover{background:rgba(255,255,255,.15)}
.menu-order-hint{font-size:11px;text-align:center;opacity:.7}
.menu-ordering>[data-menu-key]{cursor:grab;outline:1px dashed rgba(255,255,255,.24);outline-offset:-2px}
.menu-ordering>[data-menu-key] summary{pointer-events:none}
.menu-ordering>.menu-dragging{opacity:.45}