:root {
  --bg: #f4f7fb;
  --bg-2: #eef3f9;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-solid: #ffffff;
  --surface-soft: #f8fafc;
  --line: #e4eaf2;
  --line-strong: #d5deea;
  --text: #102033;
  --text-2: #617085;
  --text-3: #8c99aa;
  --blue: #2367f2;
  --blue-2: #6ea1ff;
  --cyan: #11b9c8;
  --teal: #009d9e;
  --amber: #e7a740;
  --red: #dd5d67;
  --shadow: 0 18px 60px rgba(35, 62, 96, 0.08);
  --shadow-sm: 0 8px 28px rgba(35, 62, 96, 0.07);
  --radius: 18px;
  --radius-sm: 12px;
  --font: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-heading: var(--font);
  --font-mono: var(--font);
  --scroll-thumb: rgba(112, 132, 156, .52);
  --scroll-thumb-hover: rgba(72, 101, 137, .72);
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { min-height: 42px; border: 2px solid transparent; border-radius: 999px; background: var(--scroll-thumb); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
*::-webkit-scrollbar-corner { background: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
html { background: #07101b; }
body { overflow-x: clip; }
html:has(#dashboard-screen:not(.hidden)),
html:has(#dashboard-screen:not(.hidden)) body,
html:has(#dashboard-screen:not(.hidden)) .app-shell {
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .62; transform: none !important; box-shadow: none !important; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(35, 103, 242, 0.22); outline-offset: 2px; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.app-shell { min-height: 100vh; }
html:has(#dashboard-screen:not(.hidden)) .app-shell { min-height: 0; }
html.js-booting .art-copy > *, html.js-booting .login-panel > * { opacity: 0; }
html[data-session-present="true"].js-booting #login-screen { display: none; }
.boot-splash { display: none; position: fixed; inset: 0; z-index: 1000; place-items: center; align-content: center; gap: 13px; color: #dce8f5; background: #0c1522; }
html.session-restoring .boot-splash { display: grid; }
.boot-splash > span:last-child { display: grid; gap: 3px; text-align: center; }
.boot-splash strong { font-size: 16px; letter-spacing: -.03em; }
.boot-splash small { color: #71879e; font-size: 11px; }
.boot-splash-mark { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #31547c; border-radius: 12px; color: #67a0ff; box-shadow: 0 0 28px rgba(35, 103, 242, .14); }
.boot-splash-mark::before { content: ""; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; opacity: .55; }
.boot-splash-mark span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 13px currentColor; animation: boot-pulse 1.15s ease-in-out infinite; }

.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(420px, 0.82fr); background: #07101b; }
.login-art { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; }
.login-art-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .95; }
.art-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 12, 22, .9) 0%, rgba(4, 12, 22, .37) 55%, rgba(4, 12, 22, .05) 100%), linear-gradient(0deg, rgba(4, 12, 22, .86), transparent 55%); z-index: 1; }
.art-copy { position: absolute; z-index: 3; left: clamp(38px, 8vw, 128px); bottom: clamp(48px, 11vh, 128px); max-width: 610px; color: #fff; }
.brand-mark { width: 46px; height: 46px; border: 1px solid rgba(124, 196, 255, .56); border-radius: 14px; position: relative; display: grid; place-items: center; margin-bottom: 40px; box-shadow: 0 0 30px rgba(28, 140, 255, .21), inset 0 0 26px rgba(28, 140, 255, .12); }
.brand-mark-core { width: 13px; height: 13px; background: #5fd9f7; border-radius: 50%; box-shadow: 0 0 24px #54d5ff; }
.brand-mark-ring { position: absolute; width: 28px; height: 28px; border: 1px solid rgba(99, 210, 255, .75); border-radius: 50%; }
.eyebrow { margin: 0; color: var(--text-3); font-size: 10px; line-height: 1.2; letter-spacing: .19em; text-transform: uppercase; font-weight: 700; }
.art-copy .eyebrow { color: rgba(185, 221, 255, .75); }
.art-copy h1 { margin: 16px 0 18px; font-size: clamp(44px, 5vw, 78px); letter-spacing: -.065em; line-height: .98; font-weight: 550; }
.art-copy h1 span { color: #5fd3ee; }
.art-description { color: rgba(225, 239, 251, .73); max-width: 410px; font-size: 15px; line-height: 1.65; margin: 0; }
.art-signal { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; color: rgba(220, 239, 252, .74); font-size: 11px; letter-spacing: .03em; }
.signal-dot, .status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: #45d2bd; box-shadow: 0 0 0 4px rgba(69, 210, 189, .11), 0 0 18px rgba(69, 210, 189, .85); }
.login-panel-wrap { background: #f9fbfd; display: grid; place-items: center; position: relative; padding: 48px; }
.login-panel { width: min(100%, 420px); margin-top: -4vh; }
.mobile-brand { display: none; }
.login-kicker { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.login-kicker .status-dot { width: 6px; height: 6px; background: var(--blue); box-shadow: 0 0 0 4px rgba(35, 103, 242, .1), 0 0 16px rgba(35, 103, 242, .45); }
.login-panel h2 { margin: 22px 0 10px; font-size: 42px; letter-spacing: -.06em; font-weight: 600; }
.login-lede { color: var(--text-2); margin: 0 0 38px; line-height: 1.6; font-size: 14px; }
.pin-form { display: grid; gap: 11px; }
.pin-form label, .modal-card label { color: var(--text); font-size: 12px; font-weight: 700; }
.pin-input-wrap { position: relative; }
.pin-input-wrap input { width: 100%; border: 1px solid var(--line-strong); background: #fff; color: var(--text); border-radius: 13px; padding: 16px 52px 16px 17px; letter-spacing: .24em; font-size: 18px; transition: .2s ease; }
.pin-input-wrap input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(35, 103, 242, .1); }
.pin-reveal { position: absolute; right: 6px; top: 6px; height: 42px !important; width: 42px !important; }
.form-error { min-height: 18px; color: var(--red); font-size: 12px; margin: 2px 0 0; }
.login-error { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 3px; padding: 12px 13px; color: #a6313e; background: linear-gradient(135deg, #fff6f7, #fffafb); border: 1px solid #f2c8ce; border-radius: 12px; box-shadow: 0 9px 24px rgba(181, 55, 69, .08); animation: login-error-in .3s cubic-bezier(.2, .8, .2, 1); }
.login-error-icon { width: 38px; height: 38px; display: grid; place-items: center; color: #d84e5d; background: #ffe5e8; border-radius: 10px; }
.login-error-icon svg { width: 19px; height: 19px; stroke-width: 2; }
.login-error-copy { min-width: 0; display: grid; gap: 2px; line-height: 1.35; }
.login-error-copy strong { color: #9f2937; font-size: 13px; font-weight: 750; }
.login-error-copy > span { color: #a95761; font-size: 12px; }
.pin-form.has-error .pin-input-wrap input { border-color: #dc6370; box-shadow: 0 0 0 4px rgba(221, 93, 103, .11); }
.pin-form.error-bump .pin-input-wrap { animation: pin-error-bump .34s ease; }
.primary-button, .soft-button, .icon-button, .text-button, .logout-button { border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; }
.primary-button { background: var(--blue); color: #fff; min-height: 46px; border-radius: 11px; padding: 0 17px; font-size: 12px; font-weight: 750; box-shadow: 0 10px 22px rgba(35, 103, 242, .23); }
.primary-button:hover { background: #1459e2; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(35, 103, 242, .3); }
.login-button { width: 100%; margin-top: 5px; justify-content: space-between; padding-left: 19px; }
.login-button svg { width: 17px; }
.login-button.is-loading svg { display: none; }
:is(#sync-button, #instances-sync-button).is-loading svg { animation: dns-loading-spin .85s linear infinite; }
@media (prefers-reduced-motion: reduce) { :is(#sync-button, #instances-sync-button).is-loading svg { animation: none; } }
.login-button.is-loading::after { content: ""; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: dns-loading-spin .7s linear infinite; }
.icon-button { width: 36px; height: 36px; background: transparent; color: var(--text-2); border-radius: 10px; }
.icon-button:hover { color: var(--blue); background: var(--bg-2); }
.icon-button svg, .soft-button svg, .primary-button svg, .text-button svg, .logout-button svg { display:block;flex:0 0 auto;width:16px;height:16px;stroke-width:1.8;transform-box:fill-box;transform-origin:center; }
.login-footer { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 11px; margin-top: 46px; }
.tiny-lock { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: #edf3fb; color: var(--blue); }
.tiny-lock svg { width: 13px; }
.login-meta { position: absolute; left: 48px; right: 48px; bottom: 31px; display: flex; align-items: center; gap: 12px; color: #9aa6b4; font-size: 10px; letter-spacing: .03em; }
.meta-line { height: 1px; background: var(--line); flex: 1; }

.dashboard-screen { height: 100dvh; max-height: 100dvh; display: grid; grid-template-columns: 276px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; background: var(--bg); transition:grid-template-columns .28s cubic-bezier(.2,.8,.2,1); }
.sidebar { background: var(--surface-solid); border-right: 1px solid var(--line); padding: 27px 16px 18px; display: flex; flex-direction: column; min-width:0; min-height: 0; height: 100%; max-height: 100dvh; overflow-x: hidden; overflow-y: auto; transition:padding .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease; }
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 12px 32px; }
.brand-symbol { position: relative; width: 32px; height: 32px; border: 1px solid #b5c8e7; border-radius: 10px; display: grid; place-items: center; color: var(--blue); }
.brand-symbol::before, .brand-symbol::after { content: ""; position: absolute; border: 1px solid currentColor; border-radius: 50%; }
.brand-symbol::before { width: 18px; height: 18px; opacity: .55; }
.brand-symbol::after { width: 7px; height: 7px; background: currentColor; border: 0; box-shadow: 0 0 12px currentColor; }
.brand-symbol span { display: none; }
.sidebar-brand strong { display: block; font-size: 15px; letter-spacing: -.035em; }
.sidebar-brand small { color: var(--text-3); font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.sidebar-brand-copy{min-width:0}.sidebar-toggle{display:grid;place-items:center;width:31px;height:31px;min-width:31px;margin-left:auto;padding:0;color:var(--text-3);border:1px solid var(--line);border-radius:9px;background:var(--surface-soft);transition:color .16s ease,border-color .16s ease,background .16s ease,transform .2s ease}.sidebar-toggle svg{width:15px;height:15px}.sidebar-toggle:hover{color:var(--blue);border-color:#bdd2f7;background:color-mix(in srgb,var(--surface-soft) 88%,var(--blue));transform:translateX(-1px)}.sidebar-toggle:focus-visible{outline:2px solid color-mix(in srgb,var(--blue) 55%,transparent);outline-offset:2px}
.sidebar-status { margin: 0 8px 25px; padding: 9px 10px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; color: var(--text-2); font-size: 10px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 8px; }
.sidebar-status .status-dot { width: 6px; height: 6px; grid-row: span 2; }
.sidebar-status b { font-size: 10px; color: var(--text); font-weight: 700; text-transform: capitalize; }
.main-nav { display: grid; gap: 4px; padding: 2px; }
.nav-group { display: grid; gap: 0; min-width: 0; }
.nav-group-head { position: relative; min-width: 0; }
.nav-group-head > .nav-item { padding-right: 45px; }
.nav-group-toggle { position: absolute; z-index: 2; top: 50%; right: 7px; width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 9px; color: var(--text-3); background: transparent; transform: translateY(-50%); transition: color .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.nav-group-toggle svg { width: 15px; height: 15px; transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.nav-group-toggle:hover { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 18%, var(--line)); background: color-mix(in srgb, var(--blue) 8%, var(--surface-soft)); }
.nav-group-toggle:focus-visible, .nav-item:focus-visible { outline: 2px solid color-mix(in srgb, var(--blue) 55%, transparent); outline-offset: -2px; }
.nav-group.is-open .nav-group-toggle svg { transform: rotate(180deg); }
.nav-group.is-current .nav-group-toggle { color: var(--blue); }
.nav-sub { display: grid; gap: 2px; max-height: 0; margin: 0 0 0 18px; padding: 0 0 0 8px; overflow: hidden; visibility: hidden; border-left: 1px solid transparent; opacity: 0; pointer-events: none; transform: translateY(-5px); transition: max-height .22s cubic-bezier(.2,.8,.2,1), margin .22s ease, padding .22s ease, opacity .15s ease, transform .22s ease, border-color .15s ease, visibility 0s linear .22s; }
.nav-group.is-open .nav-sub { max-height: 112px; margin: 4px 0 5px 18px; padding: 3px 0 3px 8px; visibility: visible; border-left-color: color-mix(in srgb, var(--blue) 30%, var(--line)); opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.nav-item { border: 1px solid transparent; color: var(--text-2); background: transparent; width: 100%; min-width: 0; min-height: 42px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; text-align: left; border-radius: 12px; padding: 10px 11px; font-size: 12px; overflow: hidden; transition: color .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.nav-item > span { min-width: 0; white-space: nowrap; }
.nav-item svg { width: 16px; height: 16px; stroke-width: 1.7; transition: color .16s ease, transform .16s ease; }
.nav-item em { display: none; }
.nav-item:hover { color: var(--text); border-color: color-mix(in srgb, var(--blue) 10%, var(--line)); background: color-mix(in srgb, var(--blue) 5%, var(--surface-soft)); }
.nav-item:hover > svg { color: var(--blue); transform: translateX(1px); }
.nav-item.active { color: #1654cc; border-color: #c9dafa; background: linear-gradient(135deg, #eef5ff, #e7f0ff); font-weight: 750; box-shadow: inset 3px 0 0 var(--blue), 0 7px 18px rgba(35, 103, 242, .09); }
.nav-item.active em { color: var(--blue-2); }
.nav-item.section-active { color: #2b5b9d; border-color: #d9e5f5; background: #f1f6fc; font-weight: 700; }
.nav-sub-item { min-height: 36px; padding: 8px 10px; font-size: 11px; border-radius: 10px; }
.nav-sub-item svg { width: 14px; height: 14px; }
.sidebar-bottom { margin-top: auto; }
.operator-card { display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 9px; padding: 13px 10px; border-top: 1px solid var(--line); }
.operator-avatar { width: 29px; height: 29px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #4c7cf4, #16bbba); border-radius: 9px; font-size: 11px; font-weight: 750; }
.operator-card strong, .operator-card span { display: block; }
.operator-card strong { font-size: 11px; }
.operator-card span { font-size: 9px; color: var(--text-3); margin-top: 3px; }
.operator-card svg { width: 15px; color: var(--text-3); }
.logout-button { width: 100%; justify-content: flex-start; color: var(--text-2); background: transparent; padding: 10px; font-size: 11px; border-radius: 9px; }
.logout-button:hover { color: var(--red); background: #fff2f3; }
.dashboard-screen.sidebar-collapsed{grid-template-columns:76px minmax(0,1fr)}
.sidebar-collapsed .sidebar{padding:20px 10px}
.sidebar-collapsed .sidebar-brand{display:grid;justify-items:center;gap:11px;padding:0 0 22px}
.sidebar-collapsed .sidebar-brand-copy,.sidebar-collapsed .sidebar-status span:not(.status-dot),.sidebar-collapsed .sidebar-status b,.sidebar-collapsed .nav-item span,.sidebar-collapsed .nav-item em,.sidebar-collapsed .operator-card>div:not(.operator-avatar),.sidebar-collapsed .operator-card>svg,.sidebar-collapsed .logout-button span{display:none}
.sidebar-collapsed .sidebar-toggle{margin:0;width:34px;height:30px}
.sidebar-collapsed .sidebar-status{place-items:center;margin:0 8px 21px;padding:10px 0}
.sidebar-collapsed .main-nav{gap:5px}
.sidebar-collapsed .nav-group-toggle{right:0;width:20px;height:20px;border-radius:7px}
.sidebar-collapsed .nav-group-toggle svg{width:11px;height:11px}
.sidebar-collapsed .nav-group-head>.nav-item{padding-right:18px}
.sidebar-collapsed .nav-item{grid-template-columns:1fr;justify-items:center;padding:11px 5px}
.sidebar-collapsed .nav-item.active{box-shadow:inset 0 3px 0 var(--blue),0 7px 18px rgba(35,103,242,.09)}
.sidebar-collapsed .nav-group.is-open .nav-sub,.sidebar-collapsed .nav-sub{margin:2px 0 4px;padding:0;border:0;gap:3px}
.sidebar-collapsed .nav-sub-item{min-height:35px;padding:9px 5px}
.sidebar-collapsed .operator-card{display:flex;justify-content:center;padding:14px 0}
.sidebar-collapsed .logout-button{justify-content:center}
.main-content { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.topbar { flex-shrink: 0; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding: 0 clamp(24px, 4vw, 58px); background: rgba(244, 247, 251, .78); backdrop-filter: blur(16px); z-index: 10; }
.breadcrumbs { display: flex; align-items: center; gap: 9px; color: var(--text-3); font-size: 11px; }
.breadcrumbs svg { width: 13px; }
.breadcrumbs strong { color: var(--text); font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.64); color: var(--text-2); font-size: 10px; font-weight: 700; }
.live-pill .status-dot { width: 5px; height: 5px; }
.live-pill small { color: var(--text-3); font-weight: 500; margin-left: 3px; }
.soft-button { min-height: 36px; background: var(--surface-solid); color: var(--text-2); border: 1px solid var(--line); padding: 0 12px; border-radius: 9px; font-size: 11px; font-weight: 700; box-shadow: 0 4px 10px rgba(35, 62, 96, .03); }
.soft-button:hover { color: var(--blue); border-color: #bdd2f7; transform: translateY(-1px); }
.theme-button { border: 1px solid var(--line); background: var(--surface-solid); }
.language-switch { min-width: 48px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-solid); color: var(--text-2); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.language-switch:hover { color: var(--blue); background: var(--surface-soft); }.language-switch svg { width: 14px; height: 14px; }
.login-language-switch { position: absolute; top: 24px; right: 28px; z-index: 3; }
.notification-dot { position: absolute; width: 5px; height: 5px; background: var(--amber); border-radius: 50%; margin: -19px 0 0 18px; box-shadow: 0 0 0 3px var(--surface-solid); }
.notification-center{position:relative}.notification-button{position:relative}.notification-badge{position:absolute;top:-5px;right:-6px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border:2px solid var(--surface-solid);border-radius:999px;color:#fff;background:#e24a58;font-size:9px;font-weight:850;line-height:1;box-shadow:0 4px 10px rgba(195,43,59,.28)}.notification-panel{position:absolute;z-index:90;top:calc(100% + 12px);right:0;width:min(410px,calc(100vw - 28px));overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 78%,transparent);border-radius:18px;background:var(--surface-solid);box-shadow:0 24px 70px rgba(8,25,51,.22)}.notification-panel>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 18px 15px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--surface-solid) 94%,var(--blue)),var(--surface-solid))}.notification-panel>header .eyebrow{margin:0 0 3px}.notification-panel>header strong{font-size:17px}.notification-panel>header .text-button{font-size:10px}.notification-list{max-height:min(480px,62vh);overflow-y:auto}.notification-item{display:grid;width:100%;grid-template-columns:38px minmax(0,1fr);gap:11px;padding:14px 17px;border:0;border-bottom:1px solid var(--line);color:var(--text);background:var(--surface-solid);text-align:left;cursor:pointer;transition:background .16s ease}.notification-item:hover{background:var(--surface-soft)}.notification-item.is-unread{background:color-mix(in srgb,var(--surface-solid) 94%,var(--blue))}.notification-item-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:var(--blue);background:rgba(35,103,242,.1)}.notification-item-icon svg{width:18px}.severity-success .notification-item-icon{color:#08735d;background:#e4f8f1}.severity-warning .notification-item-icon{color:#986514;background:#fff2d8}.severity-error .notification-item-icon{color:#b32635;background:#ffe7e9}.notification-item-copy{display:grid;min-width:0;gap:4px}.notification-item-copy>span{display:flex;align-items:start;justify-content:space-between;gap:12px}.notification-item-copy strong{font-size:12px;line-height:1.35}.notification-item-copy time{flex:0 0 auto;color:var(--text-3);font-size:9px}.notification-item-copy small{color:var(--text-2);font-size:10px;line-height:1.45}.notification-item-copy em{width:max-content;padding:3px 6px;border-radius:999px;color:var(--text-3);background:var(--surface-soft);font-size:8px;font-style:normal;font-weight:750;text-transform:uppercase;letter-spacing:.06em}.notification-item.is-read{opacity:.68}.notification-panel>footer{display:flex;justify-content:center;padding:10px;border-top:1px solid var(--line)}.notification-panel>footer .text-button{gap:6px}.notification-panel>footer svg{width:13px}.notification-empty{display:grid;justify-items:center;gap:6px;padding:42px 20px;color:var(--text-3);text-align:center}.notification-empty>svg{width:26px;margin-bottom:5px;color:var(--blue)}.notification-empty strong{color:var(--text);font-size:13px}.notification-empty span{font-size:10px}.dark .severity-success .notification-item-icon{color:#5ee0ba;background:#123c35}.dark .severity-warning .notification-item-icon{color:#efc477;background:#2b2418}.dark .severity-error .notification-item-icon{color:#ff9aa6;background:#351d23}
.content-scroll { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 38px clamp(24px, 4vw, 58px) 70px; }
.view { max-width: 1440px; margin: 0 auto; }
.hero-row { min-height: 215px; display: flex; justify-content: space-between; align-items: center; gap: 40px; margin-bottom: 17px; }
.hero-row .eyebrow { display: flex; align-items: center; gap: 12px; }
.live-line { width: 50px; height: 1px; background: linear-gradient(90deg, var(--blue), transparent); display: inline-block; }
.page-title { margin: 12px 0 10px; font-size: clamp(34px, 4vw, 52px); line-height: .98; letter-spacing: -.065em; font-weight: 600; }
.page-title span { color: var(--blue); }
.page-lede { color: var(--text-2); font-size: 13px; line-height: 1.65; max-width: 535px; margin: 0; }
.hero-art { width: 250px; height: 178px; position: relative; display: grid; place-items: center; margin-right: 30px; }
.orbit { position: absolute; border: 1px solid rgba(35, 103, 242, .16); border-radius: 50%; transform: rotate(-25deg); }
.orbit-a { width: 210px; height: 75px; }
.orbit-b { width: 155px; height: 155px; border-color: rgba(17, 185, 200, .16); transform: rotate(45deg) scaleY(.52); }
.orbit-center { width: 57px; height: 57px; display: grid; place-items: center; background: linear-gradient(145deg, #fff, #ebf4ff); border: 1px solid #c6dbf8; color: var(--blue); border-radius: 18px; box-shadow: 0 16px 34px rgba(35, 103, 242, .15); z-index: 2; }
.orbit-center svg { width: 25px; height: 25px; stroke-width: 1.45; }
.orbit-node { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(35,103,242,.09), 0 0 18px rgba(35,103,242,.65); }
.node-a { top: 36px; left: 32px; background: var(--cyan); }.node-b { top: 124px; right: 20px; background: var(--amber); }.node-c { top: 12px; right: 43px; background: var(--blue-2); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 42px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 19px 20px; min-height: 125px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.stat-card::after { content: ""; width: 88px; height: 88px; border-radius: 50%; border: 1px solid var(--card-accent, #bdd2f7); position: absolute; right: -35px; bottom: -40px; opacity: .36; }
.stat-top { display: flex; justify-content: space-between; align-items: center; color: var(--text-2); font-size: 11px; }
.stat-icon { width: 28px; height: 28px; display: grid; place-items: center; background: var(--surface-soft); border-radius: 9px; color: var(--card-accent, var(--blue)); }
.stat-icon svg { width: 15px; }
.stat-value { display: flex; align-items: baseline; gap: 7px; margin-top: 17px; }
.stat-value strong { font-size: 29px; letter-spacing: -.055em; font-weight: 650; }
.stat-value span { font-size: 10px; color: var(--text-3); }
.stat-value span b { font: inherit; color: inherit; }
.section-heading, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.section-heading { margin-bottom: 15px; }
.section-heading h3, .panel-heading h3 { margin: 5px 0 0; font-size: 17px; letter-spacing: -.04em; }
.text-button { color: var(--blue); background: transparent; font-size: 11px; font-weight: 750; padding: 5px; }
.text-button:hover { gap: 13px; }
.provider-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 42px; }
.provider-card { display: flex; flex-direction: column; padding: 18px; min-height: 190px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); position: relative; }
.provider-card:hover { border-color: #bfd5f6; transform: translateY(-2px); box-shadow: var(--shadow); }
.provider-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.provider-logo { width: 33px; height: 33px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--provider-color, var(--blue)); box-shadow: 0 8px 16px color-mix(in srgb, var(--provider-color, var(--blue)) 22%, transparent); }
.provider-logo svg { width: 17px; }
.provider-health { color: var(--teal); font-size: 10px; display: inline-flex; align-items: center; gap: 5px; }
.provider-health::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.provider-card h4 { margin: 17px 0 4px; font-size: 13px; letter-spacing: -.02em; }
.provider-card p { margin: 0; color: var(--text-3); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.provider-card-bottom { position: static; display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-top: auto; padding-top: 16px; color: var(--text-2); font-size: 10px; }
.provider-card-bottom > div { min-width: 0; }.provider-card-bottom > div:last-child { text-align: right; }
.provider-card-bottom strong { display: block; font-size: 16px; color: var(--text); letter-spacing: -.04em; }
.lower-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; }
.panel { border: 1px solid var(--line); background: var(--surface-solid); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.activity-panel, .pulse-panel { min-height: 290px; padding: 20px; }
.health-tag { color: var(--teal); background: #e7f8f5; border-radius: 999px; padding: 5px 9px; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.activity-list { margin-top: 18px; display: grid; gap: 2px; }
.activity-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--blue); background: #edf4ff; }
.activity-icon.fail { color: var(--red); background: #fff0f1; }
.activity-icon svg { width: 14px; }
.activity-copy { min-width: 0; }
.activity-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; }
.activity-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; color: var(--text-3); font-size: 10px; }
.activity-time { color: var(--text-3); font-size: 9px; white-space: nowrap; }
.pulse-chart { height: 162px; margin-top: 20px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.chart-grid { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0, transparent 31px, rgba(35,103,242,.06) 32px), repeating-linear-gradient(90deg, transparent 0, transparent 63px, rgba(35,103,242,.04) 64px); }
.pulse-chart svg { position: absolute; inset: 5px 0 17px; width: 100%; height: calc(100% - 21px); overflow: visible; }
.chart-fill { fill: url(#gradient); fill: rgba(35, 103, 242, .06); }
.chart-line { fill: none; stroke: var(--blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 3px 7px rgba(35,103,242,.27)); }
.chart-labels { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; color: var(--text-3); font-size: 9px; }
.pulse-metrics { display: flex; gap: 40px; margin-top: 16px; }
.pulse-metrics strong { display: block; font-size: 19px; letter-spacing: -.05em; }.pulse-metrics strong span { color: var(--blue); font-size: 11px; }.pulse-metrics small { display: block; color: var(--text-3); font-size: 9px; margin-top: 4px; }

.section-header-large { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin: 10px 0 32px; }
.section-header-large .page-title { margin-top: 14px; }
.filter-row { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin-bottom: 15px; }
.search-wrap { width: min(360px, 100%); position: relative; }.search-wrap svg { position: absolute; left: 12px; top: 11px; width: 15px; color: var(--text-3); }.search-wrap input { width: 100%; height: 38px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 10px; padding: 0 14px 0 35px; color: var(--text); font-size: 11px; }.search-wrap input::placeholder { color: var(--text-3); }
.filter-pills { display: flex; gap: 5px; flex-wrap: wrap; }.filter-pill { background: transparent; border: 1px solid transparent; color: var(--text-2); border-radius: 8px; padding: 8px 10px; font-size: 10px; }.filter-pill:hover, .filter-pill.active { background: var(--surface-solid); border-color: var(--line); color: var(--blue); font-weight: 750; }
.table-panel { overflow: hidden; }
.table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-gutter: stable; }
.table-scroll:focus-visible { outline: 3px solid rgba(35, 103, 242, .18); outline-offset: -3px; }
.resource-table, .audit-table, .backup-table { width: 100%; border-collapse: collapse; }
.resource-table { min-width: 900px; }
.registrar-domain-table { min-width: 1180px; }
.registrar-domain-table th:nth-child(4),
.registrar-domain-table td:nth-child(4) { min-width: 210px; }
.audit-table { min-width: 1040px; }
.backup-table { min-width: 760px; }
.resource-table th, .resource-table td, .audit-table th, .audit-table td, .backup-table th, .backup-table td { padding: 14px 17px; border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; vertical-align: middle; }
.resource-table th, .audit-table th, .backup-table th { background: var(--surface-soft); color: var(--text-3); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; font-weight: 750; white-space: nowrap; }
.resource-table tbody tr:hover, .audit-table tbody tr:hover, .backup-table tbody tr:hover { background: #fbfdff; }
.resource-table th:first-child, .resource-table td:first-child { min-width: 270px; }
.resource-table th:nth-child(2), .resource-table td:nth-child(2) { min-width: 195px; }
.resource-table th:nth-child(3), .resource-table td:nth-child(3) { min-width: 120px; }
.resource-table th:nth-child(4), .resource-table td:nth-child(4) { min-width: 100px; }
.resource-table th:nth-child(5), .resource-table td:nth-child(5) { min-width: 145px; overflow-wrap: anywhere; }
.resource-table th:last-child, .resource-table td:last-child { width: 58px; min-width: 58px; }
.resource-table th:last-child, .resource-table td:last-child { position: sticky; right: 0; z-index: 1; background: var(--surface-solid); box-shadow: -8px 0 14px rgba(35, 62, 96, .04); }
.resource-table th:last-child { z-index: 2; background: var(--surface-soft); }
.firewall-table { min-width: 1080px; }
.firewall-table th:first-child, .firewall-table td:first-child { width: 235px; min-width: 235px; }
.firewall-table th:nth-child(2), .firewall-table td:nth-child(2) { width: 175px; min-width: 175px; }
.firewall-table th:nth-child(3), .firewall-table td:nth-child(3) { width: 340px; min-width: 340px; }
.firewall-table th:nth-child(4), .firewall-table td:nth-child(4) { width: 180px; min-width: 180px; }
.firewall-table th:nth-child(5), .firewall-table td:nth-child(5) { width: 150px; min-width: 150px; }
.firewall-table td { vertical-align: top; }
.firewall-table .row-actions { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; }
.firewall-row-action { width: 100%; min-height: 32px; justify-content: flex-start; padding: 7px 9px; font-size: 9px; }
.firewall-row-action svg { width: 13px; height: 13px; }
.firewall-account-cell small { display: block; margin-top: 4px; color: var(--text-3); font-size: 9px; }
.firewall-resource-name { align-items: flex-start; }
.firewall-resource-name strong { line-height: 1.4; }
.firewall-resource-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 8px; }
.firewall-resource-meta .provider-label, .firewall-resource-meta .status-label { font-size: 8px; }
.firewall-target-list { display: grid; gap: 8px; }
.firewall-target { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; min-width: 0; }
.firewall-target + .firewall-target { padding-top: 8px; border-top: 1px solid var(--line); }
.firewall-target-icon { width: 26px; height: 26px; display: grid; place-items: center; color: var(--blue); border-radius: 8px; background: #edf4ff; }
.firewall-target-icon svg { width: 13px; height: 13px; }
.firewall-target > div { min-width: 0; }
.firewall-target strong, .firewall-target > div > span { display: block; min-width: 0; }
.firewall-target strong { color: var(--text); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.firewall-target > div > span { margin-top: 2px; color: var(--text-3); font-size: 9px; }
.firewall-instance-link { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 11px; font-weight: 750; line-height: 1.35; text-align: left; cursor: pointer; }
.firewall-instance-link span { min-width: 0; overflow-wrap: anywhere; }
.firewall-instance-link svg { width: 11px; height: 11px; flex: 0 0 auto; color: var(--blue); opacity: .7; transition: opacity .16s ease, transform .16s ease; }
.firewall-instance-link:hover { color: var(--blue); }
.firewall-instance-link:hover svg { opacity: 1; transform: translate(1px, -1px); }
.firewall-instance-link:focus-visible { outline: 2px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: 3px; border-radius: 3px; }
.firewall-ip-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.firewall-ip-pill { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.firewall-ip-pill small { align-self: stretch; display: grid; place-items: center; padding: 4px 5px; color: var(--text-3); background: rgba(35, 103, 242, .06); font-size: 7px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.firewall-ip-pill code { padding: 4px 6px; color: var(--text-2); font: 700 9px/1.2 var(--font-mono); white-space: nowrap; }
.firewall-ip-copy { align-self: stretch; display: grid; width: 25px; flex: 0 0 25px; place-items: center; padding: 0; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--text-3); cursor: pointer; transition: color .16s ease, background .16s ease; }
.firewall-ip-copy svg { width: 11px; height: 11px; }
.firewall-ip-copy:hover { color: var(--blue); background: rgba(35, 103, 242, .08); }
.firewall-ip-copy:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.firewall-ip-pill.public { border-color: #acd9d3; background: #f2fbf9; }
.firewall-ip-pill.public small { color: #08786d; background: #dff5f1; }
.firewall-ip-pill.private small { color: var(--blue); }
.firewall-ip-pill.ipv6 code { max-width: 165px; overflow: hidden; text-overflow: ellipsis; }
.firewall-target-empty { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px; border: 1px dashed var(--line-strong); border-radius: 9px; background: var(--surface-soft); }
.firewall-target-empty > svg { width: 16px; height: 16px; margin: 2px 0 0 4px; color: var(--text-3); }
.firewall-target-empty strong, .firewall-target-empty span { display: block; }
.firewall-target-empty strong { color: var(--text-2); font-size: 10px; }
.firewall-target-empty span { margin-top: 3px; color: var(--text-3); font-size: 9px; line-height: 1.4; }
.firewall-network { display: grid; gap: 4px; }
.firewall-network strong, .firewall-network span, .firewall-network small { display: block; overflow-wrap: anywhere; }
.firewall-network strong { color: var(--text); font-size: 11px; }
.firewall-network span { color: var(--text-2); font-size: 10px; }
.firewall-network small { color: var(--text-3); font-size: 9px; }
.domain-table { min-width: 1080px; }
.domain-table th:first-child, .domain-table td:first-child { min-width: 300px; }
.domain-table th:nth-child(2), .domain-table td:nth-child(2) { min-width: 210px; }
.domain-table th:nth-child(3), .domain-table td:nth-child(3) { min-width: 110px; }
.domain-table th:nth-child(4), .domain-table td:nth-child(4) { min-width: 235px; }
.domain-table th:nth-child(5), .domain-table td:nth-child(5) { min-width: 170px; }
.domain-table th:nth-child(6), .domain-table td:nth-child(6) { width: 202px; min-width: 202px; }
.nameserver-cell { position: relative; display: grid; gap: 4px; padding-right: 31px; }.nameserver-cell code { color: var(--text-2); font: 650 10px/1.35 var(--font-mono); overflow-wrap: anywhere; }.nameserver-copy { position: absolute; top: 50%; right: 0; width: 26px; height: 26px; transform: translateY(-50%); }.nameserver-pending { color: var(--text-3); font-size: 10px; }
.audit-table td:first-child, .backup-table td:nth-child(3) { white-space: nowrap; }
.audit-table td:last-child { max-width: 430px; overflow-wrap: anywhere; color: var(--text-2); }
.resource-name { display: flex; min-width: 0; align-items: center; gap: 10px; }
.resource-name > div { min-width: 0; }
.resource-icon { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; background: #edf4ff; color: var(--blue); border-radius: 8px; }
.resource-icon svg { display: block; width: 14px; height: 14px; }
.resource-name strong { display: block; overflow-wrap: anywhere; font-size: 11px; }
.resource-name > div > span { display: block; color: var(--text-3); font-size: 9px; margin-top: 3px; }
.provider-label { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 10px; white-space: nowrap; }
.provider-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--provider-color, var(--blue)); }
.status-label { display: inline-flex; align-items: center; gap: 5px; color: var(--teal); font-size: 10px; text-transform: capitalize; white-space: nowrap; }
.status-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-label.warning { color: var(--amber); }
.status-label.error { color: var(--red); }
.row-actions { display: flex; align-items: center; justify-content: end; gap: 2px; }
.row-actions .icon-button { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 7px; }
.row-actions .icon-button svg { width: 14px; height: 14px; }
.empty-state { padding: 42px 20px; text-align: center; color: var(--text-3); font-size: 12px; }
.empty-state > svg { display: block; width: 24px; height: 24px; margin: 0 auto 12px; color: var(--blue-2); }
.empty-state > div > strong, .empty-state > div > span { display: block; }
.empty-state > div > strong + span, .empty-state > div > span + span { margin-top: 8px; }
.empty-state > button { margin-top: 16px; }
.dns-loading-state > svg { animation: dns-loading-spin .85s linear infinite; }
@keyframes dns-loading-spin { to { transform: rotate(360deg); } }
.provider-profile-dialog { width: min(94vw, 720px); }
.provider-profile-dialog .modal-card { max-height: min(90vh, 920px); overflow-y: auto; }
.provider-credential-panel { display: grid; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.provider-credential-panel.hidden { display: none; }
.credential-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 2px; }
.credential-heading > div { display: grid; gap: 2px; }
.credential-heading strong { font-size: 13px; color: var(--text); }
.credential-heading span:not(.provider-logo) { font-size: 11px; color: var(--text-3); }
.credential-status { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgba(22, 170, 145, .25); border-radius: 11px; color: #148875; background: rgba(22, 170, 145, .08); font-size: 11px; }
.credential-status svg, .form-hint svg { width: 15px; height: 15px; flex: 0 0 auto; }
.optional-label { color: var(--text-3); font-weight: 500; }
.provider-profile-dialog .form-hint { display: flex; align-items: center; gap: 7px; }
.guide-tabs { display: flex; gap: 7px; margin: 24px 0 16px; padding: 5px; width: fit-content; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-solid); }
.guide-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); white-space: nowrap; font-size: 11px; font-weight: 700; }
.guide-tab svg { width: 15px; height: 15px; }.guide-tab:hover { background: var(--surface-soft); }.guide-tab.active { color: var(--blue); background: #eaf2ff; }
.guide-page { display: grid; gap: 16px; }.guide-page.hidden { display: none; }
.guide-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-solid); box-shadow: var(--shadow-sm); }
.guide-hero h3 { margin: 3px 0 5px; font-size: 19px; }.guide-hero p:last-child { margin: 0; color: var(--text-2); font-size: 11px; line-height: 1.6; }.guide-doc-link { text-decoration: none; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .75fr); gap: 16px; align-items: start; }
.guide-steps { display: grid; gap: 0; margin: 0; padding: 6px 22px; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-solid); box-shadow: var(--shadow-sm); counter-reset: steps; }
.guide-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 13px; padding: 18px 0; border-bottom: 1px solid var(--line); }.guide-steps li:last-child { border-bottom: 0; }
.guide-steps li > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #eaf2ff; color: var(--blue); font-size: 10px; font-weight: 800; }
.guide-steps strong { display: block; margin: 1px 0 5px; font-size: 12px; }.guide-steps p { margin: 0; color: var(--text-2); font-size: 11px; line-height: 1.65; }.guide-page code { padding: 2px 5px; border-radius: 5px; color: var(--blue); background: var(--surface-soft); font-size: 10px; overflow-wrap: anywhere; }
.guide-faq { padding: 19px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-solid); box-shadow: var(--shadow-sm); }.guide-faq h4 { margin: 0 0 15px; font-size: 13px; }.guide-faq dl { display: grid; gap: 4px; margin: 0 0 16px; }.guide-faq dt { margin-top: 8px; color: var(--text); font-size: 10px; font-weight: 800; }.guide-faq dd { margin: 1px 0 0; color: var(--text-2); font-size: 10px; line-height: 1.55; }.guide-faq details { border-top: 1px solid var(--line); padding: 12px 0 0; margin-top: 12px; }.guide-faq summary { color: var(--text); cursor: pointer; font-size: 10px; font-weight: 750; }.guide-faq details p { margin: 8px 0 0; color: var(--text-2); font-size: 10px; line-height: 1.6; }
.account-cell strong, .account-cell span { display: block; }.account-cell strong { overflow-wrap: anywhere; font-size: 10px; font-weight: 750; }.account-cell span { color: var(--text-3); font-size: 9px; margin-top: 3px; }.domain-icon { color: #f28c39; background: #fff4e8; }
.profile-account-trigger { display: inline-flex; align-items: center; max-width: 100%; gap: 5px; margin: -5px -8px; padding: 5px 8px; border: 1px solid transparent; border-radius: 999px; box-sizing: border-box; color: inherit; background: transparent; font: inherit; font-weight: 700; line-height: 1.2; text-align: left; vertical-align: middle; cursor: help; transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.profile-account-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-account-trigger > svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--text-3); transition: color .16s ease, transform .16s ease; }
.profile-account-trigger:hover, .profile-account-trigger:focus-visible, .profile-account-trigger[aria-expanded="true"] { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 25%, transparent); background: color-mix(in srgb, var(--blue) 9%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--blue) 10%, transparent); }
.profile-account-trigger:hover > svg, .profile-account-trigger:focus-visible > svg, .profile-account-trigger[aria-expanded="true"] > svg { color: var(--blue); transform: scale(1.08); }
.profile-account-trigger:focus-visible { outline: 2px solid color-mix(in srgb, var(--blue) 30%, transparent); outline-offset: 2px; }
.profile-card h3 .profile-account-trigger { font-size: inherit; letter-spacing: inherit; }
.account-cell .profile-account-trigger { font-size: 12px; }
.account-cell .profile-account-trigger > span { display: inline; margin-top: 0; color: inherit; }
.profile-account-popover { position: fixed; inset: auto; z-index: 1200; width: min(340px, calc(100vw - 24px)); margin: 0; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line-strong) 82%, var(--blue)); border-radius: 15px; color: var(--text); background: color-mix(in srgb, var(--surface-solid) 96%, var(--blue)); box-shadow: 0 22px 58px rgba(5, 18, 34, .24), 0 5px 16px rgba(5, 18, 34, .12); pointer-events: auto; animation: profile-popover-in .16s cubic-bezier(.2,.8,.2,1); }
.profile-account-popover[hidden] { display: none !important; }
.profile-account-head { display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 11px; padding: 14px 15px 12px; border-bottom: 1px solid var(--line); }
.profile-account-head .provider-logo { width: 36px; height: 36px; border-radius: 10px; }
.profile-account-head .provider-logo svg { width: 17px; height: 17px; }
.profile-account-head small, .profile-account-head strong { display: block; min-width: 0; }
.profile-account-head small { margin-bottom: 3px; color: var(--text-3); font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.profile-account-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.profile-account-email { display: grid; gap: 5px; margin: 13px 14px 11px; padding: 12px 13px; border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--blue) 7%, var(--surface-soft)); }
.profile-account-email span { color: var(--text-3); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.profile-account-email strong { color: var(--text); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.profile-account-email strong.is-empty { color: var(--text-3); font-weight: 600; }
.profile-account-popover dl { display: grid; gap: 0; margin: 0; padding: 0 14px 13px; }
.profile-account-popover dl > div { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 11px; padding: 7px 0; border-top: 1px solid var(--line); }
.profile-account-popover dt { color: var(--text-3); font-size: 10px; font-weight: 700; }
.profile-account-popover dd { min-width: 0; margin: 0; color: var(--text-2); font-size: 11px; font-weight: 650; text-align: right; overflow-wrap: anywhere; }
@keyframes profile-popover-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.profile-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-solid); padding: 19px; min-height: 188px; box-shadow: var(--shadow-sm); display: flex; min-width: 0; flex-direction: column; }
.profile-card-head { display: flex; justify-content: space-between; align-items: start; }
.profile-card h3 { margin: 17px 0 4px; font-size: 15px; letter-spacing: -.03em; overflow-wrap: anywhere; }
.profile-card p { color: var(--text-3); font-size: 10px; margin: 0; overflow-wrap: anywhere; }
.profile-card .profile-meta { border-top: 1px solid var(--line); margin-top: auto; padding-top: 11px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--text-3); font-size: 9px; }
.profile-card .profile-meta > span:not(.provider-chip) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card .profile-meta .text-button { white-space: nowrap; padding: 4px 0; }
.provider-chip { display: inline-flex; padding: 5px 8px; border-radius: 7px; color: var(--blue); background: #edf4ff; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.ufw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.ufw-card { padding: 19px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-solid); box-shadow: var(--shadow-sm); }.ufw-card-head { display: flex; justify-content: space-between; }.ufw-card h3 { margin: 17px 0 5px; font-size: 15px; }.ufw-card p { margin: 0; color: var(--text-3); font-size: 10px; }.ufw-status { display: flex; gap: 8px; align-items: center; margin: 22px 0 17px; padding: 10px; border-radius: 9px; background: var(--surface-soft); color: var(--text-2); font-size: 10px; }.ufw-status .status-dot { width: 6px; height: 6px; }.ufw-card-actions { display: flex; gap: 7px; }.ufw-card-actions button { flex: 1; }
.ufw-version-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; color: var(--text-2); font-size: 11px; }.ufw-version-chip svg { width: 13px; }
.ufw-flow-overview { margin-bottom: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-solid); box-shadow: var(--shadow-sm); }
.ufw-flow-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 14px; }
.ufw-flow-heading h3 { margin: 5px 0 5px; font-size: 20px; }
.ufw-flow-heading p:last-child { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.ufw-flow-heading .primary-button { flex: 0 0 auto; }
.ufw-flow-prerequisites { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid #d9c38b; border-radius: 12px; color: #8a621d; background: #fff8e9; }
.ufw-flow-prerequisites > svg { width: 31px; height: 31px; padding: 7px; border-radius: 9px; background: rgba(231,167,64,.14); }
.ufw-flow-prerequisites div { display: grid; gap: 3px; }
.ufw-flow-prerequisites strong { font-size: 13px; }
.ufw-flow-prerequisites span { color: #8a7048; font-size: 12px; line-height: 1.45; }
.ufw-flow-prerequisites code { padding: 2px 5px; border-radius: 5px; color: inherit; background: rgba(231,167,64,.12); font-size: 11px; }
.ufw-flow-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ufw-flow-steps > li { position: relative; display: grid; align-content: start; min-width: 0; min-height: 218px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); overflow: hidden; }
.ufw-flow-steps > li::after { content: ""; position: absolute; right: -23px; bottom: -30px; width: 72px; height: 72px; border: 1px solid rgba(35,103,242,.1); border-radius: 50%; }
.ufw-flow-step-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 13px; }
.ufw-flow-number { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border-radius: 9px; color: #fff; background: var(--blue); font-size: 12px; font-weight: 800; }
.ufw-flow-mode { padding: 5px 7px; border-radius: 7px; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ufw-flow-mode.local { color: #4f6f92; background: #eaf1f8; }.ufw-flow-mode.read { color: #087c7d; background: #dff6f3; }.ufw-flow-mode.write { color: #a3444e; background: #ffe8ea; }.ufw-flow-mode.automatic { color: #765d1e; background: #fff1cf; }
.ufw-flow-steps > li > svg { width: 25px; height: 25px; margin-bottom: 11px; color: var(--blue); }
.ufw-flow-steps > li > strong { font-size: 14px; line-height: 1.3; }
.ufw-flow-steps > li > p { margin: 7px 0 14px; color: var(--text-2); font-size: 12px; line-height: 1.5; }
.ufw-flow-steps > li > small { display: flex; align-items: flex-start; gap: 6px; margin-top: auto; color: var(--text-3); font-size: 10px; line-height: 1.4; }
.ufw-flow-steps > li > small svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--teal); }
.ufw-default-overview { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(560px, 1.5fr) auto; align-items: center; gap: 22px; margin-bottom: 18px; padding: 20px 22px; border: 1px solid rgba(22, 170, 145, .28); border-radius: 17px; background: linear-gradient(135deg, rgba(22,170,145,.09), var(--surface-solid) 48%); box-shadow: var(--shadow-sm); }.ufw-default-copy { display: flex; align-items: center; gap: 14px; min-width: 0; }.ufw-default-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; color: var(--teal); background: rgba(22,170,145,.13); }.ufw-default-icon svg { width: 23px; height: 23px; }.ufw-default-copy h3 { margin: 4px 0 4px; font-size: 18px; }.ufw-default-copy > div > p:last-child { margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.45; }.ufw-default-points { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 8px; }.ufw-default-points > span { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 8px; align-items: center; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }.ufw-default-points svg { grid-row: 1 / 3; width: 17px; height: 17px; color: var(--teal); }.ufw-default-points strong, .ufw-default-points small { overflow-wrap: anywhere; }.ufw-default-points strong { font-size: 11px; line-height: 1.25; }.ufw-default-points small { margin-top: 2px; color: var(--text-3); font-size: 10px; line-height: 1.25; }.ufw-default-actions { display: grid; gap: 8px; }.ufw-default-actions button { white-space: nowrap; }
.ufw-template-dialog { width: min(calc(100vw - 40px), 1320px) !important; max-width: min(calc(100vw - 40px), 1320px) !important; height: min(95dvh, 1050px); max-height: min(95dvh, 1050px) !important; }.ufw-template-viewer { height: 100%; max-height: none; overflow: hidden; padding: 32px; gap: 18px; grid-template-rows: auto auto auto minmax(0,1fr) auto; }.ufw-template-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }.ufw-template-toolbar label { width: min(220px, 100%); }.ufw-template-toolbar input { background: var(--surface-solid) !important; }.ufw-template-name { padding: 8px 11px; border-radius: 9px; color: var(--teal); background: rgba(22,170,145,.1); font: 700 12px/1.2 var(--font-mono); }.ufw-template-scroll { min-height: 0; overflow-y: auto; display: grid; align-content: start; padding-right: 7px; scrollbar-gutter: stable; }.ufw-template-scroll > .rule-loading-state { min-height: 360px; }.ufw-template-scroll > #ufw-template-content { display: grid; gap: 16px; }.ufw-template-defaults { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }.ufw-template-defaults > div { padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }.ufw-template-defaults small, .ufw-template-defaults strong { display: block; }.ufw-template-defaults small { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }.ufw-template-defaults strong { margin-top: 6px; font-size: 16px; text-transform: uppercase; }.ufw-template-defaults > div:nth-child(1) strong, .ufw-template-defaults > div:nth-child(3) strong { color: var(--red); }.ufw-template-defaults > div:nth-child(2) strong { color: var(--teal); }.ufw-template-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.ufw-template-section { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }.ufw-template-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }.ufw-template-section-head h4 { margin: 4px 0 0; font-size: 17px; }.ufw-template-code-list { display: flex; flex-wrap: wrap; align-content: start; gap: 7px; max-height: 190px; overflow-y: auto; }.ufw-template-code-list code { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-2); background: var(--surface-solid); font: 12px/1.25 var(--font-mono); }.ufw-template-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }.ufw-template-table { width: 100%; min-width: 850px; border-collapse: collapse; background: var(--surface-solid); }.ufw-template-table th, .ufw-template-table td { padding: 10px 11px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; }.ufw-template-table th { color: var(--text-3); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }.ufw-template-table tr:last-child td { border-bottom: 0; }.ufw-template-disabled { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-weight: 700; }.ufw-template-disabled::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }.ufw-template-section pre { max-height: 380px; margin: 0; padding: 16px; overflow: auto; border-radius: 11px; color: #dce9f7; background: #0c1827; font: 13px/1.65 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ufw-template-safety { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid rgba(22,170,145,.34); border-radius: 14px; background: rgba(22,170,145,.08); }.ufw-template-safety > svg { width: 36px; height: 36px; padding: 9px; border-radius: 11px; color: var(--teal); background: rgba(22,170,145,.13); }.ufw-template-safety > span:nth-child(2) { display: grid; gap: 3px; }.ufw-template-safety strong { font-size: 14px; }.ufw-template-safety small { color: var(--text-2); font-size: 12px; line-height: 1.45; }
.ufw-template-save-state, .ufw-local-badge { padding: 7px 10px; border-radius: 999px; color: var(--teal); background: rgba(22,170,145,.13); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }.ufw-template-save-state.dirty { color: #a96d15; background: rgba(231,167,64,.17); }
.ufw-template-toolbar { align-items: flex-end; justify-content: flex-start; }.ufw-template-toolbar label:first-child { width: min(360px, 100%); }.ufw-template-toolbar label:nth-child(2) { width: min(190px, 100%); }.ufw-template-toolbar .soft-button { margin-left: auto; min-height: 45px; }
.ufw-template-default-editor { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }.ufw-template-default-editor select { background: var(--surface-solid); }.ufw-template-section label { gap: 7px; }.ufw-template-section textarea { resize: vertical; font-family: var(--font-mono); font-size: 12px; line-height: 1.45; }
.ufw-template-switches { display: grid; gap: 9px; margin: 13px 0; }.ufw-template-switches .switch-field { min-height: 58px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-solid); }
.ufw-template-network-details { margin-top: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-solid); }.ufw-template-network-details summary { padding: 12px 14px; cursor: pointer; color: var(--text-2); font-size: 12px; font-weight: 750; }.ufw-template-network-details[open] summary { border-bottom: 1px solid var(--line); }.ufw-template-network-details .form-two { padding: 14px; }
.ufw-template-rule-tools { display: flex; align-items: center; gap: 9px; }.ufw-template-rule-tools .soft-button { min-height: 36px; padding: 8px 11px; }.ufw-template-rule-table { min-width: 1040px; }.ufw-template-rule-table th:nth-child(1) { width: 54px; }.ufw-template-rule-table th:nth-child(2) { width: 120px; }.ufw-template-rule-table th:nth-child(3) { width: 190px; }.ufw-template-rule-table th:nth-child(4) { width: 120px; }.ufw-template-rule-table th:nth-child(5) { width: 110px; }.ufw-template-rule-table th:last-child { width: 52px; }.ufw-template-rule-table input:not([type="checkbox"]), .ufw-template-rule-table select { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--surface-solid); font-size: 12px; }.ufw-template-rule-table input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--blue); }
.ufw-template-output-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 16px; }.ufw-template-output-grid > section { min-width: 0; }.ufw-template-output-grid pre { max-height: 300px; }.ufw-template-actions { gap: 10px; }.ufw-template-actions .modal-action-spacer { flex: 1; }.ufw-template-actions .danger-button { color: var(--red); }.ufw-template-actions button:disabled { opacity: .48; cursor: not-allowed; }
.ufw-onboarding-dialog { width: min(calc(100vw - 40px), 1080px) !important; max-width: min(calc(100vw - 40px), 1080px) !important; max-height: min(94dvh, 900px) !important; }.ufw-onboarding-card { max-height: min(94dvh, 900px); padding: 32px; gap: 20px; }.ufw-register-notice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid rgba(22,170,145,.3); border-radius: 13px; color: var(--teal); background: rgba(22,170,145,.08); }.ufw-register-notice > svg { width: 30px; height: 30px; padding: 6px; flex: 0 0 30px; border-radius: 9px; background: rgba(22,170,145,.12); }.ufw-register-notice span { display: grid; gap: 3px; }.ufw-register-notice strong { font-size: 14px; }.ufw-register-notice small { color: var(--text-2); font-size: 12px; line-height: 1.4; }.ufw-onboarding-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); gap: 16px; }.ufw-connection-fields, .ufw-onboarding-template { display: grid; align-content: start; gap: 14px; padding: 19px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); }.ufw-onboarding-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 2px; }.ufw-onboarding-heading > span { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 9px; color: #fff; background: var(--blue); font-size: 12px; font-weight: 800; }.ufw-onboarding-heading > div { display: grid; gap: 2px; }.ufw-onboarding-heading strong { font-size: 15px; }.ufw-onboarding-heading small { color: var(--text-3); font-size: 11px; line-height: 1.35; }.ufw-onboarding-template ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.ufw-onboarding-template li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-solid); }.ufw-onboarding-template li > svg { width: 18px; height: 18px; padding: 3px; color: #fff; background: var(--teal); border-radius: 50%; }.ufw-onboarding-template li span { display: grid; gap: 2px; }.ufw-onboarding-template li strong { font-size: 12px; }.ufw-onboarding-template li small { color: var(--text-3); font-size: 11px; line-height: 1.4; }.ufw-onboarding-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }.ufw-onboarding-flow::before { content: ""; position: absolute; top: 18px; left: 12.5%; right: 12.5%; height: 2px; background: var(--line); }.ufw-onboarding-flow li { position: relative; display: grid; justify-items: center; gap: 3px; text-align: center; }.ufw-onboarding-flow li > span { z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--line-strong); border-radius: 50%; color: var(--text-2); background: var(--surface-solid); font-size: 12px; font-weight: 800; }.ufw-onboarding-flow li.active > span { border-color: var(--blue); color: #fff; background: var(--blue); box-shadow: 0 0 0 5px rgba(35,103,242,.1); }.ufw-onboarding-flow strong { margin-top: 3px; font-size: 12px; }.ufw-onboarding-flow small { color: var(--text-3); font-size: 10px; }
.ufw-policy-dialog { width: min(calc(100vw - 40px), 1440px) !important; max-width: min(calc(100vw - 40px), 1440px) !important; height: min(96dvh, 1100px); max-height: min(96dvh, 1100px) !important; }
.ufw-policy-editor { height: 100%; max-height: none; overflow: hidden; padding: 32px; gap: 20px; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.ufw-policy-editor .modal-heading h3 { font-size: 28px; }.ufw-policy-editor .modal-subtitle { margin-top: 9px; font-size: 14px; }.ufw-policy-editor .modal-heading .modal-close { width: 48px; height: 48px; border-radius: 14px; }
.ufw-safety-banner { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 18px; border: 1px solid rgba(22, 170, 145, .32); border-radius: 15px; background: rgba(22, 170, 145, .09); color: #148875; }
.ufw-safety-banner > svg { width: 38px; height: 38px; padding: 9px; flex: 0 0 auto; border-radius: 11px; background: rgba(22, 170, 145, .13); }.ufw-safety-banner span { display: grid; gap: 4px; }.ufw-safety-banner strong { font-size: 16px; }.ufw-safety-banner small { color: var(--text-2); font-size: 13px; line-height: 1.45; }
.ufw-policy-scroll { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 18px; padding-right: 8px; scrollbar-gutter: stable; }
.ufw-editor-section, .ufw-preview-panel { display: grid; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface-soft); }
.ufw-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.ufw-editor-heading h4 { margin: 5px 0 0; font-size: 20px; line-height: 1.25; }.ufw-editor-heading .soft-button { flex: 0 0 auto; min-height: 44px; padding-inline: 15px; font-size: 13px; }
.ufw-policy-editor > .ufw-policy-scroll label { font-size: 14px; }.ufw-policy-editor input:not([type="checkbox"]), .ufw-policy-editor select { min-height: 48px; }.ufw-policy-editor textarea { min-height: 150px; padding: 14px 15px; font-size: 15px; line-height: 1.55; }.ufw-policy-editor .form-hint { display: flex; align-items: flex-start; gap: 8px; margin: -2px 0 0; font-size: 13px; line-height: 1.55; }.ufw-policy-editor .form-hint svg { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; }
.ufw-toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.ufw-toggle-grid .switch-field { position: relative; min-height: 64px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-solid); font-size: 14px; font-weight: 700; line-height: 1.35; white-space: normal; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }.ufw-toggle-grid .switch-field:hover { border-color: #78a4df; background: color-mix(in srgb, var(--surface-solid) 92%, var(--blue)); box-shadow: 0 8px 24px rgba(35, 103, 242, .08); transform: translateY(-1px); }.ufw-toggle-grid .switch-field input { position: relative; width: 50px; height: 28px; flex: 0 0 50px; margin: 0 2px 0 0; appearance: none; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-soft); cursor: pointer; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }.ufw-toggle-grid .switch-field input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(7, 25, 48, .28); transition: transform .22s cubic-bezier(.2,.8,.2,1); }.ufw-toggle-grid .switch-field input:checked { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 4px rgba(35, 103, 242, .12); }.ufw-toggle-grid .switch-field input:checked::after { transform: translateX(22px); }.ufw-toggle-grid .switch-field input:focus-visible { outline: 3px solid rgba(35, 103, 242, .28); outline-offset: 3px; }
.ufw-rule-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-solid); }.ufw-rule-table { width: 100%; min-width: 1060px; border-collapse: collapse; }.ufw-rule-table th { padding: 13px 11px; text-align: left; color: var(--text-3); background: var(--surface-solid); border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }.ufw-rule-table td { padding: 9px 7px; border-bottom: 1px solid var(--line); }.ufw-rule-table tbody tr { transition: background .16s ease; }.ufw-rule-table tbody tr:hover { background: color-mix(in srgb, var(--surface-soft) 72%, transparent); }.ufw-rule-table tr:last-child td { border-bottom: 0; }.ufw-rule-table input:not([type="checkbox"]), .ufw-rule-table select { min-height: 44px !important; padding: 0 11px !important; font-size: 14px !important; }.ufw-rule-table input[type="checkbox"] { position: relative; width: 23px; height: 23px; margin: 0; appearance: none; border: 2px solid var(--line-strong); border-radius: 7px; background: var(--surface-soft); cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .14s ease; }.ufw-rule-table input[type="checkbox"]::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid white; border-width: 0 2px 2px 0; opacity: 0; transform: rotate(45deg) scale(.7); transition: opacity .14s ease, transform .14s ease; }.ufw-rule-table input[type="checkbox"]:checked { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 4px rgba(35, 103, 242, .12); }.ufw-rule-table input[type="checkbox"]:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }.ufw-rule-table input[type="checkbox"]:hover { transform: scale(1.06); }.ufw-rule-table input[type="checkbox"]:focus-visible { outline: 3px solid rgba(35, 103, 242, .3); outline-offset: 3px; }.ufw-rule-table td:nth-child(1) { width: 54px; text-align: center; }.ufw-rule-table td:nth-child(2) { width: 125px; }.ufw-rule-table td:nth-child(3) { width: 190px; }.ufw-rule-table td:nth-child(4) { width: 120px; }.ufw-rule-table td:nth-child(5) { width: 115px; }.ufw-rule-table td:last-child { width: 52px; }
.ufw-preview-panel { border-color: #b8d0f1; background: #f3f7fd; }.ufw-probe-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }.ufw-probe-item { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-solid); }.ufw-probe-item small, .ufw-probe-item strong { display: block; }.ufw-probe-item small { color: var(--text-3); font-size: 12px; }.ufw-probe-item strong { margin-top: 6px; overflow-wrap: anywhere; font-size: 14px; }.ufw-warning-list { display: grid; gap: 9px; }.ufw-warning-item { display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px; color: #8b611c; border: 1px solid #ead19e; border-radius: 11px; background: #fff8e9; font-size: 13px; line-height: 1.5; }.ufw-warning-item svg { width: 17px; flex: 0 0 auto; }.ufw-preview-panel pre { max-height: 320px; margin: 0; padding: 16px; overflow: auto; color: #dce9f7; background: #0c1827; border-radius: 12px; font: 13px/1.65 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ufw-version-list { display: grid; gap: 9px; }.ufw-version-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 13px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-solid); }.ufw-version-number { width: 42px; height: 42px; display: grid; place-items: center; color: var(--blue); background: #eaf2ff; border-radius: 11px; font-size: 13px; font-weight: 800; }.ufw-version-copy strong, .ufw-version-copy span { display: block; }.ufw-version-copy strong { font-size: 14px; }.ufw-version-copy span { margin-top: 4px; color: var(--text-3); font-size: 12px; }.ufw-version-status { color: var(--text-2); font-size: 12px; font-weight: 700; }.ufw-version-status.applied { color: var(--teal); }.ufw-version-status.failed { color: var(--red); }
.ufw-policy-actions { margin-top: 0; gap: 11px; padding-top: 18px; }.ufw-policy-actions .soft-button, .ufw-policy-actions .primary-button { min-height: 48px; padding-inline: 17px; font-size: 14px; border-radius: 12px; }.ufw-policy-actions svg { width: 17px; height: 17px; }

.modal-subtitle { margin: 7px 0 0; color: var(--text-3); font-size: 10px; }.form-hint { margin: -2px 0 2px; color: var(--text-3); font-size: 10px; line-height: 1.45; }
body:has(dialog.modal-dialog[open]),body:has(dialog.modal-shell[open]) { overflow: hidden; }
dialog.modal-shell{width:min(920px,calc(100vw - 28px));max-width:calc(100vw - 28px);max-height:92dvh;margin:auto;padding:0;border:0!important;outline:0!important;border-radius:26px;background:transparent;color:var(--text);box-shadow:none;overflow:hidden;appearance:none}dialog.modal-shell:focus,dialog.modal-shell:focus-visible{border:0!important;outline:0!important;box-shadow:none}dialog.modal-shell::backdrop{background:rgba(10,24,43,.38);backdrop-filter:blur(8px)}
dialog.modal-dialog { width: min(560px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: min(88vh, 760px); margin: auto; padding: 0; border: 0; border-radius: 20px; background: transparent; color: var(--text); box-shadow: 0 28px 90px rgba(8, 25, 51, .24); overflow: hidden; }
dialog.modal-dialog::backdrop { background: rgba(10, 24, 43, .42); backdrop-filter: blur(7px); }
.modal-card { display: grid; gap: 16px; width: 100%; max-height: min(88vh, 760px); overflow-y: auto; overscroll-behavior: contain; padding: 28px; background: var(--surface-solid); border: 1px solid rgba(213, 222, 234, .92); border-radius: 20px; box-shadow: 0 18px 55px rgba(35, 62, 96, .14); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 4px; }
.modal-heading h3 { margin: 6px 0 0; color: var(--text); font-size: 24px; line-height: 1.08; letter-spacing: -.05em; font-weight: 650; }
.modal-heading .icon-button { flex: 0 0 auto; margin: -5px -5px 0 0; }
.modal-card > label, .form-two > label { display: grid; gap: 8px; min-width: 0; }
.modal-card input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .modal-card select, .modal-card textarea { width: 100%; min-width: 0; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-soft); color: var(--text); padding: 0 13px; font-size: 12px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.modal-card input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .modal-card select { height: 44px; }
.modal-card textarea { min-height: 92px; padding: 12px 13px; line-height: 1.5; resize: vertical; }
.modal-card input::placeholder, .modal-card textarea::placeholder { color: var(--text-3); }
.modal-card input:focus, .modal-card select:focus, .modal-card textarea:focus { outline: 0; border-color: var(--blue); background: var(--surface-solid); box-shadow: 0 0 0 3px rgba(35, 103, 242, .11); }
.modal-card select { appearance: auto; cursor: pointer; }
.modal-warning { display: flex; align-items: center; gap: 11px; margin: -2px 0 1px; padding: 11px 12px; border: 1px solid #efd7a7; border-radius: 11px; background: linear-gradient(135deg, #fff9ec, #fffdf8); color: #805a1b; font-size: 11px; line-height: 1.45; box-shadow: inset 3px 0 0 #e1a43c; }
.modal-warning svg { width: 30px; height: 30px; padding: 7px; flex: 0 0 auto; color: #b87a16; background: rgba(225, 164, 60, .12); border-radius: 9px; }
.form-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.modal-actions .soft-button, .modal-actions .primary-button { min-height: 42px; }
.bulk-dialog { width: min(650px, calc(100vw - 28px)); }
.bulk-card { max-height: min(90vh, 820px); }
.bulk-impact { display: grid; gap: 10px; padding: 13px; border: 1px solid #cbdcf4; border-radius: 13px; background: #f5f8ff; }
.bulk-impact.is-empty { border-color: #efd7a7; background: #fff9ec; }
.bulk-impact-summary { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; }
.bulk-impact-summary > svg { width: 32px; height: 32px; padding: 8px; color: var(--blue); border-radius: 9px; background: rgba(35, 103, 242, .1); }
.bulk-impact.is-empty .bulk-impact-summary > svg { color: var(--amber); background: rgba(225, 164, 60, .13); }
.bulk-impact-summary strong, .bulk-impact-summary span { display: block; }
.bulk-impact-summary strong { font-size: 12px; }
.bulk-impact-summary span { margin-top: 3px; color: var(--text-3); font-size: 10px; }
.bulk-impact-targets { display: flex; flex-wrap: wrap; gap: 6px; }
.bulk-impact-targets span { display: block; max-width: 100%; padding: 6px 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-solid); color: var(--text-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.bulk-impact > p { margin: 0; color: var(--text-2); font-size: 10px; line-height: 1.45; }
.bulk-impact-note { display: flex; align-items: center; gap: 7px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 9px; }
.bulk-impact-note svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--blue); }
.snapshot-pre { margin: 0; max-height: 52vh; overflow: auto; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--text-2); font: 11px/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.zone-created-dialog { width: min(620px, calc(100vw - 32px)) !important; }.zone-created-success { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 13px; padding: 15px; border: 1px solid rgba(0,157,158,.27); border-radius: 13px; background: color-mix(in srgb, var(--surface-solid) 88%, var(--teal)); }.zone-created-success > svg { width: 34px; height: 34px; padding: 8px; color: var(--teal); border-radius: 10px; background: rgba(0,157,158,.12); }.zone-created-success strong, .zone-created-success span { display: block; }.zone-created-success strong { font-size: 13px; }.zone-created-success span { margin-top: 4px; color: var(--text-2); font-size: 11px; line-height: 1.5; }.assigned-nameservers { display: grid; gap: 9px; }.assigned-nameservers > div { display: grid; grid-template-columns: 28px minmax(0,1fr) 34px; align-items: center; gap: 10px; min-height: 52px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }.assigned-nameservers > div > span { display: grid; place-items: center; width: 28px; height: 28px; color: var(--blue); border-radius: 8px; background: rgba(35,103,242,.1); font-size: 11px; font-weight: 800; }.assigned-nameservers code { color: var(--text); font: 700 13px/1.4 var(--font-mono); overflow-wrap: anywhere; }
.confirm-dialog { width: min(570px, calc(100vw - 32px)) !important; }.confirm-card { gap: 14px; padding: 26px; overflow: hidden; }.confirm-heading { display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: start; gap: 15px; }.confirm-heading .eyebrow { margin-top: 2px; }.confirm-heading h3 { margin: 7px 0 7px; font-size: 23px; line-height: 1.12; letter-spacing: -.045em; }.confirm-heading p:last-child { margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.55; }.confirm-icon { display: grid; place-items: center; width: 46px; height: 46px; color: var(--blue); border: 1px solid rgba(35,103,242,.2); border-radius: 14px; background: rgba(35,103,242,.09); }.confirm-icon svg { width: 22px; height: 22px; }.confirm-subject { display: grid; gap: 5px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }.confirm-subject small, .confirm-facts span { color: var(--text-3); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }.confirm-subject strong { color: var(--text); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }.confirm-facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }.confirm-facts > div { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; }.confirm-facts strong { color: var(--text-2); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }.confirm-warning { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 10px; padding: 12px 13px; color: #8a5d18; border: 1px solid #ecd29e; border-radius: 11px; background: #fff8e9; font-size: 11px; line-height: 1.5; }.confirm-warning svg { width: 17px; height: 17px; color: #c18422; }.confirm-actions { margin-top: 1px; }.confirm-actions button { min-width: 118px; }.confirm-dialog.is-danger .confirm-icon { color: var(--red); border-color: rgba(221,93,103,.25); background: rgba(221,93,103,.1); }.confirm-dialog.is-danger .confirm-submit { background: var(--red); box-shadow: 0 10px 22px rgba(221,93,103,.23); }.confirm-dialog.is-danger .confirm-submit:hover { background: #c84b57; box-shadow: 0 12px 26px rgba(221,93,103,.3); }.dark .confirm-warning { color: #efc477; border-color: #604b27; background: #2b2418; }.dark .confirm-dialog.is-danger .confirm-submit { color: #fff; background: #c8525e; }
.cloudflare-zone-dialog { width: min(calc(100vw - 24px), 1600px) !important; height: min(96dvh, 1040px); max-height: calc(100dvh - 12px) !important; }
.cloudflare-zone-editor { height: 100%; max-height: none; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; overflow: hidden; }
.cloudflare-zone-editor .modal-subtitle { color: var(--text-2); }
.zone-editor-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.zone-editor-tab { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; min-height: 54px; padding: 7px 12px; color: var(--text-3); border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.zone-editor-tab > svg { width: 17px; height: 17px; padding: 9px; box-sizing: content-box; color: currentColor; border-radius: 10px; background: color-mix(in srgb, var(--surface-solid) 74%, var(--line)); }
.zone-editor-tab > span, .zone-editor-tab strong, .zone-editor-tab small { display: block; min-width: 0; }
.zone-editor-tab strong { overflow: hidden; color: var(--text-2); font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.zone-editor-tab small { margin-top: 3px; overflow: hidden; color: var(--text-3); font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.zone-editor-tab:hover { color: #d87515; border-color: color-mix(in srgb, var(--line) 68%, #f28c39); background: color-mix(in srgb, var(--surface-solid) 93%, #f28c39); }
.zone-editor-tab.active { color: #d87515; border-color: color-mix(in srgb, var(--line) 54%, #f28c39); background: var(--surface-solid); box-shadow: 0 7px 20px rgba(54, 77, 105, .09); }
.zone-editor-tab.active::after { content: ""; position: absolute; right: 14px; bottom: -6px; left: 14px; height: 3px; border-radius: 999px; background: #f28c39; }
.zone-editor-tab.active strong { color: var(--text); }
.zone-editor-tab:focus-visible { outline: 3px solid rgba(35, 103, 242, .24); outline-offset: 2px; }
.zone-editor-panels, .zone-editor-panel { min-height: 0; }
.zone-editor-panels { overflow: hidden; }
.zone-editor-panel { height: 100%; overflow: auto; padding: 1px 4px 1px 1px; scrollbar-gutter: stable; }
.zone-editor-panel[hidden] { display: none !important; }
.zone-editor-panel-dns { display: grid; overflow: hidden; padding: 0; }
.zone-editor-panel-stack { display: grid; align-content: start; gap: 14px; min-height: 100%; }
.dark .zone-editor-tab.active { background: #172536; border-color: #654a2e; box-shadow: 0 8px 22px rgba(0, 0, 0, .24); }
.zone-settings-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid #f4d6a0; border-radius: 12px; background: #fff8e9; }
.zone-settings-panel strong, .zone-settings-panel span { display: block; }.zone-settings-panel strong { font-size: 11px; }.zone-settings-panel > div > span { margin-top: 3px; color: #6e542d; font-size: 9px; line-height: 1.4; }
.switch-field { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 10px; white-space: nowrap; }.switch-field input, .check-field input { width: 16px; height: 16px; accent-color: var(--blue); }.switch-field span { display: inline; }
.email-routing-panel { display: grid; grid-template-columns: minmax(270px, .9fr) minmax(330px, 1.1fr); gap: 12px 18px; padding: 14px 15px; border: 1px solid color-mix(in srgb, #f28c39 38%, var(--line)); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-solid) 93%, #f28c39), var(--surface-solid) 55%); }
.email-routing-heading { display: grid; grid-template-columns: 38px minmax(0,1fr) 34px; align-items: start; gap: 11px; min-width: 0; }.email-routing-icon { display: grid; place-items: center; width: 38px; height: 38px; color: #d87515; border-radius: 11px; background: color-mix(in srgb, var(--surface-solid) 72%, #f28c39); }.email-routing-icon svg { width: 18px; height: 18px; }.email-routing-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 24px; }.email-routing-title h4 { margin: 0; color: var(--text); font-size: 13px; }.email-routing-heading p { margin: 3px 0 0; color: var(--text-2); font-size: 10px; line-height: 1.45; }.email-routing-heading p strong { color: var(--text); overflow-wrap: anywhere; }.email-routing-heading > .icon-button { width: 34px; height: 34px; }
.email-routing-status { display: inline-flex; align-items: center; min-height: 21px; padding: 0 8px; color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); font-size: 9px; font-weight: 800; letter-spacing: .03em; }.email-routing-status.active { color: #087a66; border-color: rgba(0,157,158,.25); background: rgba(0,157,158,.09); }.email-routing-status.inactive { color: #7d6841; border-color: rgba(199,147,53,.25); background: rgba(199,147,53,.09); }.email-routing-status.error { color: var(--red); border-color: rgba(221,93,103,.25); background: rgba(221,93,103,.09); }
.email-routing-form { display: grid; grid-template-columns: minmax(210px,1fr) auto; align-items: end; gap: 10px; min-width: 0; }.email-routing-form > label { display: grid; gap: 6px; color: var(--text-2); font-size: 9px; font-weight: 750; }.email-routing-form input { height: 40px !important; background: var(--surface-solid) !important; }.email-routing-actions { display: flex; align-items: center; gap: 8px; }.email-routing-actions button { min-height: 40px; white-space: nowrap; }
.email-routing-notice { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 9px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--text-2); }.email-routing-notice > svg { width: 17px; height: 17px; margin-top: 1px; }.email-routing-notice span, .email-routing-notice strong, .email-routing-notice small { display: block; }.email-routing-notice strong { color: var(--text); font-size: 10px; }.email-routing-notice small { margin-top: 2px; color: var(--text-2); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }.email-routing-notice.success { color: #087a66; border-color: rgba(0,157,158,.24); background: rgba(0,157,158,.07); }.email-routing-notice.warning { color: #a36d16; border-color: #ead19e; background: #fff8e9; }.email-routing-notice.error { color: var(--red); border-color: rgba(221,93,103,.26); background: rgba(221,93,103,.07); }
.zone-created-dialog:has(.email-routing-panel) { width: min(760px, calc(100vw - 32px)) !important; }.zone-created-dialog .email-routing-panel { grid-template-columns: 1fr; }.zone-created-dialog .email-routing-form { grid-template-columns: minmax(210px,1fr) auto; }
.dark .zone-settings-panel, .dark .email-routing-notice.warning { color: #efc477; border-color: #604b27; background: #2b2418; }.dark .zone-settings-panel > div > span { color: #c9a868; }
.dns-record-section { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-solid); }
.dns-record-heading { z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.dns-record-heading h4 { margin: 0; font-size: 13px; }.dns-record-heading span { display: block; margin-top: 3px; color: var(--text-3); font-size: 9px; }.dns-record-tools { display: flex; align-items: center; gap: 8px; }
.dns-search { position: relative; display: block; }.dns-search svg { position: absolute; left: 10px; top: 9px; width: 14px; color: var(--text-3); }.dns-search input { width: min(230px, 28vw) !important; height: 34px !important; padding-left: 31px !important; background: var(--surface-solid) !important; font-size: 10px !important; }
.dns-record-form { margin: 14px; padding: 15px; border: 1px solid #bdd3f7; border-radius: 12px; background: #f6f9ff; }
.dns-form-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.dns-form-heading strong { font-size: 12px; }.dns-form-grid { display: grid; grid-template-columns: 110px minmax(160px, 1fr) minmax(230px, 2fr) 100px 100px 105px; gap: 10px; }.dns-form-grid label { display: grid; align-content: start; gap: 6px; color: var(--text-2); font-size: 9px; font-weight: 700; }.dns-form-grid input:not([type="checkbox"]), .dns-form-grid select { height: 38px !important; padding: 0 10px !important; font-size: 10px !important; }.dns-proxy-field { align-content: center !important; }.check-field { display: flex; align-items: center; gap: 6px; min-height: 38px; font-weight: 500; }.dns-comment-field { grid-column: 1 / -1; }.dns-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
#dns-record-table { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }.dns-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }.dns-record-table { width: 100%; min-width: 900px; border-collapse: collapse; }.dns-record-table th, .dns-record-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: 12px; }.dns-record-table th { position: static; color: var(--text-3); background: var(--surface-soft); font-size: 9px; text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; }.dns-record-table tbody tr:last-child td { border-bottom: 0; }.dns-record-table td:nth-child(2) { min-width: 180px; }.dns-record-table td:nth-child(3) { max-width: 380px; }.dns-record-table th:last-child, .dns-record-table td:last-child { width: 68px; min-width: 68px; }.dns-record-table td:last-child { position: sticky; right: 0; background: var(--surface-solid); box-shadow: -8px 0 14px rgba(35,62,96,.04); }.dns-type { display: inline-flex; min-width: 45px; justify-content: center; padding: 5px 7px; border-radius: 6px; color: #9b5d15; background: #fff1df; font-size: 10px; font-weight: 800; }.dns-content-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }.dns-content { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; font-weight: 650; letter-spacing: .01em; }.dns-copy-button { width: 25px !important; height: 25px !important; flex: 0 0 25px; border-radius: 7px; color: var(--text-3); }.dns-copy-button svg { width: 13px !important; height: 13px !important; }.dns-record-table small { display: block; margin-top: 4px; color: var(--text-3); font-size: 9px; }.dns-proxy { color: var(--text-3); white-space: nowrap; }.dns-proxy.on { color: #d87515; font-weight: 750; }
.cloudflare-zone-editor > .modal-actions { margin-top: 0; background: var(--surface-solid); }
.rule-editor { max-height: 90vh; overflow: hidden; }
.rule-editor-body { display: grid; gap: 16px; min-height: 0; overflow: auto; padding: 1px 5px 1px 1px; }
.rule-section { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--surface-solid); }
.rule-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 14px; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.rule-section-heading h4 { margin: 0; font-size: 13px; }
.rule-section-heading span { display: block; margin-top: 3px; color: var(--text-3); font-size: 9px; }
.rule-section-heading .soft-button { padding: 8px 10px; font-size: 10px; }
.rule-section-heading .soft-button svg { width: 13px; }
.rule-table-scroll { overflow-x: auto; }
.rule-table { width: 100%; min-width: 930px; border-collapse: collapse; }
.rules-oci .rule-table { min-width: 860px; }
.rules-hetzner .rule-table { min-width: 1150px; }
.rule-table th, .rule-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.rule-table th { color: var(--text-3); background: var(--surface-soft); font-size: 8px; text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; }
.rule-table td { font-size: 10px; }
.rule-table tbody tr:last-child td { border-bottom: 0; }
.rule-table input:not([type="checkbox"]), .rule-table select { width: 100%; min-width: 82px; border: 1px solid var(--line-strong); background: var(--surface-soft); border-radius: 7px; padding: 8px 8px; color: var(--text); font: inherit; font-size: 10px; }
.rule-table td:nth-child(2) input { min-width: 150px; }.rule-table td:nth-last-child(2) input:not([type="checkbox"]) { min-width: 155px; }.rule-table input:focus, .rule-table select:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(35,103,242,.1); }.rule-table input[type="checkbox"] { position: relative; width: 24px; min-width: 24px; max-width: 24px; height: 24px; margin: 0; appearance: none; border: 1px solid var(--line-strong); border-radius: 8px; background: linear-gradient(145deg, var(--surface-solid), var(--surface-soft)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 2px 5px rgba(16,32,51,.07); cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .16s ease; }.rule-table input[type="checkbox"]::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; opacity: 0; transform: rotate(45deg) scale(.55); transition: opacity .14s ease, transform .2s cubic-bezier(.2,.8,.2,1); }.rule-table input[type="checkbox"]:hover { border-color: color-mix(in srgb, var(--blue) 58%, var(--line-strong)); box-shadow: 0 4px 11px rgba(35,103,242,.14); transform: translateY(-1px); }.rule-table input[type="checkbox"]:checked { border-color: var(--blue); background: linear-gradient(145deg, var(--blue-2), var(--blue)); box-shadow: 0 0 0 4px rgba(35,103,242,.12), 0 5px 12px rgba(35,103,242,.25); }.rule-table input[type="checkbox"]:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }.rule-table input[type="checkbox"]:active { transform: translateY(0) scale(.94); }.rule-table input[type="checkbox"]:focus-visible { outline: 3px solid rgba(35,103,242,.28); outline-offset: 3px; }.rule-check { text-align: center !important; }.rule-remove { color: var(--red); }.rule-empty { padding: 22px !important; text-align: center !important; color: var(--text-3); font-size: 10px !important; }
.modal-dialog.rule-dialog { width: min(calc(100vw - 40px), 1680px); height: min(92vh, calc(100vh - 24px)); max-height: calc(100vh - 24px); }
.rule-dialog .rule-editor { padding: 24px; }
.rule-editor { display: flex; height: 100%; max-height: none; min-height: 0; flex-direction: column; }
.rule-editor-body { height: auto; max-height: none; min-height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }
.rule-editor-body { align-content: start; }
.rule-heading-actions { display: flex; align-items: center; gap: 9px; }
.rule-draft-status { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--text-2); font-size: 9px; font-weight: 750; white-space: nowrap; }
.rule-draft-status svg { width: 13px; height: 13px; }
.rule-draft-status.is-live { color: var(--teal); border-color: #acd9d3; background: #f2fbf9; }
.rule-draft-status.is-dirty { color: #9b6716; border-color: #efd7a7; background: #fff9ec; }
.rule-draft-status.is-error { color: var(--red); border-color: #f1c8cc; background: #fff5f6; }
.rule-draft-status.is-refreshing svg { color: var(--blue); animation: dns-loading-spin .85s linear infinite; }
.rule-save-hint { margin-right: auto; color: var(--text-3); font-size: 9px; line-height: 1.4; }
.rule-editor #apply-rules:disabled { border-color: var(--line-strong); background: var(--surface-soft); color: var(--text-3); box-shadow: none; opacity: 1; }
.rule-loading-state { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 300px; padding: 36px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); color: var(--text-3); text-align: center; }
.rule-loading-state svg { width: 24px; height: 24px; color: var(--blue); animation: dns-loading-spin .85s linear infinite; }
.rule-loading-state strong { color: var(--text); font-size: 14px; }.rule-loading-state span { max-width: 540px; font-size: 11px; line-height: 1.5; }.rule-loading-state .soft-button { margin-top: 5px; }
.rule-load-error svg { color: var(--red); animation: none; }
.rule-refresh-state { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid #cfe0fb; border-radius: 9px; background: #f3f7ff; color: var(--text-2); font-size: 10px; }
.rule-refresh-state svg { width: 14px; height: 14px; color: var(--blue); animation: dns-loading-spin .85s linear infinite; }.rule-refresh-state .text-button { margin-left: auto; }
.rule-refresh-error { border-color: #f1c8cc; background: #fff5f6; color: var(--red); }.rule-refresh-error svg { animation: none; }
.rule-firewall-context { display: grid; grid-template-columns: minmax(0, .72fr) minmax(360px, 1.28fr); gap: 12px; padding: 12px; border: 1px solid #cfe0fb; border-radius: 13px; background: #f5f8ff; }
.rule-firewall-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rule-firewall-facts > span { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-solid); }
.rule-firewall-facts small, .rule-firewall-facts strong { display: block; }
.rule-firewall-facts small, .rule-firewall-target-label { color: var(--text-3); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.rule-firewall-facts strong { margin-top: 5px; color: var(--text); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.rule-firewall-target-label { display: block; margin: 2px 0 7px; }
.rule-firewall-context .firewall-target-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rule-firewall-context .firewall-target { padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-solid); }
.rule-firewall-context .firewall-target + .firewall-target { padding-top: 8px; }
.rule-firewall-context .firewall-target-empty { background: var(--surface-solid); }
.rule-section { min-width: 0; overflow: visible; }
.rule-section-heading { position: static; }
.rule-table th { position: static; }
.rule-table-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-gutter: stable; }
.rule-editor > .modal-actions { position: relative; z-index: 4; margin-top: 0; background: var(--surface-solid); }
.toast-region { position: fixed; right: 24px; bottom: 22px; display: grid; gap: 8px; z-index: 100; }.toast-region[popover] { inset: auto 24px 22px auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; }.toast-region[popover]:not(:popover-open) { display: none; }.toast-region[popover]:popover-open { display: grid; }.modal-toast-region { position: absolute; inset: auto auto 20px 20px; max-width: calc(100% - 40px); z-index: 30; pointer-events: none; }.modal-toast-region .toast { max-width: 100%; pointer-events: auto; }.toast { width: min(360px, calc(100vw - 48px)); background: #12243a; color: #fff; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 16px 40px rgba(8,25,51,.22); border-radius: 12px; padding: 13px 15px; display: flex; align-items: start; gap: 10px; font-size: 11px; line-height: 1.45; animation: toast-in .28s ease; }.toast.ok { border-left: 3px solid var(--teal); }.toast.error { border-left: 3px solid var(--red); }.toast.info { border-left: 3px solid var(--blue); }.toast svg { width: 16px; flex: none; }.toast button { border: 0; color: rgba(255,255,255,.55); background: transparent; margin-left: auto; }.skeleton { height: 12px; background: linear-gradient(90deg, #eef3f8, #f8fafc, #eef3f8); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 4px; }

body.dark { --bg: #0c1522; --bg-2: #111f31; --surface: rgba(16, 29, 45, .88); --surface-solid: #101e2f; --surface-soft: #14263b; --line: #20354d; --line-strong: #2a4562; --text: #e7f0fb; --text-2: #99acc0; --text-3: #63778f; --shadow: 0 18px 60px rgba(0,0,0,.22); --shadow-sm: 0 8px 28px rgba(0,0,0,.15); --scroll-thumb: rgba(105, 131, 160, .58); --scroll-thumb-hover: rgba(139, 169, 204, .76); }
html.dark { --bg: #0c1522; --bg-2: #111f31; --surface: rgba(16, 29, 45, .88); --surface-solid: #101e2f; --surface-soft: #14263b; --line: #20354d; --line-strong: #2a4562; --text: #e7f0fb; --text-2: #99acc0; --text-3: #63778f; --shadow: 0 18px 60px rgba(0,0,0,.22); --shadow-sm: 0 8px 28px rgba(0,0,0,.15); --scroll-thumb: rgba(105, 131, 160, .58); --scroll-thumb-hover: rgba(139, 169, 204, .76); }
body.dark .guide-tab.active, body.dark .guide-steps li > span { background: #152f55; }
body.dark .topbar { background: rgba(12,21,34,.78); }.dark .nav-item.active { background: #152f55; }.dark .live-pill, .dark .soft-button, .dark .theme-button { background: #14263b; }.dark .stat-card::after { opacity: .18; }.dark .chart-fill { fill: rgba(79, 141, 255, .1); }.dark .art-wash { opacity: .9; }.dark .login-panel-wrap { background: #0d1927; }.dark .login-panel h2, .dark .login-kicker, .dark .pin-form label { color: #e7f0fb; }.dark .login-lede { color: #91a6bc; }.dark .pin-input-wrap input { background: #12243a; border-color: #29445f; color: #e7f0fb; }.dark .login-footer { color: #71879e; }.dark .tiny-lock { background: #162f4e; }.dark .login-meta { color: #71879e; }.dark .modal-card { background: #101e2f; }.dark .modal-card input, .dark .modal-card select, .dark .modal-card textarea { background: #14263b; color: #e7f0fb; }.dark .table-panel tr:hover { background: #12243a; }
.dark .nav-item:hover { color: #eef5fc; border-color: #2a4968; background: #162b43; }
.dark .nav-item.active, .dark .nav-item.active:hover { color: #b7d2ff; border-color: #35679f; background: linear-gradient(135deg, #173a68, #142f53); box-shadow: inset 3px 0 0 #5794ff, 0 8px 20px rgba(0, 0, 0, .18); }
.dark .nav-item.section-active { color: #c0d4e9; border-color: #294967; background: #152a42; }
.dark .nav-item.section-active:hover { color: #f0f6fc; border-color: #376085; background: #19334f; }
.dark .nav-group-toggle:hover { color: #b7d2ff; border-color: #345879; background: #1b334d; }
.dark .nav-group.is-current .nav-group-toggle { color: #91b9ff; }
.dark .nav-group.is-open .nav-sub { border-left-color: #315b88; }
.dark .logout-button:hover { color: #ff8d97; background: #2c1e29; box-shadow: inset 3px 0 0 rgba(255, 111, 124, .55); }
.dark .icon-button:hover, .dark .language-switch:hover { color: #8db6ff; background: #192d44; border-color: #345475; }
.dark .soft-button:hover { color: #91b9ff; background: #192e46; border-color: #3b5d82; box-shadow: 0 7px 18px rgba(0, 0, 0, .16); }
.dark .filter-pill:hover, .dark .filter-pill.active { color: #8db6ff; background: #172b42; border-color: #315170; }
.dark .provider-card:hover { background: #122238; border-color: #355b83; box-shadow: 0 18px 45px rgba(0, 0, 0, .2); }
.dark .guide-tab:hover { background: #182c43; color: #c8d7e8; }
.dark .guide-tab.active:hover { background: #19375f; color: #8eb6ff; }
.dark .resource-table tbody tr:hover, .dark .audit-table tbody tr:hover, .dark .backup-table tbody tr:hover { background: #13243a; }

.dropcatch-safety-banner{display:flex;align-items:center;gap:16px;padding:18px 20px;margin-bottom:18px;border:1px solid #9bc5ff;border-radius:14px;background:linear-gradient(135deg,#edf6ff,#f8fbff)}
.dropcatch-safety-banner>span:first-child{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:#1462d2;background:#dcecff;flex:0 0 auto}.dropcatch-safety-banner svg{width:20px}.dropcatch-safety-banner div{flex:1}.dropcatch-safety-banner strong{display:block;color:var(--text-1);margin-bottom:3px}.dropcatch-safety-banner p{margin:0;color:var(--text-2);font-size:12px;line-height:1.5}
.dropcatch-safety-banner>.status-label{flex:0 0 auto;text-transform:none;white-space:nowrap}
.dropcatch-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.dropcatch-summary article{display:flex;align-items:center;gap:13px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.dropcatch-summary article>span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--accent);background:var(--surface-soft)}.dropcatch-summary small{display:block;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-size:9px}.dropcatch-summary strong{font-size:21px;color:var(--text-1)}
.dropcatch-tactics{position:relative;margin:0 0 18px;padding:22px;overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 72%,#4f8dff);border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-solid) 97%,#4f8dff),var(--surface-solid));box-shadow:0 15px 38px rgba(30,74,135,.07)}
.dropcatch-tactics::before{position:absolute;inset:0 auto auto 7%;width:44%;height:1px;content:"";background:linear-gradient(90deg,transparent,#69a3ff,transparent);opacity:.7}
.dropcatch-tactics-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:17px}.dropcatch-tactics-head>div:first-child{min-width:0}.dropcatch-tactics-head .eyebrow{margin:0 0 6px;color:#377be6}.dropcatch-tactics-head h3{margin:0;color:var(--text-1);font-size:18px;letter-spacing:-.025em}.dropcatch-tactics-head p:last-child{max-width:760px;margin:7px 0 0;color:var(--text-2);font-size:11px;line-height:1.55}
.dropcatch-tactics-live{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:8px 11px;color:#087f73;border:1px solid rgba(36,174,153,.26);border-radius:99px;background:rgba(44,190,168,.08);font-size:10px;font-weight:750;white-space:nowrap}.dropcatch-tactics-live span{width:7px;height:7px;border-radius:50%;background:#25bba5;box-shadow:0 0 0 0 rgba(37,187,165,.35);animation:dropcatch-live-pulse 2s ease-out infinite}
.dropcatch-tactics-timing{display:grid;gap:9px;margin-bottom:14px}.tactics-watch-scope{width:max-content;padding:5px 8px;color:#2868c8;border:1px solid #c6daf8;border-radius:7px;background:#eef5ff;font-size:9px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}.tactics-cadence{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.tactics-cadence article{position:relative;min-width:0;padding:10px 11px;border:1px solid var(--line);border-radius:11px;background:var(--surface-solid)}.tactics-cadence article:not(:last-child)::after{position:absolute;z-index:2;top:50%;right:-7px;width:6px;height:1px;content:"";background:#94b9f4}.tactics-cadence small,.tactics-cadence strong,.tactics-cadence span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tactics-cadence small{color:var(--text-3);font-size:8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.tactics-cadence strong{margin-top:4px;color:var(--text);font-size:12px}.tactics-cadence span{margin-top:3px;color:var(--text-3);font-size:8px}.tactics-cadence .attack{border-color:#f0c986;background:#fff8e9}.tactics-cadence .attack strong{color:#a66416}.tactics-cadence .retry{border-color:#8ed7cc;background:#eefaf8}.tactics-cadence .retry strong{color:#08786d}.tactics-fine-print{margin:0;padding:8px 10px;color:var(--text-2);border-left:3px solid #4f8dff;border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--surface-soft) 94%,var(--blue));font-size:9px;line-height:1.5}.tactics-fine-print b{color:var(--text)}
.dropcatch-canvas-shell{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 76%,#4f8dff);border-radius:16px;background:var(--surface-soft);box-shadow:inset 0 1px rgba(255,255,255,.45)}.dropcatch-canvas-shell canvas{display:block;width:100%;height:330px}.dropcatch-canvas-sheen{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 9% 0%,rgba(92,155,255,.12),transparent 30%),linear-gradient(115deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%)}
.dropcatch-tactics-fallback{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:12px 0 0;padding:0;list-style:none}.dropcatch-tactics-fallback li{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:9px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--surface-solid) 92%,#4f8dff)}.dropcatch-tactics-fallback b{display:grid;place-items:center;width:24px;height:24px;color:#2367d8;border-radius:7px;background:color-mix(in srgb,var(--surface-solid) 72%,#6aa1ff);font-size:9px}.dropcatch-tactics-fallback strong,.dropcatch-tactics-fallback small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropcatch-tactics-fallback strong{color:var(--text-1);font-size:10px}.dropcatch-tactics-fallback small{margin-top:3px;color:var(--text-3);font-size:8px}
@keyframes dropcatch-live-pulse{70%{box-shadow:0 0 0 7px rgba(37,187,165,0)}100%{box-shadow:0 0 0 0 rgba(37,187,165,0)}}
.dropcatch-empty{display:flex;min-height:184px;padding:34px 24px;flex-direction:column;align-items:center;justify-content:center;gap:0}
.dropcatch-empty>svg{display:block;width:30px;height:30px;margin:0 0 13px;color:#4f8dff}
.dropcatch-empty-copy{display:grid;max-width:680px;gap:7px;text-align:center}
.dropcatch-empty-copy strong{display:block;color:var(--text);font-size:14px;line-height:1.35}
.dropcatch-empty-copy span{display:block;color:var(--text-3);font-size:12px;line-height:1.55}
.dropcatch-empty>.primary-button{margin-top:18px;min-height:42px;padding-inline:20px}.dropcatch-add-button{display:inline-grid;grid-template-columns:18px auto;align-items:center;justify-content:center;column-gap:8px;line-height:1}.dropcatch-add-icon{display:grid;place-items:center;width:18px;height:18px;line-height:0}.dropcatch-add-icon svg{display:block;width:16px!important;height:16px!important;margin:0!important;transform:none;flex:none}
.simulation-button{color:#08735d!important;border-color:#8dd8c9!important;background:#effbf7!important}.simulation-button:hover{background:#e0f7ef!important}.simulation-button svg{color:#0a9b83}
.simulation-row td{background:color-mix(in srgb,var(--surface-solid) 94%,#0a9b83)}.simulation-tag{display:inline-flex;align-items:center;gap:4px;margin:6px 0 0 7px;padding:3px 7px;border:1px solid #8dd8c9;border-radius:999px;color:#08735d;background:#effbf7;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.simulation-tag svg{width:11px;height:11px}
.dropcatch-simulation-dialog{width:min(760px,calc(100vw - 28px))}.simulation-lock-banner{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;margin-bottom:16px;border:1px solid #83d5c5;border-radius:11px;color:#08735d;background:#effbf7}.simulation-lock-banner>svg{width:19px;flex:0 0 auto}.simulation-lock-banner strong,.simulation-lock-banner span{display:block}.simulation-lock-banner span{margin-top:3px;color:#40736a;font-size:10px;line-height:1.45}.simulation-lock-banner code{font-weight:750}.dropcatch-simulation-dialog label small{display:block;margin-top:5px;color:var(--text-3);font-size:9px}.simulation-facts{margin-top:16px}.simulation-run svg{width:16px}.simulation-run:disabled svg{animation:dns-loading-spin .85s linear infinite}
.dropcatch-table{min-width:1320px}.dropcatch-table td small{display:block;margin-top:5px;color:var(--text-3);max-width:210px}.dropcatch-state{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eaf1fb;color:#52647b;font-weight:750;text-transform:capitalize}.dropcatch-state.state-armed,.dropcatch-state.state-attempting,.dropcatch-state.state-reconciling{background:#fff0cf;color:#9b6100}.dropcatch-state.state-won{background:#d9f7eb;color:#08735d}.dropcatch-state.state-blocked,.dropcatch-state.state-error,.dropcatch-state.state-lost{background:#ffe2e2;color:#b32635}.dropcatch-error{color:#c03945!important;white-space:normal}.icon-button.danger{color:#d34c59}
.dropcatch-source{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:750;white-space:nowrap}.dropcatch-source svg{width:12px}.dropcatch-dialog{border:0;box-shadow:0 30px 90px rgba(8,25,51,.24),0 3px 12px rgba(8,25,51,.08)}.dropcatch-form-section{border-color:color-mix(in srgb,var(--line) 66%,transparent);box-shadow:0 1px 0 rgba(255,255,255,.7) inset}.dropcatch-balance{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--blue) 25%,var(--line));border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--surface-solid) 94%,var(--blue)),var(--surface-solid));color:var(--blue)}.dropcatch-balance>svg{width:18px;height:18px;justify-self:center}.dropcatch-balance div small,.dropcatch-balance div strong{display:block}.dropcatch-balance div small{color:var(--text-3);font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.07em}.dropcatch-balance div strong{margin-top:2px;color:var(--text);font-size:14px}.dropcatch-balance div strong span{color:var(--blue);font-size:10px}.dropcatch-balance em{color:var(--text-3);font-size:9px;font-style:normal}.dropcatch-balance.is-loading>svg{animation:dns-loading-spin .85s linear infinite}.dropcatch-balance.is-error{border-color:#efb3b8;color:#b32635;background:#fff4f4}.dropcatch-balance.is-error div strong{font-size:10px;font-weight:650}.dropcatch-balance .text-button{justify-self:end}
.dropcatch-dialog{width:min(920px,calc(100vw - 28px));max-height:min(92dvh,900px);padding:0;gap:0;overflow:hidden;grid-template-rows:auto minmax(0,1fr) auto;border-radius:24px}.dropcatch-dialog-head{display:grid;grid-template-columns:48px minmax(0,1fr) 40px;align-items:start;gap:15px;padding:22px 26px 19px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--surface-solid) 92%,var(--blue)),var(--surface-solid))}.dropcatch-dialog-head h3{margin:4px 0 6px;font-size:24px;letter-spacing:-.04em}.dropcatch-dialog-head p:not(.eyebrow){max-width:650px;margin:0;color:var(--text-2);font-size:12px;line-height:1.5}.dropcatch-dialog-symbol{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;color:#fff;background:linear-gradient(145deg,#3e82ff,#1659dc);box-shadow:0 10px 24px rgba(35,103,242,.22)}.dropcatch-dialog-symbol svg{width:23px;height:23px}.dropcatch-dialog-body{min-height:0;display:grid;align-content:start;gap:14px;padding:18px 26px 22px;overflow-y:auto;scrollbar-gutter:stable}.dropcatch-form-section{display:grid;gap:14px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft)}.dropcatch-form-section-head{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:10px}.dropcatch-form-section-head>span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:var(--blue);background:color-mix(in srgb,var(--surface-solid) 78%,var(--blue));font-size:12px;font-weight:850}.dropcatch-form-section-head strong,.dropcatch-form-section-head small{display:block}.dropcatch-form-section-head strong{font-size:14px}.dropcatch-form-section-head small{margin-top:2px;color:var(--text-3);font-size:10px;line-height:1.4}.dropcatch-section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dropcatch-section-grid>label,.dropcatch-guardrail-grid>label{display:grid;align-content:start;gap:7px;min-width:0}.dropcatch-section-grid>.full{grid-column:1/-1}.dropcatch-domain-lookup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.dropcatch-domain-lookup .soft-button{min-width:210px;justify-content:center;white-space:nowrap}.dropcatch-domain-lookup .soft-button svg{width:16px}.dropcatch-dialog textarea{resize:vertical}.dropcatch-dialog label small{display:block;margin-top:0;color:var(--text-3);font-size:10px;line-height:1.45}.dropcatch-inspection{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px;padding:13px 14px;border:1px solid #b9d1f3;border-radius:13px;color:#285a98;background:#f4f8ff}.dropcatch-inspection.hidden{display:none}.dropcatch-inspection.is-loading svg{animation:dns-loading-spin .85s linear infinite}.dropcatch-inspection-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:rgba(35,103,242,.1)}.dropcatch-inspection-icon svg{width:16px}.dropcatch-inspection-main>div:first-child{display:flex;align-items:center;gap:8px}.dropcatch-inspection-main strong{font-size:12px}.dropcatch-inspection-main p{margin:5px 0 0;color:var(--text-2);font-size:10px;line-height:1.5}.dropcatch-inspection-main>small{margin-top:6px}.dropcatch-inspection>a{display:inline-flex;align-items:center;gap:5px;color:inherit;font-size:10px;font-weight:750;white-space:nowrap}.dropcatch-inspection>a svg{width:12px}.dropcatch-inspection.ok{border-color:#8dd8c9;color:#08735d;background:#effbf7}.dropcatch-inspection.warn{border-color:#efd19c;color:#986514;background:#fff8e9}.dropcatch-inspection.error{border-color:#efb3b8;color:#b32635;background:#fff4f4}.dropcatch-event-strip{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.dropcatch-event-strip span{display:flex;gap:5px;padding:5px 7px;border:1px solid currentColor;border-radius:7px;font-size:9px;opacity:.75}.dropcatch-guardrail-grid{display:grid;grid-template-columns:repeat(5,minmax(125px,1fr));gap:9px}.dropcatch-guardrail-grid>label{padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--surface-solid)}.dropcatch-guardrail-grid label>span{display:flex;align-items:center;gap:6px;min-height:28px;color:var(--text-2);font-size:10px;line-height:1.3}.dropcatch-guardrail-grid label>span svg{width:14px;color:var(--blue)}.input-suffix{position:relative}.input-suffix input{padding-right:42px!important}.input-suffix b{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:9px;text-transform:uppercase}.dropcatch-form-note{display:flex;gap:10px;align-items:flex-start;padding:13px 14px;border:1px solid rgba(22,170,145,.24);border-radius:12px;background:rgba(22,170,145,.07);color:var(--teal);font-size:11px;line-height:1.45}.dropcatch-form-note>svg{width:18px;flex:0 0 auto}.dropcatch-form-note strong,.dropcatch-form-note span{display:block}.dropcatch-form-note span{margin-top:3px;color:var(--text-2);font-size:10px}.dropcatch-dialog-actions{margin:0;padding:14px 26px;border-top:1px solid var(--line);background:var(--surface-solid)}.dropcatch-dialog-actions>span{display:flex;align-items:center;gap:6px;margin-right:auto;color:var(--text-3);font-size:10px}.dropcatch-dialog-actions>span svg{width:14px}.dropcatch-arm-dialog{width:min(720px,calc(100vw - 28px))}.dropcatch-preflight{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}.dropcatch-preflight>div{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:9px;background:var(--surface-soft);text-transform:capitalize}.dropcatch-preflight svg{width:15px}.dropcatch-preflight strong{margin-left:auto;font-size:10px;text-transform:uppercase}.dropcatch-preflight .ok{color:#08735d}.dropcatch-preflight .fail{color:#b32635}.danger-confirm{margin-top:14px;padding:13px;border:1px solid #efb3b8;border-radius:10px;background:#fff4f4}.confirm-name-field{display:block;margin-top:16px}.confirm-name-field input{margin-top:7px;width:100%}
.dark .dropcatch-safety-banner{background:linear-gradient(135deg,#102944,#122238);border-color:#27598b}.dark .dropcatch-safety-banner>span:first-child{background:#16385d;color:#75b5ff}.dark .dropcatch-tactics{background:linear-gradient(145deg,#101f31,#0d1928);border-color:#294866;box-shadow:0 18px 48px rgba(0,0,0,.2)}.dark .dropcatch-tactics-live{color:#72daca;background:rgba(30,176,154,.1);border-color:rgba(69,204,184,.28)}.dark .dropcatch-canvas-shell{border-color:#294866;background:#0d1d30;box-shadow:inset 0 1px rgba(255,255,255,.035)}.dark .dropcatch-canvas-sheen{background:radial-gradient(circle at 9% 0%,rgba(84,147,255,.1),transparent 30%)}.dark .dropcatch-tactics-fallback li{background:#13253a;border-color:#29445f}.dark .dropcatch-tactics-fallback b{color:#a9cbff;background:#1c3a61}.dark .dropcatch-state{background:#1b3048;color:#9db2ca}.dark .dropcatch-state.state-armed,.dark .dropcatch-state.state-attempting,.dark .dropcatch-state.state-reconciling{background:#443419;color:#ffc65e}.dark .dropcatch-state.state-won{background:#123c35;color:#5ee0ba}.dark .dropcatch-state.state-blocked,.dark .dropcatch-state.state-error,.dark .dropcatch-state.state-lost{background:#48232a;color:#ff9aa6}.dark .danger-confirm{background:#351d23;border-color:#713640}
.dark .tactics-watch-scope{color:#a9cbff;border-color:#315c8d;background:#173353}.dark .tactics-cadence article{border-color:#29445f;background:#13253a}.dark .tactics-cadence .attack{border-color:#66512d;background:#2b2418}.dark .tactics-cadence .attack strong{color:#efc477}.dark .tactics-cadence .retry{border-color:#2f746b;background:#153334}.dark .tactics-cadence .retry strong{color:#75ded2}.dark .tactics-fine-print{background:#132944}
.dark .simulation-button,.dark .simulation-lock-banner,.dark .simulation-tag{color:#5ee0ba!important;border-color:#246f62!important;background:#123c35!important}.dark .simulation-lock-banner span{color:#8abdb3}.dark .simulation-row td{background:color-mix(in srgb,var(--surface-solid) 91%,#0a9b83)}.dark .dropcatch-inspection{border-color:#315476;color:#8eb6ff;background:#132944}.dark .dropcatch-inspection.ok{border-color:#246f62;color:#5ee0ba;background:#123c35}.dark .dropcatch-inspection.warn{border-color:#604b27;color:#efc477;background:#2b2418}.dark .dropcatch-inspection.error{border-color:#713640;color:#ff9aa6;background:#351d23}
@media(max-width:800px){.dropcatch-summary{grid-template-columns:1fr 1fr}.dropcatch-safety-banner{align-items:flex-start;flex-wrap:wrap}.dropcatch-safety-banner .status-label{margin-left:58px}.dropcatch-tactics{padding:17px}.dropcatch-tactics-head{align-items:flex-start;flex-direction:column;gap:12px}.tactics-cadence{grid-template-columns:repeat(3,minmax(0,1fr))}.tactics-cadence article:nth-child(3)::after{display:none}.dropcatch-tactics-fallback{grid-template-columns:repeat(3,minmax(0,1fr))}.dropcatch-preflight{grid-template-columns:1fr}.dropcatch-empty{min-height:210px;padding:30px 20px}.dropcatch-guardrail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dropcatch-inspection{grid-template-columns:auto minmax(0,1fr)}.dropcatch-inspection>a{grid-column:2}.dropcatch-dialog-actions{flex-wrap:wrap}.dropcatch-dialog-actions>span{width:100%;order:-1}}
@media(max-width:520px){.dropcatch-summary{grid-template-columns:1fr}.dropcatch-safety-banner .status-label{margin-left:0}.dropcatch-tactics{padding:14px;border-radius:15px}.dropcatch-tactics-head h3{font-size:16px}.tactics-cadence{grid-template-columns:repeat(2,minmax(0,1fr))}.tactics-cadence article:nth-child(2n)::after{display:none}.tactics-cadence article:nth-child(3)::after{display:block}.tactics-fine-print{font-size:8px}.dropcatch-canvas-shell canvas{height:470px}.dropcatch-tactics-fallback{grid-template-columns:repeat(2,minmax(0,1fr))}.dropcatch-tactics-fallback li{padding:8px}.dropcatch-empty>.primary-button{width:100%;justify-content:center}.dropcatch-dialog{width:calc(100vw - 10px);max-height:96dvh;border-radius:17px}.dropcatch-dialog-head{grid-template-columns:40px minmax(0,1fr) 34px;padding:17px 15px 14px}.dropcatch-dialog-symbol{width:40px;height:40px;border-radius:12px}.dropcatch-dialog-body{padding:13px 15px 16px}.dropcatch-section-grid,.dropcatch-guardrail-grid{grid-template-columns:1fr}.dropcatch-domain-lookup{grid-template-columns:1fr}.dropcatch-domain-lookup .soft-button{min-width:0}.dropcatch-dialog-actions{padding:12px 15px}.dropcatch-dialog-actions button{flex:1;justify-content:center}}
@media(prefers-reduced-motion:reduce){.dropcatch-tactics-live span{animation:none}.dropcatch-canvas-sheen{display:none}}
.dark .resource-table tbody tr:hover td:last-child { background: #13243a; }
.dark .ufw-card:hover { border-color: #355b83; background: #122238; }.dark .ufw-safety-banner { color: #74dfce; border-color: #285c57; background: #142d2e; }.dark .ufw-preview-panel { border-color: #315476; background: #13243a; }.dark .ufw-warning-item { color: #efc477; border-color: #604b27; background: #2b2418; }.dark .ufw-version-number { color: #8eb6ff; background: #18355d; }

/* Scoped REST API workspace */
.api-security-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;margin-bottom:18px;padding:17px 19px;border:1px solid #b9d2ff;border-radius:16px;background:linear-gradient(135deg,#f2f7ff,#f8fbff)}
.api-security-banner>span:first-child{display:grid;place-items:center;width:42px;height:42px;color:var(--blue);border-radius:12px;background:#deebff}.api-security-banner svg{width:20px}.api-security-banner strong,.api-security-banner p{display:block;margin:0}.api-security-banner p{margin-top:3px;color:var(--text-2);font-size:12px;line-height:1.55}
.api-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(270px,.8fr);gap:16px;margin-bottom:16px}.api-keys-panel,.api-quickstart,.api-docs-panel,.api-example-panel{padding:20px}.api-quickstart{display:grid;align-content:start;gap:7px}.api-quickstart h3{margin:0 0 8px}.api-quickstart p{margin:8px 0 0;color:var(--text-3);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.api-quickstart code,.api-secret-line code{display:block;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);font:650 11px/1.45 var(--font-mono);overflow-wrap:anywhere}
.api-key-list{display:grid;gap:9px;margin-top:12px}.api-loading{display:flex;align-items:center;justify-content:center;gap:9px;min-height:100px;color:var(--text-3)}.api-loading svg{animation:spin 1s linear infinite}.api-key-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft)}.api-key-row.is-revoked{opacity:.58}.api-key-icon{display:grid;place-items:center;width:36px;height:36px;color:var(--blue);border-radius:10px;background:var(--surface-solid)}.api-key-row strong,.api-key-row code,.api-key-row small{display:block}.api-key-row code{margin:3px 0;color:var(--text-2);font-size:11px}.api-key-row small{color:var(--text-3);font-size:10px}.api-key-meta{text-align:right}.api-key-meta span{display:block;color:#087d6a;font-weight:750;font-size:11px}
.api-docs-panel{margin-bottom:16px}.api-endpoint-list{display:grid;gap:0;margin-top:10px}.api-endpoint-list article{display:grid;grid-template-columns:58px minmax(230px,.8fr) minmax(260px,1.5fr) auto;align-items:center;gap:12px;padding:13px 4px;border-top:1px solid var(--line)}.api-endpoint-list p{margin:0;color:var(--text-2);font-size:12px}.api-endpoint-list code{font-weight:700;overflow-wrap:anywhere}.api-endpoint-list b{padding:5px 8px;color:var(--text-2);border-radius:7px;background:var(--surface-soft);font-size:10px;white-space:nowrap}.api-method{display:inline-flex;justify-content:center;padding:5px 7px;border-radius:7px;font-size:9px;font-weight:850;letter-spacing:.08em}.api-method.get{color:#087d6a;background:#e7f8f4}.api-method.post{color:#885800;background:#fff2d7}.api-method.put{color:#2459ad;background:#e8f0ff}.api-example-panel pre{margin:10px 0 0;padding:17px;color:#dce9f7;border-radius:12px;background:#0c1827;overflow:auto;font:12px/1.7 var(--font-mono)}
.api-coverage-panel{margin-bottom:16px;padding:20px}.api-coverage-panel .panel-heading p:not(.eyebrow){margin:5px 0 0;color:var(--text-2);font-size:11px}.api-coverage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.api-coverage-grid article{display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft)}.api-coverage-grid article>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:var(--blue);background:var(--surface-solid)}.api-coverage-grid svg{width:18px}.api-coverage-grid strong,.api-coverage-grid p,.api-coverage-grid code{display:block}.api-coverage-grid p{margin:4px 0 8px;color:var(--text-2);font-size:11px;line-height:1.45}.api-coverage-grid code{color:var(--blue);font-size:9px;overflow-wrap:anywhere}
.api-key-dialog{width:min(620px,calc(100vw - 28px))}.api-scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0;padding:0;border:0}.api-scope-grid legend{margin-bottom:8px;font-size:12px;font-weight:750}.api-scope-grid label{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}.api-scope-grid input{width:auto;margin-top:2px}.api-scope-grid strong,.api-scope-grid small{display:block}.api-scope-grid small{margin-top:3px;color:var(--text-3);font-weight:400}.api-key-result{text-align:center}.api-key-result-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 12px;color:#087d6a;border-radius:15px;background:#e7f8f4}.api-key-result h3{margin:4px 0 7px}.api-key-result p{color:var(--text-2)}.api-secret-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:18px 0}.api-secret-line code{text-align:left}.api-result-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.dark .api-security-banner{border-color:#315b88;background:linear-gradient(135deg,#122b49,#13243a)}.dark .api-security-banner>span:first-child{background:#173d6a}.dark .api-key-row,.dark .api-quickstart code,.dark .api-secret-line code,.dark .api-endpoint-list b,.dark .api-scope-grid label,.dark .api-coverage-grid article{background:#14263b}.dark .api-coverage-grid article>span{background:#102033}.dark .api-method.get{color:#78e1ce;background:#123b36}.dark .api-method.post{color:#f2c46b;background:#3d3017}.dark .api-method.put{color:#9fc0ff;background:#18355d}
@media(max-width:900px){.api-layout{grid-template-columns:1fr}.api-endpoint-list article{grid-template-columns:52px 1fr}.api-endpoint-list p,.api-endpoint-list b{grid-column:2}.api-key-row{grid-template-columns:auto 1fr}.api-key-meta,.api-key-row>button{grid-column:2;text-align:left;justify-self:start}.api-security-banner{grid-template-columns:auto 1fr}.api-security-banner>.status-label{grid-column:2}.api-scope-grid,.api-coverage-grid{grid-template-columns:1fr}}
.dark .ufw-flow-prerequisites { color: #efc477; border-color: #604b27; background: #2b2418; }.dark .ufw-flow-prerequisites span { color: #c5a66e; }.dark .ufw-flow-mode.local { color: #a8c4df; background: #1b334d; }.dark .ufw-flow-mode.read { color: #75ded2; background: #153b3b; }.dark .ufw-flow-mode.write { color: #ff9da7; background: #44242b; }.dark .ufw-flow-mode.automatic { color: #f0ca76; background: #40361f; }
.dark .zone-settings-panel { border-color: #594927; background: #2a2519; }.dark .zone-settings-panel > div > span { color: #a99165; }.dark .dns-record-form { border-color: #2b5688; background: #132944; }
.dark .rule-refresh-state { border-color: #294d78; background: #132944; }.dark .rule-refresh-error { border-color: #65333b; background: #2d1d25; }
.dark .firewall-target-icon { color: #8db6ff; background: #172e4c; }
.dark .firewall-ip-pill { background: #17283d; border-color: #2b4662; }
.dark .firewall-ip-pill small { background: #1b3553; }
.dark .firewall-ip-pill.public { border-color: #28665f; background: #142e31; }
.dark .firewall-ip-pill.public small { color: #75ded2; background: #173b3b; }
.dark .firewall-target-empty { background: #13243a; border-color: #315170; }
.dark .rule-firewall-context { border-color: #294d78; background: #132944; }
.dark .rule-firewall-facts > span, .dark .rule-firewall-context .firewall-target, .dark .rule-firewall-context .firewall-target-empty { background: #101e2f; border-color: #29445f; }
.dark .rule-draft-status.is-live { color: #75ded2; border-color: #28665f; background: #142e31; }
.dark .rule-draft-status.is-dirty { color: #efc477; border-color: #604b27; background: #2b2418; }
.dark .rule-draft-status.is-error { color: #ff9da7; border-color: #65333b; background: #2d1d25; }
body.dark .modal-warning { border-color: #30465f; background: linear-gradient(135deg, #15263a, #122134); color: #c8d6e5; box-shadow: inset 3px 0 0 #d99d3d, 0 8px 22px rgba(0, 0, 0, .12); }
body.dark .modal-warning svg { color: #f0b553; background: rgba(224, 159, 52, .13); }
.dark .bulk-impact { border-color: #294d78; background: #132944; }
.dark .bulk-impact.is-empty { border-color: #604b27; background: #2b2418; }
.dark .bulk-impact-targets span { border-color: #29445f; background: #101e2f; }
.dark .login-error { color: #ffd6da; border-color: #713b45; background: linear-gradient(135deg, #301d27, #271b24); box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
.dark .login-error-icon { color: #ff8993; background: #4a2530; }
.dark .login-error-copy strong { color: #ffd8dc; }
.dark .login-error-copy > span { color: #d99aa2; }
.dark .pin-form.has-error .pin-input-wrap input { border-color: #bd5966; box-shadow: 0 0 0 4px rgba(221, 93, 103, .14); }

/* Readable dashboard type scale. Keep operational data legible without browser zoom. */
body { font-size: 14px; }
.eyebrow { font-size: 11px; }
.login-kicker, .login-footer, .art-signal { font-size: 13px; }
.login-lede { font-size: 16px; }.form-error { font-size: 13px; }
.pin-form label, .modal-card label { font-size: 13px; }
.primary-button { font-size: 13px; }.soft-button, .logout-button, .text-button { font-size: 12px; }
.login-meta { font-size: 12px; }
.sidebar-brand strong { font-size: 17px; }.sidebar-brand small { font-size: 11px; }
.sidebar-status, .sidebar-status b { font-size: 12px; }
.nav-item { font-size: 14px; }.nav-item em { font-size: 11px; }
.operator-card strong { font-size: 13px; }.operator-card span { font-size: 11px; }
.breadcrumbs { font-size: 13px; }.breadcrumbs strong { font-size: 14px; }
.live-pill, .language-switch { font-size: 12px; }
.page-lede { font-size: 15px; }
.stat-top { font-size: 13px; }.stat-value span { font-size: 12px; }
.section-heading h3, .panel-heading h3 { font-size: 19px; }
.provider-health, .provider-card p, .provider-card-bottom { font-size: 12px; }
.provider-card h4 { font-size: 15px; }.health-tag { font-size: 11px; }
.activity-copy strong { font-size: 13px; }.activity-copy span { font-size: 12px; }.activity-time { font-size: 11px; }
.chart-labels, .pulse-metrics small { font-size: 11px; }.pulse-metrics strong span { font-size: 13px; }
.search-wrap input { font-size: 13px; }.filter-pill { font-size: 12px; }
.resource-table th, .resource-table td, .audit-table th, .audit-table td, .backup-table th, .backup-table td { font-size: 13px; }
.resource-table th, .audit-table th, .backup-table th { font-size: 10px; }
.resource-name strong { font-size: 13px; }.resource-name > div > span { font-size: 11px; }
.provider-label, .status-label { font-size: 12px; }
.empty-state { font-size: 14px; }
.credential-heading strong { font-size: 15px; }.credential-heading span:not(.provider-logo), .credential-status { font-size: 13px; }
.guide-tab { font-size: 13px; }.guide-hero h3 { font-size: 21px; }.guide-hero p:last-child { font-size: 13px; }
.guide-steps li > span { font-size: 12px; }.guide-steps strong { font-size: 14px; }.guide-steps p { font-size: 13px; }.guide-page code { font-size: 12px; }
.guide-faq h4 { font-size: 15px; }.guide-faq dt, .guide-faq dd, .guide-faq summary, .guide-faq details p { font-size: 12px; }
.account-cell strong { font-size: 12px; }.account-cell span { font-size: 11px; }
.profile-card p, .ufw-card p, .ufw-status { font-size: 12px; }.profile-card .profile-meta, .provider-chip { font-size: 11px; }
.modal-subtitle, .form-hint { font-size: 12px; }
.modal-card input:not([type="hidden"]):not([type="checkbox"]), .modal-card select, .modal-card textarea { font-size: 14px; }
.modal-warning { padding: 13px 14px; font-size: 13px; line-height: 1.5; }
.zone-settings-panel strong { font-size: 13px; }.zone-settings-panel > div > span, .switch-field { font-size: 12px; }
.dns-record-heading h4 { font-size: 15px; }.dns-record-heading span { font-size: 11px; }.dns-search input { font-size: 12px !important; }
.dns-form-heading strong { font-size: 14px; }.dns-form-grid label { font-size: 11px; }.dns-form-grid input:not([type="checkbox"]), .dns-form-grid select { font-size: 13px !important; }
.dns-record-table th, .dns-record-table td { font-size: 13px; }.dns-record-table th { font-size: 10px; }.dns-content { font-size: 13.5px; }.dns-record-table small { font-size: 11px; }
.rule-section-heading h4 { font-size: 15px; }.rule-section-heading span { font-size: 11px; }.rule-section-heading .soft-button { font-size: 12px; }
.rule-table th { font-size: 10px; }.rule-table td, .rule-table input:not([type="checkbox"]), .rule-table select { font-size: 12px; }.rule-empty { font-size: 12px !important; }
.rule-loading-state span { font-size: 13px; }.rule-refresh-state { font-size: 12px; }
.toast { font-size: 13px; }
.ufw-template-code-list { max-height: none; overflow: visible; }

@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes login-error-in { from { transform: translateY(-5px) scale(.985); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes pin-error-bump { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-4px); } 65% { transform: translateX(3px); } }
@keyframes boot-pulse { 0%, 100% { opacity: .55; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .login-error, .pin-form.error-bump .pin-input-wrap, .boot-splash-mark span, .profile-account-popover { animation: none; } }

@media (max-width: 1180px) {
  .ufw-default-overview { grid-template-columns: minmax(0, 1fr) auto; }
  .ufw-default-points { grid-column: 1 / -1; grid-row: 2; }
  .ufw-flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .rule-firewall-context { grid-template-columns: 1fr; }
  .rule-firewall-context .firewall-target-list { grid-template-columns: 1fr; }
  .ufw-policy-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px) !important; }
  .ufw-policy-editor { padding: 22px; gap: 16px; }
  .ufw-policy-editor .modal-heading h3 { font-size: 24px; }
  .ufw-toggle-grid, .ufw-probe-grid { grid-template-columns: 1fr; }
  .ufw-editor-section, .ufw-preview-panel { padding: 18px; }
  .ufw-editor-heading { align-items: flex-start; }
  .ufw-policy-actions { flex-wrap: wrap; overflow: visible; justify-content: flex-end; padding-bottom: 2px; }
  .ufw-policy-actions button { flex: 0 0 auto; white-space: nowrap; }
  .ufw-onboarding-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; }
  .ufw-onboarding-card { max-height: calc(100dvh - 16px); padding: 22px; }
  .ufw-onboarding-layout { grid-template-columns: 1fr; }
  .ufw-default-overview { grid-template-columns: 1fr; }
  .ufw-default-points { grid-column: auto; grid-row: auto; grid-template-columns: 1fr 1fr; }
  .ufw-default-actions { justify-self: start; grid-template-columns: auto auto; }
  .ufw-template-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px) !important; }
  .ufw-template-viewer { padding: 22px; }
  .ufw-template-columns { grid-template-columns: 1fr; }
  .ufw-template-safety { grid-template-columns: auto minmax(0,1fr); }.ufw-template-save-state { grid-column: 2; justify-self: start; }
  .ufw-template-toolbar { flex-wrap: wrap; }.ufw-template-toolbar .soft-button { margin-left: 0; }
  .ufw-template-default-editor { grid-template-columns: 1fr 1fr; }
  .ufw-template-output-grid { grid-template-columns: 1fr; }
  .ufw-template-actions { flex-wrap: wrap; }.ufw-template-actions .modal-action-spacer { display: none; }
  .ufw-flow-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .ufw-policy-editor { padding: 17px; }
  .ufw-policy-actions button { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .ufw-policy-actions .primary-button { flex-basis: 100%; }
  .ufw-default-points { grid-template-columns: 1fr; }
  .ufw-onboarding-card { padding: 17px; }
  .ufw-onboarding-flow { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .ufw-onboarding-flow::before { display: none; }
  .ufw-default-actions { width: 100%; grid-template-columns: 1fr; }
  .ufw-template-viewer { padding: 17px; }
  .ufw-template-toolbar { align-items: stretch; flex-direction: column; }
  .ufw-template-toolbar label { width: 100%; }
  .ufw-template-toolbar .soft-button { width: 100%; justify-content: center; }
  .ufw-template-safety { grid-template-columns: 1fr; }.ufw-template-safety > svg { display: none; }.ufw-template-save-state { grid-column: auto; }
  .ufw-template-default-editor { grid-template-columns: 1fr 1fr; }
  .ufw-template-rule-tools { align-items: flex-end; flex-direction: column; }
  .ufw-template-actions button { flex: 1 1 calc(50% - 6px); justify-content: center; }.ufw-template-actions #ufw-template-save, .ufw-template-actions #ufw-template-editor-add { flex-basis: 100%; }
  .ufw-template-defaults { grid-template-columns: 1fr 1fr; }
  .ufw-flow-steps { grid-template-columns: 1fr; }
  .ufw-flow-steps > li { min-height: 0; }
}

@media (max-width: 1120px) { .provider-grid, .profile-grid, .ufw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.hero-art { opacity: .55; margin-right: -20px; }.lower-grid { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .guide-layout { grid-template-columns: 1fr; }.guide-hero { grid-template-columns: auto minmax(0, 1fr); }.guide-doc-link { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 860px) { .login-screen { grid-template-columns: 1fr; }.login-art { min-height: 310px; }.art-copy { left: 32px; bottom: 32px; }.art-copy h1 { font-size: 42px; }.art-copy .brand-mark, .art-description, .art-signal { display: none; }.login-panel-wrap { min-height: calc(100vh - 310px); padding: 48px 32px 82px; }.login-panel { margin-top: 0; }.login-meta { left: 32px; right: 32px; }.dashboard-screen,.dashboard-screen.sidebar-collapsed { grid-template-columns: 75px minmax(0, 1fr); }.sidebar,.sidebar-collapsed .sidebar { padding: 20px 10px; }.sidebar-brand,.sidebar-collapsed .sidebar-brand { display:flex;justify-content: center; padding: 0 0 26px; }.sidebar-brand-copy,.sidebar-toggle,.sidebar-status span:not(.status-dot),.sidebar-status b,.nav-item span,.nav-item em,.operator-card>div:not(.operator-avatar),.operator-card>svg,.logout-button span { display: none; }.sidebar-status,.sidebar-collapsed .sidebar-status { place-items: center; margin: 0 8px 25px; padding: 10px 0; }.nav-group-toggle { right: 1px; width: 22px; height: 22px; border-radius: 7px; }.nav-group-toggle svg { width: 12px; height: 12px; }.nav-group-head>.nav-item{padding-right:20px}.nav-item,.sidebar-collapsed .nav-item { display: grid; grid-template-columns: 1fr; justify-items: center; padding: 12px 5px; }.nav-item.active,.sidebar-collapsed .nav-item.active { box-shadow: inset 0 3px 0 var(--blue); }.nav-group.is-open .nav-sub,.nav-sub,.sidebar-collapsed .nav-group.is-open .nav-sub,.sidebar-collapsed .nav-sub { margin: 0; padding: 0; border: 0; gap: 3px; }.nav-sub-item { padding: 10px 5px; }.operator-card,.sidebar-collapsed .operator-card { display: flex; justify-content: center; padding: 14px 0; }.logout-button,.sidebar-collapsed .logout-button { justify-content: center; }.content-scroll { padding-left: 24px; padding-right: 24px; }.topbar { padding: 0 24px; }.topbar-actions .soft-button span, .live-pill small { display: none; } }
@media (max-width: 860px) { .registrar-link-grid { grid-template-columns: 1fr; }.registrar-balance-row { align-items: flex-start; flex-direction: column; gap: 14px; }.registrar-balance-meta { justify-content: flex-start; } }
@media (max-width: 620px) {
  .rule-firewall-facts { grid-template-columns: 1fr; }
  .provider-grid, .stat-grid { grid-template-columns: 1fr 1fr; }
  .profile-grid, .ufw-grid { grid-template-columns: 1fr; }
  .registrar-link-grid { grid-template-columns: 1fr; }
  .registrar-balance-amount strong { font-size: 36px; }
  .stat-card { min-height: 111px; padding: 14px; }
  .stat-value strong { font-size: 24px; }
  .stat-top { font-size: 10px; }
  .hero-row { min-height: 180px; position: relative; overflow: hidden; }
  .hero-art { position: absolute; right: -50px; opacity: .26; }
  .section-header-large { align-items: start; flex-direction: column; gap: 18px; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .search-wrap { width: 100%; }
  .filter-pills { justify-content: start; }
  .topbar { min-height: 66px; gap: 8px; }
  .breadcrumbs span, .breadcrumbs svg { display: none; }
  .content-scroll { padding-top: 28px; }
  .page-title { font-size: 37px; }
  .login-panel-wrap { padding-left: 24px; padding-right: 24px; }
  .form-two { grid-template-columns: 1fr; }
  dialog.modal-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px); border-radius: 17px; }
  .modal-card { max-height: calc(100dvh - 24px); padding: 21px; gap: 13px; border-radius: 17px; }
  .modal-heading h3 { font-size: 21px; }
  .modal-actions { position: sticky; bottom: 0; z-index: 5; margin: 0 -5px -5px; padding: 13px 5px 5px; background: var(--surface-solid); }
  .confirm-card { padding: 20px; }
  .confirm-heading { grid-template-columns: 40px minmax(0,1fr); gap: 12px; }
  .confirm-icon { width: 40px; height: 40px; border-radius: 12px; }
  .confirm-heading h3 { font-size: 20px; }
  .confirm-facts { grid-template-columns: 1fr; }
  .confirm-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .confirm-actions button { min-width: 0; }
  .modal-dialog.rule-dialog { width: calc(100vw - 10px); height: calc(100dvh - 10px); max-height: calc(100dvh - 10px); }
  .rule-dialog .rule-editor { padding: 16px; }
  .rule-editor .modal-heading h3 { font-size: 18px; overflow-wrap: anywhere; }
  .rule-save-hint { display: none; }
  .rule-draft-status span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .rule-draft-status { width: 32px; padding: 6px; justify-content: center; }
  .rule-loading-state { min-height: 220px; padding: 24px 16px; }
  .rule-section-heading { align-items: flex-start; }
  .rule-section-heading .soft-button { flex: 0 0 auto; }
  .rule-table { min-width: 880px; }
  .cloudflare-zone-dialog { width: calc(100vw - 10px) !important; height: calc(100dvh - 10px); }
  .cloudflare-zone-editor { padding: 16px; }
  .zone-settings-panel { grid-template-columns: 1fr; align-items: start; }
  .zone-settings-panel .soft-button { justify-self: start; }
  .email-routing-panel, .email-routing-form, .zone-created-dialog .email-routing-form { grid-template-columns: 1fr; }
  .email-routing-actions { justify-content: flex-end; flex-wrap: wrap; }
  .dns-record-heading { align-items: flex-start; flex-direction: column; }
  .dns-record-tools { width: 100%; }
  .dns-search { flex: 1; }
  .dns-search input { width: 100% !important; }
  .dns-form-grid { grid-template-columns: 1fr 1fr; }
  .dns-name-field, .dns-content-field, .dns-comment-field { grid-column: 1 / -1; }
}
@media (max-width: 400px) { .provider-grid, .profile-grid, .ufw-grid, .stat-grid { grid-template-columns: 1fr; }.topbar-actions .live-pill { display: none; }.content-scroll { padding-left: 17px; padding-right: 17px; } }

.header-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.registrar-balance-panel{margin-bottom:22px}
.registrar-balance-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;background:linear-gradient(135deg, rgba(47,111,237,.06), var(--surface-solid) 55%)}
.registrar-balance-main{display:grid;gap:6px;min-width:0}
.registrar-balance-label{color:var(--text-3);font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.registrar-balance-amount{display:flex;align-items:baseline;gap:10px;line-height:1}
.registrar-balance-amount strong{font-size:clamp(34px, 4vw, 44px);font-weight:700;letter-spacing:-.055em;color:var(--text)}
.registrar-balance-currency{color:var(--blue);font-size:16px;font-weight:750;letter-spacing:.04em}
.registrar-balance-meta{display:flex;align-items:center;justify-content:flex-end}
.muted{color:var(--text-3);font-size:12px;margin-top:2px}
#view-registrar .section-heading{margin:22px 0 12px}
.registrar-catalog-filter{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 14px}
.registrar-catalog-filter .search-wrap{width:min(320px,100%);flex:0 1 320px}
.registrar-catalog-filter .filter-pills{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 1 auto;min-width:0}
.registrar-links{margin:0 0 22px}
.registrar-link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dropcatch-link-card{border-color:#8dd8c9;background:linear-gradient(135deg,rgba(15,159,132,.08),var(--surface))}
.dark .dropcatch-link-card{border-color:#246f62;background:linear-gradient(135deg,rgba(21,151,126,.16),var(--surface))}
@media(max-width:1100px){.registrar-link-grid{grid-template-columns:1fr 1fr}.dropcatch-link-card{grid-column:1/-1}}
.registrar-link-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface-solid);color:var(--text);text-align:left;box-shadow:var(--shadow-sm)}
.registrar-link-card:hover{border-color:#bdd2f7;color:var(--blue);transform:translateY(-1px)}
.registrar-link-card strong{display:block;font-size:14px}
.registrar-link-card span:last-child{display:block;margin-top:3px;color:var(--text-3);font-size:11px}
.registrar-link-card > svg{width:16px;height:16px;color:var(--text-3)}
.registrar-domain-dialog{width:min(900px,calc(100vw - 32px))!important;max-height:min(92dvh,900px)!important}
.registrar-domain-card{max-height:min(92dvh,900px);gap:15px}
.domain-registration-flow{display:grid;gap:10px}
.domain-registration-step{display:grid;grid-template-columns:auto minmax(210px,1fr) minmax(170px,220px) auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);transition:border-color .18s ease,background .18s ease,opacity .18s ease}
.domain-registration-step-number{display:grid;place-items:center;width:32px;height:32px;color:var(--blue);border:1px solid rgba(35,103,242,.24);border-radius:10px;background:rgba(35,103,242,.09);font-size:11px;font-weight:850}
.domain-registration-step>div{min-width:0}.domain-registration-step>div>strong{display:block;color:var(--text);font-size:12px}.domain-registration-step>div>p{margin:4px 0 0;color:var(--text-2);font-size:10px;line-height:1.45;overflow-wrap:anywhere}
.domain-registration-step>label{display:grid;gap:5px;color:var(--text-2);font-size:9px;font-weight:750}.domain-registration-step select{height:38px!important;background:var(--surface-solid)!important}.domain-registration-step button{min-height:38px;white-space:nowrap}.domain-registration-step:first-child>button{grid-column:3/5;justify-self:end}
.domain-registration-step.is-locked{opacity:.62}.domain-registration-step.is-ready{border-color:rgba(0,157,158,.3);background:color-mix(in srgb,var(--surface-solid) 91%,var(--teal))}.domain-registration-step.is-ready .domain-registration-step-number{color:#087a66;border-color:rgba(0,157,158,.28);background:rgba(0,157,158,.1)}.domain-registration-step.is-error{border-color:rgba(221,93,103,.3);background:rgba(221,93,103,.06)}.domain-registration-step.is-error .domain-registration-step-number{color:var(--red);border-color:rgba(221,93,103,.25);background:rgba(221,93,103,.09)}.domain-registration-step.is-busy .domain-registration-step-number{opacity:.55}.domain-registration-step.is-busy button svg{animation:dns-loading-spin 1s linear infinite}
.nameserver-fieldset{display:grid;gap:10px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft)}.nameserver-fieldset-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.nameserver-fieldset-heading strong{font-size:11px}.nameserver-fieldset .status-label{font-size:9px}.nameserver-fieldset .form-two label{font-size:10px}
.table-sort{border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0;cursor:pointer}
.table-sort:hover{color:var(--blue)}
.table-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;padding:10px 14px;border-top:1px solid var(--line);background:var(--surface-soft);color:var(--text-3);font-size:12px}
.table-pagination-summary strong,.table-pagination-controls strong{color:var(--text);font-weight:750}
.table-pagination-controls{display:flex;align-items:center;gap:10px;white-space:nowrap}
.table-pagination-controls .icon-button{width:34px;height:34px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-solid);color:var(--text-2)}
.table-pagination-controls .icon-button:hover:not(:disabled){border-color:var(--blue);color:var(--blue);box-shadow:0 5px 14px rgba(35,103,242,.12)}
.table-pagination-controls .icon-button:disabled{opacity:.38;cursor:not-allowed}
.table-pagination-controls svg{width:15px;height:15px}
.dark .table-pagination-controls .icon-button{background:#14263b;border-color:#2d4967;color:#c1d2e4}
.promo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:14px}
.promo-card{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft)}
.promo-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.promo-card-top strong{font-size:16px;letter-spacing:-.03em}
.promo-price{display:flex;align-items:baseline;gap:8px;line-height:1}
.promo-price strong{font-size:clamp(28px, 3vw, 34px);font-weight:750;letter-spacing:-.05em;color:var(--text)}
.promo-price-currency{color:var(--blue);font-size:13px;font-weight:750}
.promo-card p{margin:0;color:var(--text-2);font-size:11px;line-height:1.5}
.price-was{color:var(--text-3);font-size:12px;font-weight:600;text-decoration:line-through}
.promo-cost{color:#0b7a62;font-weight:750;font-size:13px}
.days-pill{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--surface-soft);border:1px solid var(--line);color:var(--text-2);font-size:10px;font-weight:750;white-space:nowrap}
.days-pill-warn{color:#8b611c;background:#fff8e9;border-color:#ead19e}
.days-pill-hot{color:#9f2937;background:#fff2f3;border-color:#f2c8ce}
.days-pill-dead{color:#fff;background:#dd5d67;border-color:#dd5d67}
.catalog-table tr.has-promo td{background:color-mix(in srgb, #eaf2ff 70%, transparent)}
.catalog-table tr.has-promo:hover td{background:#e9f2ff}
.dark .catalog-table tr.has-promo td{color:#d8e4f0;background:#14283f;border-bottom-color:#28425d}
.dark .catalog-table tr.has-promo:nth-child(even) td{background:#12263c}
.dark .catalog-table tr.has-promo:hover td{color:#f4f8fc;background:#1a3552}
.dark .catalog-table td:first-child strong{color:#eef5fc}
.dark .catalog-table .muted{color:#8aa1ba}
.dark .catalog-table .price-was{color:#8da5bd}
.dark .catalog-table .promo-cost{color:#5ee0ba}
.status-label.ok{color:#0b7a62}
.status-label.warn{color:#8b611c}
#view-instances .resource-table code{font:650 11px/1.4 var(--font-mono);color:var(--text-2)}
@media (max-width:700px){.domain-registration-step{grid-template-columns:auto minmax(0,1fr)}.domain-registration-step>div{grid-column:2}.domain-registration-step>label,.domain-registration-step>button,.domain-registration-step:first-child>button{grid-column:1/-1;width:100%;justify-self:stretch}.domain-registration-step>label{margin-top:2px}.registrar-domain-card .modal-actions{display:grid;grid-template-columns:1fr 1fr}.registrar-domain-card .modal-actions button{justify-content:center}}
@media (max-width:520px){.table-pagination{align-items:flex-start;flex-direction:column}.table-pagination-controls{width:100%;justify-content:space-between}}

/* OCI Always Free capacity and compute lifecycle */
.oci-capacity-heading{margin:4px 0 13px}.oci-capacity-heading h3{margin:4px 0 0;font-size:16px}.oci-capacity-heading>span{color:var(--text-3);font-size:10px;font-weight:700}
.oci-free-tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:24px}
.oci-capacity-card{display:grid;align-content:start;gap:13px;min-width:0;padding:17px;border:1px solid color-mix(in srgb,var(--line) 76%,#ed8b27);border-radius:17px;background:linear-gradient(150deg,color-mix(in srgb,var(--surface-solid) 96%,#ed8b27),var(--surface-solid) 38%);box-shadow:var(--shadow-sm)}
.oci-capacity-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0}.oci-capacity-card-head>div{min-width:0}.oci-capacity-card-head .eyebrow{margin:0 0 5px;color:#cf6f14}.oci-capacity-card-head h3{margin:0;overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap}.oci-capacity-card-head>div>span{display:block;margin-top:4px;color:var(--text-3);font-size:10px}
.oci-capacity-meter-grid{display:grid;gap:9px}.oci-capacity-meter{display:grid;gap:5px}.oci-capacity-meter>div{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--text-3);font-size:9px}.oci-capacity-meter strong{color:var(--text-2);font-size:9px}.oci-capacity-track{display:block;height:6px;overflow:hidden;border-radius:999px;background:var(--surface-soft)}.oci-capacity-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ed8b27,#f5b064)}
.oci-region-summary{display:grid;gap:8px}.oci-region-pills{display:flex;flex-wrap:wrap;gap:6px}.oci-region-pills>span{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px;min-width:0;flex:1 1 155px;padding:8px 9px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}.oci-region-pills>span>svg{width:15px;height:15px}.oci-region-pills>span.is-home>svg{color:#0b7a62}.oci-region-pills>span.is-additional>svg{color:#8b611c}.oci-region-pills strong,.oci-region-pills small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oci-region-pills strong{font-size:9px}.oci-region-pills small{margin-top:2px;color:var(--text-3);font-size:8px}.oci-region-summary>p{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;margin:0;color:var(--text-3);font-size:8px;line-height:1.45}.oci-region-summary>p svg{width:13px;height:13px;color:var(--blue)}
.oci-capacity-remaining{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.oci-capacity-remaining>span{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:6px;min-width:0;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}.oci-capacity-remaining svg{grid-row:1/3;width:15px;height:15px;color:#cf6f14}.oci-capacity-remaining strong,.oci-capacity-remaining small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oci-capacity-remaining strong{font-size:10px}.oci-capacity-remaining small{color:var(--text-3);font-size:8px}
.oci-capacity-allocations{display:grid;gap:4px;min-height:35px}.oci-capacity-allocations strong{font-size:10px}.oci-capacity-allocations span{color:var(--text-3);font-size:9px;line-height:1.5}.oci-provider-limit-note{padding:5px 7px;border-radius:8px;background:var(--surface-soft)}
.oci-capacity-reason,.oci-capacity-error,.oci-launch-blocked{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:8px;padding:9px 10px;border:1px solid #ead19e;border-radius:10px;color:#8b611c;background:#fff8e9;font-size:9px;line-height:1.45}.oci-capacity-reason svg,.oci-capacity-error>svg,.oci-launch-blocked>svg{width:15px;height:15px}.oci-capacity-error{color:var(--red);border-color:color-mix(in srgb,var(--red) 32%,var(--line));background:color-mix(in srgb,var(--surface-solid) 94%,var(--red))}.oci-capacity-error strong,.oci-capacity-error span{display:block}.oci-capacity-error span{margin-top:3px;color:var(--text-3)}
.oci-capacity-actions{display:flex;align-items:center;gap:7px}.oci-capacity-actions>.primary-button,.oci-capacity-actions>.soft-button{flex:1;min-width:0;min-height:36px;padding:0 9px;font-size:9px}.oci-capacity-actions>.icon-button{flex:0 0 auto}.oci-capacity-actions button:disabled{opacity:.42;cursor:not-allowed}
.oci-management-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.oci-management-actions>.soft-button{min-width:0;min-height:34px;padding:0 8px;font-size:9px}.oci-management-actions svg{width:14px;height:14px}
.oci-capacity-footnote{display:flex;align-items:center;justify-content:space-between;gap:9px;padding-top:10px;border-top:1px solid var(--line);color:var(--text-3);font-size:8px}.oci-capacity-footnote a{display:inline-flex;align-items:center;gap:4px;color:#cf6f14;font-weight:750}.oci-capacity-footnote svg{width:12px;height:12px}
.oci-capacity-card.is-loading{min-height:330px}.oci-capacity-skeleton{display:grid;gap:12px;margin-top:8px}.oci-capacity-skeleton i{display:block;height:35px;border-radius:10px;background:linear-gradient(100deg,var(--surface-soft) 25%,color-mix(in srgb,var(--surface-soft) 66%,var(--surface-solid)) 45%,var(--surface-soft) 65%);background-size:220% 100%;animation:analytics-shimmer 1.4s linear infinite}.oci-capacity-empty{grid-column:1/-1;min-height:190px}.instance-table th:nth-child(5),.instance-table td:nth-child(5){min-width:240px}.instance-table th:last-child,.instance-table td:last-child{min-width:224px}.instance-network{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0}.instance-ip{display:inline-flex;align-items:center;gap:3px;min-width:0}.instance-ip code{color:var(--text-2);font:650 10px/1.35 var(--font-mono);white-space:nowrap}.instance-ip-separator{color:var(--text-3);font-size:10px}.instance-ip-copy{width:23px!important;height:23px!important;min-width:23px!important;flex:0 0 23px;border-radius:7px;color:var(--text-3)}.instance-ip-copy:hover{color:var(--blue)}.instance-ip-copy svg{width:12px!important;height:12px!important}.danger-icon-button{color:var(--red)!important}
.oci-launch-dialog{width:min(860px,calc(100vw - 32px))!important;max-height:calc(100dvh - 20px)!important}.oci-launch-card{max-height:calc(100dvh - 24px);overflow:hidden;grid-template-rows:auto minmax(0,1fr);padding:26px}.oci-launch-content{min-height:0;overflow-y:auto;padding-right:5px;scrollbar-gutter:stable}.oci-launch-form{display:grid;gap:14px}.oci-launch-toolbar{display:grid;grid-template-columns:minmax(210px,.65fr) minmax(380px,1.35fr);align-items:end;gap:12px}.oci-launch-toolbar>label,.oci-launch-form-grid>label,.oci-terminate-card>label{display:grid;gap:7px;color:var(--text-2);font-size:11px;font-weight:700}
.oci-preset-switch{display:grid;grid-template-columns:1fr 1fr;gap:7px}.oci-preset-switch button{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;min-height:54px;padding:8px 10px;text-align:left;border:1px solid var(--line-strong);border-radius:11px;color:var(--text-2);background:var(--surface-soft);cursor:pointer}.oci-preset-switch button.active{color:var(--blue);border-color:var(--blue);background:color-mix(in srgb,var(--surface-solid) 91%,var(--blue));box-shadow:0 0 0 3px color-mix(in srgb,transparent 88%,var(--blue))}.oci-preset-switch svg{width:18px;height:18px}.oci-preset-switch strong,.oci-preset-switch small{display:block}.oci-preset-switch strong{font-size:11px}.oci-preset-switch small{margin-top:2px;color:var(--text-3);font-size:8px}
.oci-launch-capacity{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.oci-launch-capacity>span{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;padding:10px 11px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft)}.oci-launch-capacity svg{grid-row:1/3;width:17px;height:17px;color:#cf6f14}.oci-launch-capacity small,.oci-launch-capacity strong{display:block}.oci-launch-capacity small{color:var(--text-3);font-size:8px}.oci-launch-capacity strong{margin-top:2px;font-size:11px}
.oci-launch-blocked{padding:11px}.oci-launch-blocked strong,.oci-launch-blocked span{display:block}.oci-launch-blocked span{margin-top:3px}.oci-launch-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.oci-launch-wide{grid-column:1/-1}.oci-fixed-shape{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;min-height:68px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft)}.oci-fixed-shape>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--blue);background:var(--surface-solid)}.oci-fixed-shape svg{width:16px;height:16px}.oci-fixed-shape small,.oci-fixed-shape strong{display:block}.oci-fixed-shape small{color:var(--text-3);font-size:9px}.oci-fixed-shape strong{margin-top:3px;font-size:11px}
.oci-launch-region>small{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:6px;color:var(--text-3);font-size:9px;font-weight:500;line-height:1.45}.oci-launch-region>small svg{width:14px;height:14px;color:var(--blue)}
.oci-public-ip{display:flex!important;align-items:center;gap:10px!important;min-height:68px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft);cursor:pointer}.oci-public-ip input{width:18px;height:18px;accent-color:var(--blue)}.oci-public-ip strong,.oci-public-ip small{display:block}.oci-public-ip strong{color:var(--text);font-size:11px}.oci-public-ip small{margin-top:3px;color:var(--text-3);font-size:9px}.oci-launch-impact{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--blue) 24%,var(--line));border-radius:11px;background:color-mix(in srgb,var(--surface-solid) 95%,var(--blue))}.oci-launch-impact>svg{width:18px;height:18px;color:var(--blue)}.oci-launch-impact strong,.oci-launch-impact span{display:block}.oci-launch-impact strong{font-size:11px}.oci-launch-impact span{margin-top:4px;color:var(--text-3);font-size:9px;line-height:1.45}.oci-launch-error{min-height:310px}
.oci-launch-progress[hidden]{display:none}.oci-launch-progress{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:11px;overflow:hidden;padding:13px 14px;border:1px solid color-mix(in srgb,var(--blue) 42%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--surface-solid) 91%,var(--blue));box-shadow:0 8px 24px color-mix(in srgb,transparent 89%,var(--blue))}.oci-launch-progress-symbol{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;color:#fff;background:var(--blue)}.oci-launch-progress-symbol svg{display:block;width:19px;height:19px;margin:0;transform-box:fill-box;transform-origin:center;animation:dns-loading-spin .85s linear infinite}.oci-launch-progress>div strong,.oci-launch-progress>div span,.oci-launch-progress>div small{display:block}.oci-launch-progress strong{color:var(--text);font-size:12px}.oci-launch-progress div>span{margin-top:3px;color:var(--text-2);font-size:10px;line-height:1.45}.oci-launch-progress small{margin-top:5px;color:var(--text-3);font-size:9px;line-height:1.4}.oci-launch-progress small span{display:inline;color:inherit;font-size:inherit}.oci-launch-progress-track{grid-column:1/-1;height:4px;margin-top:1px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--blue) 14%,var(--surface-soft))}.oci-launch-progress-track i{display:block;width:38%;height:100%;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--blue),transparent);animation:oci-launch-progress 1.45s ease-in-out infinite}.oci-launch-progress.is-error{border-color:color-mix(in srgb,var(--red) 38%,var(--line));background:color-mix(in srgb,var(--surface-solid) 94%,var(--red));box-shadow:none}.oci-launch-progress.is-error .oci-launch-progress-symbol{background:var(--red)}.oci-launch-progress.is-error .oci-launch-progress-symbol svg{animation:none}.oci-launch-progress.is-error .oci-launch-progress-track{display:none}.oci-launch-form.is-submitting>.oci-launch-toolbar,.oci-launch-form.is-submitting>.oci-launch-capacity,.oci-launch-form.is-submitting>.oci-launch-form-grid,.oci-launch-form.is-submitting>.oci-launch-impact{opacity:.55}.oci-launch-form .primary-button.is-loading svg{animation:dns-loading-spin .8s linear infinite}@keyframes oci-launch-progress{from{transform:translateX(-120%)}to{transform:translateX(365%)}}

/* Loading glyphs share one optical center across cards, empty states and actions. */
:where(.api-loading,.provider-manager-loading,.analytics-loading,.dropcatch-balance,.dropcatch-inspection) :where(svg[data-lucide="loader-circle"],svg.lucide-loader-circle){display:block;flex:0 0 auto;margin:0;transform-box:fill-box;transform-origin:center}
.oci-terminate-dialog{width:min(610px,calc(100vw - 28px))!important}.oci-terminate-card{max-height:calc(100dvh - 20px);gap:18px}.oci-volume-choice{display:grid;gap:10px;margin:0;padding:0;border:0}.oci-volume-choice legend{margin-bottom:2px;color:var(--text-2);font-size:11px;font-weight:750}.oci-volume-choice label{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:12px;padding:15px 16px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft);cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.oci-volume-choice label:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--line));background:var(--surface-solid)}.oci-volume-choice label:has(input:checked){border-color:var(--blue);background:color-mix(in srgb,var(--surface-solid) 94%,var(--blue));box-shadow:0 0 0 3px color-mix(in srgb,transparent 88%,var(--blue))}.oci-volume-choice label.danger:has(input:checked){border-color:var(--red);background:color-mix(in srgb,var(--surface-solid) 95%,var(--red));box-shadow:0 0 0 3px color-mix(in srgb,transparent 88%,var(--red))}.oci-volume-choice input[type="radio"]{appearance:none;display:grid;place-content:center;width:18px!important;height:18px!important;margin:1px 0 0;padding:0;border:1.5px solid var(--line-strong);border-radius:50%;background:var(--surface-solid);cursor:pointer}.oci-volume-choice input[type="radio"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .14s ease}.oci-volume-choice input[type="radio"]:checked{border-color:var(--blue)}.oci-volume-choice input[type="radio"]:checked::before{transform:scale(1)}.oci-volume-choice label.danger input[type="radio"]:checked{border-color:var(--red)}.oci-volume-choice label.danger input[type="radio"]:checked::before{background:var(--red)}.oci-volume-choice span{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:8px;min-width:0}.oci-volume-choice span>svg{grid-row:1/3;width:17px;height:17px;color:var(--blue)}.oci-volume-choice label.danger span>svg{color:var(--red)}.oci-volume-choice strong,.oci-volume-choice small{display:block}.oci-volume-choice strong{font-size:12px;line-height:1.35}.oci-volume-choice small{margin-top:4px;color:var(--text-3);font-size:10px;line-height:1.5}.oci-confirm-field{display:grid;gap:8px}.oci-confirm-field>span{display:block;color:var(--text-2);font-size:11px;font-weight:750}.oci-confirm-field>span strong{color:var(--text);font-weight:800}.provider-danger-zone{border-color:color-mix(in srgb,var(--red) 28%,var(--line));background:color-mix(in srgb,var(--surface-soft) 95%,var(--red))}
.dark .oci-capacity-card{border-color:#4b443d;background:linear-gradient(150deg,#172536,#101e2f 48%)}.dark .oci-capacity-remaining>span,.dark .oci-region-pills>span,.dark .oci-launch-capacity>span,.dark .oci-preset-switch button,.dark .oci-fixed-shape,.dark .oci-public-ip,.dark .oci-volume-choice label{border-color:#29445f;background:#122238}.dark .oci-capacity-reason,.dark .oci-launch-blocked{color:#efc477;border-color:#604b27;background:#2b2418}.dark .oci-launch-impact,.dark .oci-launch-progress{border-color:#315a8e;background:#122741}.dark .oci-launch-progress.is-error{border-color:#653540;background:#2b1d27}.dark .provider-danger-zone{border-color:#653540;background:#2b1d27}
@media (max-width:1180px){.oci-free-tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.oci-free-tier-grid{grid-template-columns:1fr}.oci-launch-toolbar{grid-template-columns:1fr}.oci-launch-capacity{grid-template-columns:1fr 1fr}.instance-table th:last-child,.instance-table td:last-child{min-width:224px}}
@media (max-width:520px){.oci-capacity-heading{align-items:flex-start}.oci-capacity-heading>span{display:none}.oci-capacity-actions{display:grid;grid-template-columns:1fr 1fr auto}.oci-capacity-card{padding:14px}.oci-capacity-card-head{display:grid}.oci-capacity-card-head>.status-label{justify-self:start}.oci-capacity-remaining{grid-template-columns:1fr}.oci-launch-dialog{width:calc(100vw - 8px)!important}.oci-launch-card{padding:15px;max-height:calc(100dvh - 8px)}.oci-launch-form-grid{grid-template-columns:1fr}.oci-launch-wide{grid-column:auto}.oci-launch-capacity{grid-template-columns:1fr 1fr}.oci-preset-switch{grid-template-columns:1fr}.oci-launch-form .modal-actions,.oci-terminate-card .modal-actions{display:grid;grid-template-columns:1fr 1fr}.oci-launch-form .modal-actions button,.oci-terminate-card .modal-actions button{width:100%;justify-content:center}.oci-terminate-dialog{width:calc(100vw - 8px)!important}.oci-terminate-card{padding:17px}}
@media (prefers-reduced-motion:reduce){.oci-launch-progress-track i,.oci-launch-progress-symbol svg,.oci-launch-form .primary-button.is-loading svg{animation-duration:2.6s}}

/* OCI tenancy identity and Block Volume management */
.oci-manager-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:13px;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft)}
.oci-manager-toolbar>label{display:grid;gap:6px;min-width:min(330px,100%);color:var(--text-3);font-size:10px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}.oci-manager-toolbar>label select{min-height:38px;letter-spacing:normal;text-transform:none}.oci-manager-toolbar>div:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.oci-manager-toolbar .soft-button,.oci-manager-toolbar .primary-button{min-height:38px}
.oci-info-note{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--blue) 23%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--surface-solid) 95%,var(--blue));color:var(--text-2);font-size:10px;line-height:1.55}.oci-info-note>svg{width:17px;height:17px;color:var(--blue)}
.oci-identity-list,.oci-storage-list{display:grid;gap:8px}.oci-identity-user,.oci-storage-item{display:grid;grid-template-columns:auto minmax(210px,1fr) auto;align-items:center;gap:11px;min-width:0;padding:11px;border:1px solid var(--line);border-radius:13px;background:var(--surface-solid)}.oci-identity-user.is-principal{border-color:color-mix(in srgb,var(--blue) 28%,var(--line));background:color-mix(in srgb,var(--surface-solid) 97%,var(--blue))}
.oci-identity-main,.oci-storage-main{min-width:0}.oci-identity-main>div,.oci-storage-main>div{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.oci-identity-main strong,.oci-storage-main strong{color:var(--text);font-size:12px}.oci-identity-main>span,.oci-storage-main>span{display:block;margin-top:4px;color:var(--text-2);font-size:11px;overflow-wrap:anywhere}.oci-identity-main>small,.oci-storage-main>small{display:block;margin-top:3px;color:var(--text-3);font-size:9px;overflow-wrap:anywhere}
.oci-pill{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;border:1px solid var(--line);border-radius:999px;background:var(--surface-soft);color:var(--text-3);font-size:8px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.oci-pill.ok{color:#08795f;border-color:color-mix(in srgb,#08795f 25%,var(--line));background:color-mix(in srgb,var(--surface-solid) 94%,#1ba87f)}.oci-pill.warning{color:#946315;border-color:#e5cf9b;background:#fff9e9}.oci-pill.principal{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 30%,var(--line));background:color-mix(in srgb,var(--surface-solid) 92%,var(--blue))}
.oci-row-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}.oci-row-actions .soft-button,.oci-row-actions .danger-soft-button{min-height:32px;padding:0 9px;font-size:9px}.oci-row-actions .icon-button{width:32px;height:32px}.oci-row-actions svg{width:14px;height:14px}
.typed-confirm-label{display:grid;gap:7px;color:var(--text-2);font-size:11px}.typed-confirm-label strong{color:var(--text)}
.oci-secret-dialog{width:min(570px,calc(100vw - 24px))!important}.oci-secret-card{gap:15px}.oci-secret-value{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:11px;border:1px solid color-mix(in srgb,var(--blue) 35%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--surface-solid) 92%,var(--blue))}.oci-secret-value code{display:flex;align-items:center;min-width:0;padding:0 8px;color:var(--text);font:800 21px/1.2 var(--font-mono);letter-spacing:.08em;overflow-wrap:anywhere}
.oci-identity-create-dialog,.oci-storage-create-dialog,.oci-storage-edit-dialog,.oci-backup-create-dialog{width:min(720px,calc(100vw - 24px))!important}.oci-operation-card{max-height:calc(100dvh - 24px);overflow-y:auto}.oci-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.oci-form-grid>label{display:grid;gap:7px;color:var(--text-2);font-size:11px;font-weight:700}.oci-form-grid>label>small{color:var(--text-3);font-size:9px;font-weight:600;line-height:1.4}.oci-form-wide{grid-column:1/-1}.oci-form-grid [hidden]{display:none}
.oci-group-choices{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}.oci-group-choices legend{padding:0 6px;color:var(--text-2);font-size:10px;font-weight:750}.oci-group-choice{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:8px!important;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--surface-solid);cursor:pointer}.oci-group-choice:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,transparent 88%,var(--blue))}.oci-group-choice.is-admin:has(input:checked){border-color:#c88719;box-shadow:0 0 0 2px color-mix(in srgb,transparent 84%,#c88719)}.oci-group-choice input{width:17px;height:17px;margin-top:2px;accent-color:var(--blue)}.oci-group-choice strong,.oci-group-choice small{display:block}.oci-group-choice strong{color:var(--text);font-size:10px}.oci-group-choice small{margin-top:3px;color:var(--text-3);font-size:8px;line-height:1.4}
.oci-storage-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:1}.oci-storage-summary>span{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--surface-solid)}.oci-storage-summary>span>svg{grid-row:1/3;width:16px;height:16px;color:var(--blue)}.oci-storage-summary strong,.oci-storage-summary small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oci-storage-summary strong{color:var(--text);font-size:10px}.oci-storage-summary small{color:var(--text-3);font-size:8px}.oci-count-pill{display:grid!important;place-items:center;min-width:27px;height:27px;margin:0!important;border:1px solid var(--line);border-radius:9px;background:var(--surface-solid);color:var(--text-2)!important;font-size:10px!important;font-weight:800}
.oci-storage-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:5px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft)}.oci-storage-tabs button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;min-height:45px;padding:8px 12px;border:1px solid transparent;border-radius:10px;color:var(--text-2);background:transparent;font:inherit;font-size:11px;font-weight:750;line-height:1.2;text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}.oci-storage-tabs button svg{width:17px;height:17px}.oci-storage-tabs button small{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:8px;background:var(--surface-solid);color:var(--text-3);font-size:9px}.oci-storage-tabs button[aria-selected="true"]{border-color:color-mix(in srgb,var(--blue) 40%,var(--line));background:var(--surface-solid);color:var(--blue);box-shadow:var(--shadow-sm)}.oci-storage-tabs button:focus-visible{outline:3px solid color-mix(in srgb,transparent 75%,var(--blue));outline-offset:2px}
.oci-storage-workspace{display:grid;gap:13px;min-width:0}.oci-storage-workspace-head{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:14px 15px;border:1px solid color-mix(in srgb,var(--blue) 24%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--surface-solid) 96%,var(--blue))}.oci-storage-workspace-head>div{min-width:0}.oci-storage-workspace-head strong,.oci-storage-workspace-head span{display:block}.oci-storage-workspace-head strong{color:var(--text);font-size:14px}.oci-storage-workspace-head span{margin-top:4px;color:var(--text-2);font-size:10px;line-height:1.45}.oci-storage-workspace-head>button{flex:0 0 auto}
.oci-current-storage{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft)}.oci-current-storage>span:first-child{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:9px;min-width:0}.oci-current-storage>span:first-child>svg{grid-row:1/3;width:18px;height:18px;color:var(--blue)}.oci-current-storage strong,.oci-current-storage small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oci-current-storage strong{font-size:12px}.oci-current-storage small{margin-top:3px;color:var(--text-3);font-size:9px}.oci-resize-warning{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:9px;padding:11px 12px;border:1px solid #e2c98f;border-radius:12px;background:#fff8e9;color:#855b15;font-size:10px;line-height:1.5}.oci-resize-warning svg{width:17px;height:17px}
.dark .oci-info-note{border-color:#294d7b;background:#122741}.dark .oci-pill.warning{color:#efc477;border-color:#604b27;background:#2b2418}.dark .oci-pill.ok{color:#65e0bb;border-color:#285e52;background:#15352f}.dark .oci-secret-value{border-color:#315a8e;background:#122741}
.dark .oci-storage-tabs,.dark .oci-current-storage{border-color:#29445f;background:#101e2f}.dark .oci-storage-tabs button[aria-selected="true"],.dark .oci-storage-workspace-head{border-color:#315a8e;background:#122741}.dark .oci-resize-warning{color:#efc477;border-color:#604b27;background:#2b2418}
@media (max-width:900px){.oci-manager-toolbar{align-items:stretch;flex-direction:column}.oci-manager-toolbar>label{min-width:0}.oci-manager-toolbar>div:last-child{justify-content:flex-start}.oci-identity-user,.oci-storage-item{grid-template-columns:auto minmax(0,1fr)}.oci-row-actions{grid-column:1/-1;justify-content:flex-start;padding-left:43px}.oci-storage-summary{width:100%}}
@media (max-width:560px){.oci-management-actions{grid-template-columns:1fr}.oci-identity-dialog,.oci-storage-dialog,.oci-identity-create-dialog,.oci-storage-create-dialog,.oci-storage-edit-dialog,.oci-backup-create-dialog{width:calc(100vw - 8px)!important}.oci-identity-dialog .provider-manager-card,.oci-storage-dialog .provider-manager-card,.oci-operation-card{max-height:calc(100dvh - 8px);padding:15px}.oci-manager-toolbar>div:last-child{display:grid;grid-template-columns:1fr}.oci-manager-toolbar>div:last-child>*{width:100%;justify-content:center}.oci-storage-summary{grid-template-columns:1fr}.oci-storage-tabs{grid-template-columns:1fr 1fr}.oci-storage-tabs button{grid-template-columns:auto minmax(0,1fr);padding:8px}.oci-storage-tabs button small{display:none}.oci-storage-workspace-head{align-items:stretch;flex-direction:column}.oci-storage-workspace-head>button{width:100%;justify-content:center}.oci-identity-user,.oci-storage-item{grid-template-columns:auto minmax(0,1fr);align-items:start}.oci-row-actions{display:grid;grid-template-columns:1fr 1fr;padding-left:0}.oci-row-actions>*{width:100%!important}.oci-form-grid{grid-template-columns:1fr}.oci-form-wide{grid-column:auto}.oci-current-storage{align-items:flex-start;flex-direction:column}.oci-group-choices{grid-template-columns:1fr}.oci-secret-value{grid-template-columns:1fr}.oci-secret-value .soft-button{width:100%}.typed-confirm-card{padding:17px}}

/* Provider management surfaces */
.provider-manager-dialog{width:min(1040px,calc(100vw - 32px))!important;max-height:min(94dvh,980px)!important}
.provider-manager-card{max-height:min(94dvh,980px);gap:18px;overflow-y:auto}
.provider-manager-content{display:grid;gap:14px;min-width:0}
.provider-manager-loading{min-height:240px;display:flex;align-items:center;justify-content:center;gap:14px;padding:30px;color:var(--text-2);text-align:left}
.provider-manager-loading.compact{min-height:96px;padding:16px}
.provider-manager-loading>svg{width:28px;height:28px;color:var(--blue);animation:dns-loading-spin .9s linear infinite}
.provider-manager-loading strong,.provider-manager-loading span{display:block}.provider-manager-loading strong{color:var(--text);font-size:14px}.provider-manager-loading span{margin-top:4px;color:var(--text-3);font-size:12px;line-height:1.45}
.provider-fact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.provider-fact-grid>div{min-width:0;min-height:76px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft)}
.provider-fact-grid span,.provider-fact-grid strong{display:block}.provider-fact-grid>div>span{color:var(--text-3);font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.provider-fact-grid>div>strong{margin-top:8px;color:var(--text);font-size:13px;line-height:1.4;overflow-wrap:anywhere}.provider-fact-grid strong i{font-style:normal}
.provider-operation-section{display:grid;gap:12px;padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--surface-soft)}
.provider-operation-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0}.provider-operation-heading>div{min-width:0}.provider-operation-heading strong,.provider-operation-heading span{display:block}.provider-operation-heading strong{color:var(--text);font-size:14px}.provider-operation-heading span{margin-top:4px;color:var(--text-3);font-size:11px;line-height:1.45}
.provider-action-grid{display:flex;flex-wrap:wrap;gap:8px}.provider-action-grid button{flex:1 1 150px}
.danger-soft-button{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border:1px solid color-mix(in srgb,var(--red) 32%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--surface-solid) 94%,var(--red));color:#b53645;font-size:11px;font-weight:750;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease}
.danger-soft-button:hover:not(:disabled){transform:translateY(-1px);border-color:color-mix(in srgb,var(--red) 58%,var(--line));background:color-mix(in srgb,var(--surface-solid) 88%,var(--red));color:var(--red)}
.danger-soft-button svg{width:16px;height:16px}.danger-soft-button:disabled{opacity:.43;cursor:not-allowed}
.provider-list{display:grid;gap:7px}.provider-list>div,.domain-protection-grid>div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:var(--surface-solid)}
.provider-list-icon{width:32px;height:32px;display:grid;place-items:center;align-self:center;border-radius:10px;background:color-mix(in srgb,var(--blue) 9%,var(--surface-solid));color:var(--blue)}.provider-list-icon svg{width:16px;height:16px}
.provider-list strong,.provider-list span,.domain-protection-grid strong,.domain-protection-grid span{display:block}.provider-list strong,.domain-protection-grid strong{color:var(--text);font-size:12px}.provider-list>div>div>span,.domain-protection-grid>div>div>span{margin-top:3px;color:var(--text-3);font-size:11px;overflow-wrap:anywhere}
.provider-empty-note{margin:0;padding:12px;color:var(--text-3);font-size:12px;text-align:center}
.provider-inline-control{display:flex;align-items:end;flex-wrap:wrap;gap:10px}.provider-inline-control>label:not(.switch-field){display:grid;gap:6px;min-width:180px}.provider-inline-control>label>span{color:var(--text-2);font-size:11px}.provider-inline-control select{height:40px!important}
.rdns-list{display:grid;gap:8px}.rdns-row{display:grid;grid-template-columns:minmax(145px,.72fr) minmax(220px,1fr) auto;align-items:center;gap:9px}.rdns-row code{padding:0 4px;color:var(--text-2);font:650 12px/1.4 var(--font-mono);overflow-wrap:anywhere}.rdns-row input{height:40px!important}
.domain-protection-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.domain-protection-grid>div{grid-template-columns:auto minmax(0,1fr) auto}.domain-protection-grid button{white-space:nowrap}
.renewal-control{align-items:center}.renewal-control .switch-field{min-height:46px;padding:7px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-solid);white-space:normal;cursor:pointer}.renewal-control .switch-field input{position:relative;width:42px;height:24px;flex:0 0 42px;appearance:none;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface-soft);cursor:pointer;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.renewal-control .switch-field input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(7,25,48,.25);transition:transform .2s cubic-bezier(.2,.8,.2,1)}.renewal-control .switch-field input:checked{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 3px rgba(35,103,242,.11)}.renewal-control .switch-field input:checked::after{transform:translateX(18px)}.renewal-control .switch-field input:focus-visible{outline:3px solid rgba(35,103,242,.25);outline-offset:2px}.renewal-control .primary-button{margin-left:auto}

.cloudflare-management-panel{padding:13px 15px;background:var(--surface-soft)}.cloudflare-management-panel .provider-operation-heading span{color:var(--text-2)}
.cloudflare-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cloudflare-control-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--surface-solid)}
.cloudflare-control-card>div{min-width:0}.cloudflare-control-card>div>strong,.cloudflare-control-card>div>span{display:block}.cloudflare-control-card>div>strong{font-size:12px}.cloudflare-control-card>div>span{margin-top:3px;color:var(--text-2);font-size:10px;line-height:1.35}.cloudflare-control-card>button{white-space:nowrap}
.cloudflare-control-action{display:flex;align-items:center;gap:6px}.cloudflare-control-action select{width:132px!important;height:36px!important;padding:0 9px!important}.cloudflare-control-action button{min-height:36px}
.dnssec-ds{grid-column:1/-1;display:block;max-height:48px;padding:8px 10px;border:1px dashed var(--line-strong);border-radius:9px;background:var(--surface-soft);color:var(--text-2);font:600 10px/1.45 var(--font-mono);overflow:auto;white-space:normal;overflow-wrap:anywhere}
.dark .danger-soft-button{color:#ff9ca7;border-color:#653540;background:#2b1d27}.dark .danger-soft-button:hover:not(:disabled){color:#ffc1c8;border-color:#92505c;background:#39222d}
.dark .provider-operation-section,.dark .provider-fact-grid>div{background:#122238;border-color:#29445f}.dark .provider-list>div,.dark .domain-protection-grid>div,.dark .cloudflare-control-card{background:#101e2f;border-color:#29445f}.dark .provider-list-icon{background:#172e4c;color:#8db6ff}

/* Cloudflare zone analytics */
.analytics-action{color:#d87515!important;background:color-mix(in srgb,var(--surface-solid) 82%,#f28c39)!important;border-color:color-mix(in srgb,var(--line) 70%,#f28c39)!important}
.domain-analytics-button{min-height:34px;padding:0 11px!important;gap:7px;font-size:10px}.domain-analytics-button svg{width:14px;height:14px}
.analytics-landing-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:-8px 0 18px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--line) 68%,#f28c39);border-radius:15px;background:linear-gradient(105deg,color-mix(in srgb,var(--surface-solid) 90%,#f28c39),var(--surface-solid));box-shadow:var(--shadow-sm)}
.analytics-landing-banner>span:first-child{display:grid;place-items:center;width:42px;height:42px;color:#d87515;border-radius:13px;background:color-mix(in srgb,var(--surface-solid) 68%,#f28c39)}.analytics-landing-banner>span:first-child svg{width:20px;height:20px}.analytics-landing-banner strong,.analytics-landing-banner p{display:block;margin:0}.analytics-landing-banner strong{font-size:12px}.analytics-landing-banner p{margin-top:4px;color:var(--text-3);font-size:10px;line-height:1.5}
.analytics-zone-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.analytics-zone-card{display:grid;grid-template-rows:auto minmax(94px,auto) auto auto;gap:16px;min-width:0;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--surface-solid) 96%,#f28c39),var(--surface-solid) 42%);box-shadow:var(--shadow-sm);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.analytics-zone-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--line) 58%,#f28c39);box-shadow:var(--shadow-md)}
.analytics-zone-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.analytics-zone-mark{display:grid;place-items:center;width:42px;height:42px;color:#d87515;border-radius:13px;background:color-mix(in srgb,var(--surface-solid) 68%,#f28c39)}.analytics-zone-mark svg{width:21px;height:21px}.analytics-zone-card .eyebrow{margin:0 0 7px;color:#d87515}.analytics-zone-card h3{margin:0;overflow:hidden;color:var(--text);font-size:17px;line-height:1.2;letter-spacing:-.025em;text-overflow:ellipsis;white-space:nowrap}.analytics-zone-card>div>p:last-child{margin:7px 0 0;overflow:hidden;color:var(--text-3);font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.analytics-zone-facts{display:grid;gap:7px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft)}.analytics-zone-facts>span{display:grid;grid-template-columns:15px minmax(0,1fr);align-items:center;gap:7px;min-width:0;color:var(--text-2);font-size:10px}.analytics-zone-facts svg{width:14px;height:14px;color:var(--text-3)}.analytics-zone-facts span span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.analytics-zone-open{justify-content:center;width:100%;min-height:40px}.analytics-zone-empty{grid-column:1/-1;min-height:270px}.analytics-zone-empty>div:first-of-type{display:grid;gap:6px}.analytics-zone-empty strong,.analytics-zone-empty span{display:block}.analytics-zone-empty span{color:var(--text-3);font-size:10px}
.cloudflare-analytics-dialog{width:min(calc(100vw - 40px),1240px)!important;max-height:calc(100dvh - 24px)!important}
.cloudflare-analytics-card{height:min(900px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);min-height:0;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden;background:linear-gradient(155deg,color-mix(in srgb,var(--surface-solid) 96%,#f28c39),var(--surface-solid) 34%)}
.analytics-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft)}
.analytics-range-switch{display:flex;align-items:center;gap:6px}.analytics-range-switch .filter-pill{min-height:36px;padding:0 13px}
.analytics-toolbar>.soft-button{min-height:36px;white-space:nowrap}.analytics-toolbar>.soft-button svg{width:15px;height:15px}
.cloudflare-analytics-content{display:grid;align-content:start;gap:14px;min-height:0;overflow:auto;padding:1px 5px 2px 1px;scrollbar-gutter:stable}
.analytics-period-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--line) 75%,#f28c39);border-radius:14px;background:color-mix(in srgb,var(--surface-solid) 94%,#f28c39)}
.analytics-period-summary>div{display:flex;align-items:center;gap:11px}.analytics-period-summary>div>svg{width:20px;height:20px;color:#d87515}.analytics-period-summary strong,.analytics-period-summary small{display:block}.analytics-period-summary strong{font-size:12px}.analytics-period-summary small{margin-top:3px;color:var(--text-3);font-size:9px}
.analytics-metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.analytics-metric-card{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:12px;min-height:104px;padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--surface-solid);box-shadow:var(--shadow-sm)}
.analytics-metric-card>span{display:grid;place-items:center;width:42px;height:42px;color:#d87515;border-radius:13px;background:color-mix(in srgb,var(--surface-solid) 72%,#f28c39)}.analytics-metric-card>span svg{width:19px;height:19px}
.analytics-metric-card small,.analytics-metric-card strong,.analytics-metric-card em{display:block;min-width:0}.analytics-metric-card small{color:var(--text-3);font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.analytics-metric-card strong{margin-top:5px;color:var(--text);font-size:23px;line-height:1;letter-spacing:-.035em}.analytics-metric-card em{margin-top:6px;color:var(--text-2);font-size:9px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.analytics-traffic-panel,.analytics-breakdown{border:1px solid var(--line);border-radius:16px;background:var(--surface-solid);box-shadow:var(--shadow-sm);overflow:hidden}
.analytics-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line);background:var(--surface-soft)}.analytics-section-heading .eyebrow{margin:0 0 4px}.analytics-section-heading h4{margin:0;font-size:13px}.analytics-section-heading>span{color:var(--text-3);font-size:9px;font-weight:750}
.analytics-chart-wrap{position:relative;overflow-x:auto;padding:5px 12px 2px}.analytics-chart{display:block;width:100%;min-width:680px;height:270px;overflow:visible}.analytics-grid line{stroke:var(--line);stroke-width:1}.analytics-grid text{fill:var(--text-3);font-size:10px}.analytics-area{fill:color-mix(in srgb,#2367f2 11%,transparent)}.analytics-request-line,.analytics-cached-line{fill:none;stroke-linecap:round;stroke-linejoin:round}.analytics-request-line{stroke:#2367f2;stroke-width:3}.analytics-cached-line{stroke:#f28c39;stroke-width:2.3;stroke-dasharray:7 6}.analytics-points circle{fill:var(--surface-solid);stroke:#2367f2;stroke-width:2}.analytics-chart-legend{position:sticky;left:12px;z-index:2;display:flex;justify-content:flex-end;gap:14px;padding:8px 5px 0;color:var(--text-2);font-size:9px}.analytics-chart-legend span{display:flex;align-items:center;gap:6px}.analytics-chart-legend i{display:block;width:18px;height:3px;border-radius:99px;background:#2367f2}.analytics-chart-legend .cached i{height:2px;background:repeating-linear-gradient(90deg,#f28c39 0 6px,transparent 6px 9px)}
.analytics-breakdown-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.analytics-breakdown ol{display:grid;gap:11px;margin:0;padding:14px 15px 16px;list-style:none}.analytics-breakdown li>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}.analytics-breakdown li strong{min-width:0;color:var(--text-2);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.analytics-breakdown li>div>span{color:var(--text);font-size:10px;font-weight:800}.analytics-breakdown-track{display:block;height:5px;overflow:hidden;border-radius:99px;background:var(--surface-soft)}.analytics-breakdown-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2367f2,#4fa4ff)}.analytics-breakdown:nth-child(2) .analytics-breakdown-track i{background:linear-gradient(90deg,#f28c39,#ffc36a)}.analytics-breakdown-empty{padding:15px;color:var(--text-3);font-size:10px;text-align:center}
.analytics-footnote{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:9px;padding:11px 12px;color:var(--text-3);border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);font-size:9px;line-height:1.5}.analytics-footnote svg{width:15px;height:15px;color:var(--blue)}
.analytics-loading,.analytics-error,.analytics-empty{display:grid;align-items:center;color:var(--text-2);border:1px solid var(--line);border-radius:15px;background:var(--surface-solid)}.analytics-loading{grid-template-columns:44px minmax(0,1fr);gap:13px;padding:18px}.analytics-loading>span{display:grid;place-items:center;width:44px;height:44px;color:#d87515;border-radius:13px;background:color-mix(in srgb,var(--surface-solid) 72%,#f28c39)}.analytics-loading svg{animation:spin .9s linear infinite}.analytics-loading strong,.analytics-loading small{display:block}.analytics-loading small{margin-top:4px;color:var(--text-3);font-size:10px}.analytics-skeleton-grid i,.analytics-chart-skeleton{display:block;overflow:hidden;border:1px solid var(--line);border-radius:15px;background:linear-gradient(100deg,var(--surface-soft) 25%,color-mix(in srgb,var(--surface-soft) 65%,var(--surface-solid)) 45%,var(--surface-soft) 65%);background-size:220% 100%;animation:analytics-shimmer 1.4s linear infinite}.analytics-skeleton-grid i{height:104px}.analytics-chart-skeleton{height:290px}@keyframes analytics-shimmer{to{background-position:-220% 0}}
.analytics-error{grid-template-columns:44px minmax(0,1fr) auto;gap:13px;padding:18px;border-color:color-mix(in srgb,var(--line) 60%,var(--red));background:color-mix(in srgb,var(--surface-solid) 95%,var(--red))}.analytics-error>svg{width:24px;height:24px;margin:10px;color:var(--red)}.analytics-error strong,.analytics-error span,.analytics-error small{display:block}.analytics-error span{margin-top:5px;color:var(--text-2);font-size:10px;line-height:1.5}.analytics-error small{margin-top:5px;color:var(--text-3);font-size:9px}.analytics-empty{place-items:center;gap:5px;min-height:225px;padding:25px;text-align:center}.analytics-empty svg{width:26px;height:26px;color:var(--text-3)}.analytics-empty span{font-size:10px;color:var(--text-3)}
.dark .analytics-zone-card,.dark .analytics-metric-card,.dark .analytics-traffic-panel,.dark .analytics-breakdown,.dark .analytics-loading,.dark .analytics-error,.dark .analytics-empty{background:#101e2f;border-color:#29445f}.dark .analytics-landing-banner{background:#172536;border-color:#4b4c4a}.dark .analytics-zone-facts{background:#172536;border-color:#29445f}.dark .analytics-period-summary{background:#172536;border-color:#3f4d55}.dark .analytics-action{background:#273347!important;border-color:#4b4c4a!important;color:#ffb45d!important}

@media (max-width:900px){
  .provider-fact-grid{grid-template-columns:1fr 1fr}
  .domain-protection-grid,.cloudflare-control-grid{grid-template-columns:1fr}
  .zone-editor-tab{padding-right:9px;padding-left:9px}.zone-editor-panel-stack{gap:12px}
  .analytics-zone-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .analytics-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-breakdown-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .provider-manager-dialog{width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important}
  .provider-manager-card{max-height:calc(100dvh - 12px);padding:17px}
  .provider-fact-grid{grid-template-columns:1fr 1fr}.provider-fact-grid>div{min-height:68px;padding:11px}
  .provider-operation-heading{align-items:flex-start}.provider-inline-control,.renewal-control{align-items:stretch;display:grid;grid-template-columns:1fr}.provider-inline-control>label:not(.switch-field){min-width:0}.renewal-control .primary-button{margin-left:0}
  .rdns-row{grid-template-columns:1fr}.rdns-row button{width:100%}
  .domain-protection-grid>div,.cloudflare-control-card{grid-template-columns:auto minmax(0,1fr)}.domain-protection-grid button,.cloudflare-control-card>button,.cloudflare-control-action,.dnssec-ds{grid-column:1/-1;width:100%}.cloudflare-control-action select{width:100%!important;flex:1}.cloudflare-control-action button{width:auto}
  .zone-editor-tabs{grid-template-columns:repeat(3,minmax(102px,1fr));overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.zone-editor-tabs::-webkit-scrollbar{display:none}.zone-editor-tab{grid-template-columns:28px minmax(0,1fr);gap:7px;min-height:50px;padding:5px 7px}.zone-editor-tab>svg{width:15px;height:15px;padding:6px;border-radius:8px}.zone-editor-tab strong{font-size:10px}.zone-editor-tab small{display:none}.zone-editor-tab.active::after{right:9px;left:9px}.zone-editor-panel{padding-right:0}
  .dns-record-section.form-open{grid-template-rows:auto minmax(0,1fr)}.dns-record-section.form-open .dns-record-form{min-height:0;overflow:auto;scrollbar-gutter:stable}.dns-record-section.form-open #dns-record-table{display:none}
  .analytics-landing-banner{grid-template-columns:auto minmax(0,1fr);align-items:start}.analytics-landing-banner>.status-label{grid-column:1/-1;justify-self:start}.analytics-zone-grid{grid-template-columns:1fr}.analytics-zone-card{grid-template-rows:auto auto auto auto}
  .cloudflare-analytics-dialog{width:calc(100vw - 10px)!important;max-height:calc(100dvh - 10px)!important}.cloudflare-analytics-card{height:calc(100dvh - 10px);max-height:calc(100dvh - 10px);padding:16px}.analytics-toolbar{align-items:stretch;flex-direction:column}.analytics-range-switch{display:grid;grid-template-columns:repeat(3,1fr)}.analytics-range-switch .filter-pill{padding:0 8px}.analytics-toolbar>.soft-button{justify-content:center}.analytics-metric-card{grid-template-columns:36px minmax(0,1fr);min-height:92px;padding:12px;gap:9px}.analytics-metric-card>span{width:36px;height:36px}.analytics-metric-card strong{font-size:19px}.analytics-period-summary{align-items:flex-start}.analytics-error{grid-template-columns:34px minmax(0,1fr)}.analytics-error>button{grid-column:1/-1;width:100%}
}

/* Keep instance IP copy controls visible in both themes. */
.instance-network{gap:6px}
.instance-ip{gap:0;overflow:hidden;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface-soft)}
.instance-ip code{padding:6px 8px;color:var(--text);font-size:10px}
.instance-ip-copy{width:29px!important;height:29px!important;min-width:29px!important;flex:0 0 29px;border:0!important;border-left:1px solid var(--line-strong)!important;border-radius:0!important;background:var(--surface-solid)!important;color:var(--blue)!important}
.instance-ip-copy svg{width:14px!important;height:14px!important;stroke-width:2.2}
.instance-ip-copy:hover{background:color-mix(in srgb,var(--surface-solid) 88%,var(--blue))!important;color:var(--blue-2)!important}
.instance-ip-copy:focus-visible{position:relative;z-index:1;outline:2px solid var(--blue);outline-offset:-2px}
.instance-ip-public{border-color:#8fcfc6;background:#eefaf8}
.instance-ip-public .instance-ip-copy{border-left-color:#8fcfc6!important;color:#08786d!important}
.dark .instance-ip{border-color:#34516f;background:#14263b}
.dark .instance-ip-copy{border-left-color:#34516f!important;background:#1a3048!important;color:#a9c7e8!important}
.dark .instance-ip-public{border-color:#2f746b;background:#153334}
.dark .instance-ip-public .instance-ip-copy{border-left-color:#2f746b!important;background:#17403e!important;color:#75ded2!important}

/* Registrar: consistent spacing, intrinsic badges, and readable contact records. */
.registrar-whois>.provider-operation-heading{padding-bottom:14px;border-bottom:1px solid var(--line)}
.registrar-whois>.provider-operation-heading button{flex-shrink:0}
.registrar-owner-change{padding:18px!important;border:1px solid var(--line);border-radius:14px;background:var(--surface-solid)}
.registrar-owner-change summary{font-size:15px!important}
.registrar-owner-change #registrar-method-help{display:block;padding:12px 14px;border-left:3px solid var(--blue);border-radius:8px;background:var(--surface-soft);font-size:12px;font-weight:400;line-height:1.6;color:var(--text-2)}
.registrar-manual-dialog{border:0!important;border-radius:22px;box-shadow:0 24px 80px #0005}
.registrar-manual-dialog .modal-card{padding:24px;border:0;gap:20px}
.registrar-manual-roles{display:grid;gap:14px}
.registrar-manual-roles details{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft)}
.registrar-manual-roles summary{font-size:14px;font-weight:750;cursor:pointer;padding:3px 0;color:var(--text)}
.registrar-manual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.registrar-manual-grid label{display:grid;gap:7px;min-width:0;font-size:12px;font-weight:600;color:var(--text-2)}
.registrar-manual-grid input{width:100%;min-width:0}
.registrar-manual-result{font-size:13px;line-height:1.6;color:var(--text-2);margin:0}.registrar-manual-result:empty{display:none}
@media(max-width:650px){.registrar-whois>.provider-operation-heading{align-items:stretch;flex-direction:column}.registrar-manual-grid{grid-template-columns:1fr}.registrar-manual-dialog .modal-card{padding:16px}.registrar-owner-change{padding:14px!important}}
.registrar-manager-dialog{border:0!important;outline:none;border-radius:24px;box-shadow:0 28px 90px #0005}
.registrar-manager-dialog .provider-manager-card{padding:24px;gap:22px;border:0;border-radius:24px}
.registrar-manager-dialog .provider-manager-content{gap:18px}
.registrar-manager-dialog .provider-operation-section{padding:18px;gap:16px}
.registrar-manager-dialog .provider-fact-grid strong small{display:block;margin-top:5px;color:var(--text-3);font-weight:500}
.registrar-manager-dialog .registrar-expiry{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.registrar-manager-dialog .registrar-expiry span{display:inline-flex;width:auto}
.registrar-manager-dialog .renewal-control{align-items:flex-end;gap:12px}
.registrar-manager-dialog button{gap:8px}
.registrar-manager-dialog button svg{flex:none;display:block;width:16px;height:16px;margin:0}
.registrar-manager-dialog .provider-list-icon{display:grid;place-items:center}
.registrar-transfer-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid var(--line)}
.registrar-transfer-row>div{min-width:0}.registrar-transfer-row>button{flex-shrink:0}
.registrar-transfer-row strong{font-size:13px}
.registrar-transfer-row p,.registrar-owner-change>p{margin:6px 0 0;color:var(--text-2);font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.registrar-secret-box:not([hidden]){display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-solid)}
.registrar-secret-box code{flex:1;min-width:0;overflow-wrap:anywhere;user-select:all}
.registrar-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.registrar-contact-card{min-width:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-solid)}
.registrar-contact-card h4{margin:0 0 5px;font-size:13px}.registrar-contact-card small{color:var(--text-3);font-size:11px}
.registrar-contact-card dl{display:grid;gap:10px;margin:16px 0 0;font-size:12px;line-height:1.5}
.registrar-contact-card dl>div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px}
.registrar-contact-card dt{color:var(--text-3)}.registrar-contact-card dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.registrar-owner-change{border-top:1px solid var(--line);padding-top:16px}
.registrar-owner-change summary{cursor:pointer;font-size:13px;font-weight:700;padding:5px 0}
.registrar-owner-change[open]>:not(summary){margin-top:16px}
.registrar-owner-change[open]>summary{margin-bottom:16px}
.registrar-owner-change #registrar-whois-result:empty,.registrar-owner-change #registrar-whois-preview:empty{display:none}
.registrar-owner-change #registrar-whois-result:not(:empty){padding:12px;border:1px solid var(--line);border-radius:10px;line-height:1.6}
.registrar-customer-label{display:grid;gap:8px;font-size:12px;font-weight:650}
.registrar-customer-label select{width:100%;min-width:0}
.registrar-owner-warning{padding:12px;border-radius:10px;background:color-mix(in srgb,#e6a23c 9%,var(--surface-solid))}
.registrar-owner-change>.primary-button{justify-self:start}
.registrar-manager-dialog .modal-actions{margin-top:0;padding-top:16px}
@media(max-width:700px){.registrar-manager-dialog .provider-manager-card{padding:16px}.registrar-manager-dialog .provider-operation-section{padding:14px}.registrar-contact-grid{grid-template-columns:1fr}.registrar-transfer-row{flex-direction:column;align-items:stretch}.registrar-secret-box:not([hidden]){flex-wrap:wrap}.registrar-secret-box code{flex-basis:100%}.registrar-owner-change>.primary-button{width:100%}.registrar-manager-dialog .domain-protection-grid>div{grid-template-columns:auto minmax(0,1fr)}.registrar-manager-dialog .domain-protection-grid button{grid-column:1/-1;width:100%}}

/* Global automation defaults. */
.settings-card{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(260px,330px) auto;align-items:center;gap:20px;padding:24px;border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-solid) 96%,var(--blue)),var(--surface-solid));box-shadow:var(--shadow-sm)}
.settings-card-icon{display:grid;place-items:center;width:48px;height:48px;color:#fff;border-radius:14px;background:linear-gradient(145deg,#2367f2,#4f91ff);box-shadow:0 10px 24px rgba(35,103,242,.23)}.settings-card-icon svg{width:22px;height:22px}
.settings-card-copy{min-width:0}.settings-card-copy h3{margin:0;color:var(--text);font-size:18px;letter-spacing:-.03em}.settings-card-copy>p{max-width:690px;margin:7px 0 0;color:var(--text-2);font-size:12px;line-height:1.55}.settings-card-copy code{padding:2px 5px;border-radius:5px;background:var(--surface-soft)}
.settings-record-preview{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.settings-record-preview>span{display:grid;grid-template-columns:22px 34px 14px minmax(90px,auto) auto;align-items:center;gap:7px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface-solid);font-size:9px}.settings-record-preview b{display:grid;place-items:center;width:22px;height:20px;color:#a85d10;border-radius:6px;background:#fff0dc}.settings-record-preview code{padding:0;color:var(--text-2);background:none}.settings-record-preview svg{width:12px;color:var(--text-3)}.settings-record-preview strong{font-family:var(--font-mono)}.settings-record-preview em{color:#08786d;font-style:normal;font-weight:750}
.settings-ip-field{display:grid;gap:7px}.settings-ip-field input{width:100%;min-height:44px;padding:0 13px;color:var(--text);border:1px solid var(--line-strong);border-radius:11px;background:var(--surface-solid);font-family:var(--font-mono);font-size:13px}.settings-ip-field small{color:var(--text-3);font-size:9px;font-weight:500;line-height:1.4}.settings-card>.primary-button{white-space:nowrap}
.dark .settings-card{background:linear-gradient(145deg,#12243a,#101e2f);border-color:#29445f}.dark .settings-record-preview>span,.dark .settings-ip-field input{background:#14263b;border-color:#29445f}.dark .settings-record-preview b{color:#ffc16c;background:#3b2c1a}
@media(max-width:1050px){.settings-card{grid-template-columns:48px minmax(0,1fr)}.settings-ip-field{grid-column:2}.settings-card>.primary-button{grid-column:2;justify-self:start}}
@media(max-width:620px){.settings-card{grid-template-columns:1fr;padding:18px}.settings-card-icon,.settings-card-copy,.settings-ip-field,.settings-card>.primary-button{grid-column:1}.settings-card>.primary-button{width:100%}.settings-record-preview{display:grid}.settings-record-preview>span{grid-template-columns:22px 34px 14px minmax(0,1fr) auto}.settings-record-preview strong{overflow:hidden;text-overflow:ellipsis}}

/* Native VPS management: bounded scroll area and centered fixed-size icons. */
dialog.modal-dialog.infomaniak-dialog{width:min(900px,calc(100vw - 32px));max-width:900px;max-height:min(90dvh,940px);padding:0}
.infomaniak-card{display:flex;flex-direction:column;max-height:min(90dvh,940px);padding:24px;gap:20px;overflow:hidden}
.infomaniak-card>.modal-heading,.infomaniak-card>.modal-actions{flex:none;margin:0}
.infomaniak-card [data-ik-body]{min-height:0;overflow-y:auto;display:grid;gap:18px;padding:2px}
.infomaniak-section{display:grid;gap:14px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.infomaniak-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.infomaniak-section h4,.infomaniak-section p{margin:0}.infomaniak-section-head p{margin-top:5px;color:var(--text-3);font-size:12px}
.infomaniak-power{display:flex;flex-wrap:wrap;gap:10px}.infomaniak-rules{display:grid;gap:8px}
.infomaniak-rule{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-solid)}
.infomaniak-rule-icon{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:10px;background:var(--surface-soft);color:var(--blue)}
.infomaniak-rule-icon svg{width:18px;height:18px;margin:0;display:block}.infomaniak-rule>div:not(.row-actions){flex:1;min-width:0}
.infomaniak-rule strong{display:block;font-size:13px;overflow-wrap:anywhere}.infomaniak-rule small{display:block;margin-top:5px;font-size:11px;color:var(--text-3);overflow-wrap:anywhere}
.infomaniak-rule .row-actions{flex:none;gap:4px}.infomaniak-rule-form{display:grid;gap:14px;border-top:1px solid var(--line);padding-top:16px}
.infomaniak-rule-form>.modal-actions{position:static;margin:0;min-width:0;flex-wrap:wrap}
@media(max-width:620px){dialog.modal-dialog.infomaniak-dialog{max-height:92dvh}.infomaniak-card{padding:18px;max-height:92dvh;gap:14px}.infomaniak-section{padding:12px}.infomaniak-rule{flex-wrap:wrap}.infomaniak-rule .row-actions{margin-left:48px}.infomaniak-rule-form .form-two{grid-template-columns:1fr}.infomaniak-section-head>.soft-button{width:100%}}

/* Shared typography roles, including dynamically created modal controls. */
body { font-weight: 400; }
h1, h2, h3, h4, h5, h6, .brand-name, .stat-value { font-family: var(--font-heading); }
h1, h2, .art-copy h1, .login-panel h2 { font-weight: 700; }
h3, h4, h5, h6 { font-weight: 600; }
input, select, textarea, .rule-table input:not([type="checkbox"]), .rule-table select,
code, pre, kbd, samp { font-family: var(--font-mono); }
input, select, textarea { font-variant-ligatures: none; }
input::placeholder, textarea::placeholder { font-family: inherit; }
small, .form-hint, .modal-subtitle, .eyebrow { font-family: var(--font); }