/* ============================================================
   IronCloud Registrar - main stylesheet
   Brand: #ff914d, Fredoka for large logos
   Light + dark themes via html[data-theme]
   ============================================================ */

   :root,
   [data-theme="dark"] {
       --ic-bg:           #121217;
       --ic-bg-alt:       #1a1a20;
       --ic-bg-deep:      #0a0a0c;
       --ic-bg-navy:      #1a1a20;
       --ic-panel:        rgba(255, 255, 255, 0.06);
       --ic-panel-line:   rgba(255, 255, 255, 0.12);
       --ic-row-hover:    rgba(255, 255, 255, 0.04);
       --ic-topbar-bg:    rgba(18, 18, 23, 0.96);
       --ic-login-bg:     rgba(18, 18, 23, 0.96);
       --ic-overlay:      rgba(10, 10, 12, 0.60);
       --ic-accent:       #ff914d;
       --ic-accent-dark:  #e67a35;
       --ic-accent-light: #ffb07a;
       --ic-accent-glow:  rgba(255, 145, 77, 0.35);
       --ic-gold:         #FFA31A;
       --ic-text:         #f4f4f5;
       --ic-text-muted:   #a1a1aa;
       --ic-teal:         #94a3b8;
       --ic-danger:       #f87171;
       --ic-success:      #34d399;
       --ic-radius:       10px;
       --ic-font:         "Segoe UI", "Helvetica Neue", Arial, sans-serif;
       --ic-popup-bg:     #1a1a20;
       --ic-popup-title-bg: #121217;
       --ic-popup-overlay: rgba(10, 10, 12, 0.60);
       --ic-footer-h:       104px;
   }
   
   [data-theme="light"] {
       --ic-bg:           #f4f4f5;
       --ic-bg-alt:       #ffffff;
       --ic-bg-deep:      #e4e4e7;
       --ic-bg-navy:      #ffffff;
       --ic-panel:        rgba(0, 0, 0, 0.035);
       --ic-panel-line:   rgba(0, 0, 0, 0.09);
       --ic-row-hover:    rgba(0, 0, 0, 0.03);
       --ic-topbar-bg:    rgba(255, 255, 255, 0.92);
       --ic-login-bg:     rgba(255, 255, 255, 0.98);
       --ic-overlay:      rgba(24, 24, 27, 0.35);
       --ic-text:         #18181b;
       --ic-text-muted:   #71717a;
       --ic-popup-bg:     #ffffff;
       --ic-popup-title-bg: #f4f4f5;
       --ic-popup-overlay: rgba(24, 24, 27, 0.45);
   }
   
   * { box-sizing: border-box; }
   
   html, body.icbody {
       margin: 0;
       padding: 0 0 calc(var(--ic-footer-h) + env(safe-area-inset-bottom, 0px)) 0;
       scroll-padding-bottom: calc(var(--ic-footer-h) + env(safe-area-inset-bottom, 0px));
       min-height: 100vh;
       background: var(--ic-bg);
       color: var(--ic-text);
       font-family: var(--ic-font);
       font-size: 15px;
   }
   
   a { color: var(--ic-accent-dark); text-decoration: none; }
   a:hover { color: var(--ic-accent); }
   
   /* ---------------- brand & logo ---------------- */
   .icbrand, .icloginbrand {
       font-family: "Fredoka", var(--ic-font);
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       gap: 10px;
   }
   .icloginbrand { justify-content: center; flex-wrap: wrap; }
   .icbrandtext { display: inline-flex; align-items: baseline; gap: 0; }
   .icbrand { font-size: 22px; font-weight: 700; letter-spacing: 2px; }
   .icloginbrand { font-size: 28px; margin-bottom: 4px; }
   .icbrandiron  { color: var(--ic-text); }   /* "IC" */
   .icbrandcloud { color: var(--ic-accent); } /* "Resolve" */
   .icbrandsub {
       display: block;
       width: 100%;
       font-family: var(--ic-font);
       font-size: 11px;
       font-weight: 400;
       letter-spacing: 1px;
       color: var(--ic-text-muted);
   }
   .iclogo { height: 32px; width: auto; flex-shrink: 0; }
   .iclogolarge { height: 48px; }
   
   /* ---------------- theme toggle ---------------- */
   .icthemetoggle .bi { font-size: 1.1rem; line-height: 1; }
   [data-theme="dark"] .ic-theme-icon-light { display: none; }
   [data-theme="light"] .ic-theme-icon-dark { display: none; }
   
   /* ---------------- top bar ---------------- */
   #ictopbar {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 10px 22px;
       background: var(--ic-topbar-bg);
       border-bottom: 1px solid var(--ic-panel-line);
       position: sticky;
       top: 0;
       z-index: 600;
   }
   
   .ictopright {
       display: flex;
       align-items: center;
       gap: 10px;
       flex-shrink: 0;
   }
   
   /* Shared chrome for all top-right controls */
   .ictopright .icthemetoggle,
   .ictopright .icuserchip,
   .ictopright .iclangsel,
   .ictopright .btnlogout {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       height: 36px;
       min-height: 36px;
       box-sizing: border-box;
       margin: 0;
       background-color: var(--ic-panel);
       border: 1px solid var(--ic-panel-line);
       border-radius: 8px;
       color: var(--ic-text-muted);
       font-family: var(--ic-font);
       font-size: 13px;
       font-weight: 500;
       line-height: 1;
       cursor: pointer;
       text-decoration: none;
       white-space: nowrap;
       transition: border-color .15s, color .15s, background .15s;
   }
   
   .ictopright .icthemetoggle {
       width: 36px;
       min-width: 36px;
       padding: 0;
   }
   
   .ictopright .icuserchip {
       max-width: 240px;
       padding: 0 14px;
       color: var(--ic-text);
       overflow: hidden;
       text-overflow: ellipsis;
   }
   .ictopright .icuserchip .bi {
       flex-shrink: 0;
       color: var(--ic-accent);
       font-size: 1rem;
   }
   
   .ictopright .iclangsel {
       min-width: 56px;
       padding: 0 28px 0 12px;
       color: var(--ic-text);
       appearance: none;
       -webkit-appearance: none;
       background-color: var(--ic-panel);
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%239aa4b2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 10px center;
       background-size: 12px;
   }
   
   .ictopright .btnlogout {
       padding: 0 14px;
   }
   
   .ictopright .icthemetoggle:hover,
   .ictopright .icuserchip:hover,
   .ictopright .iclangsel:hover,
   .ictopright .btnlogout:hover {
       border-color: var(--ic-accent);
       color: var(--ic-accent);
       background-color: var(--ic-bg-alt);
   }
   
   .ictopright .iclangsel:focus {
       outline: none;
       border-color: var(--ic-accent);
   }
   
   .icauthlinks { margin-top: 16px; font-size: 13px; text-align: center; color: var(--ic-text-muted); }
   .icprofilebanner { margin: 12px 16px 0; }
   #icPortalBanners { padding: 0 16px; }
   #icPortalBanners .csrftoken,
   #icPortalBanners input[name="csrftoken"] { display: none; }
   .icportalbanner {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       flex-wrap: wrap;
       margin: 12px 0 0;
   }
   .icportalbannertext { flex: 1 1 240px; font-size: 14px; line-height: 1.5; }
   .icportalbanneractions {
       display: flex;
       align-items: center;
       gap: 8px;
       flex-shrink: 0;
   }
   .icportalbannerdismiss {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 32px;
       height: 32px;
       color: var(--ic-text-muted);
       text-decoration: none;
       border-radius: 6px;
   }
   .icportalbannerdismiss:hover { color: var(--ic-text); background: rgba(0, 0, 0, 0.06); }
   [data-theme="dark"] .icportalbannerdismiss:hover { background: rgba(255, 255, 255, 0.08); }
   
   /* ---------------- menu tiles ---------------- */
   .icmenu { padding: 12px 18px 0 18px; }
   .icmenu ul {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       list-style: none;
       margin: 0;
       padding: 0;
   }
   .menutile {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 5px;
       min-width: 118px;
       padding: 10px 14px;
       background: var(--ic-panel);
       border: 1px solid var(--ic-panel-line);
       border-radius: var(--ic-radius);
       cursor: pointer;
       transition: border-color .15s;
       user-select: none;
   }
   .menutile:hover {
       border-color: var(--ic-accent);
   }
   .menutile.menuactive { border-color: var(--ic-accent); }
   .menustaff { border-style: dashed; }
   .menuicon { font-size: 20px; line-height: 1; }
   .menuicon .bi { font-size: 1.35rem; color: var(--ic-accent); }
   .menulabel { font-size: 12px; text-align: center; color: var(--ic-text); }
   
   /* ---------------- main area + tabs ---------------- */
   .icmaing {
       display: block;
       margin: 16px 18px;
       min-height: 420px;
   }
   
   .icwelcome { text-align: center; padding: 70px 20px; color: var(--ic-text-muted); }
   .icwelcome h1 { color: var(--ic-text); font-weight: 600; }
   
   ul.tabs {
       list-style: none;
       margin: 0;
       padding: 0;
       position: relative;
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;
   }
   /* Direct tab shells only — nested lists (e.g. combobox) must keep normal li boxes */
   ul.tabs > li { display: contents; }
   ul.tabs input[type="radio"] { display: none; }
   /* Only the tab header label — not nested form/checkbox labels in .tab-content */
   ul.tabs > li > label {
       display: inline-block;
       order: 1;
       flex: 0 0 auto;
       padding: 9px 22px;
       margin-right: 6px;
       background: var(--ic-bg-alt);
       color: var(--ic-text-muted);
       border: 1px solid var(--ic-panel-line);
       border-bottom: none;
       border-radius: var(--ic-radius) var(--ic-radius) 0 0;
       cursor: pointer;
       font-size: 14px;
   }
   ul.tabs > li > input[type="radio"]:checked + label {
       background: var(--ic-bg-alt);
       color: var(--ic-accent);
       border-color: var(--ic-accent);
   }
   .tab-content {
       display: none;
       order: 2;
       flex: 1 1 100%;
       width: 100%;
       position: relative;
       background: var(--ic-bg-alt);
       border: 1px solid var(--ic-panel-line);
       border-radius: 0 var(--ic-radius) var(--ic-radius) var(--ic-radius);
       padding: 22px;
       min-height: 380px;
   }
   ul.tabs input[type="radio"]:checked ~ .tab-content { display: block; }
   ul.tabs input[type="radio"]:checked ~ .tab-content:has(.icsearchwrap) {
       display: flex;
       flex-direction: column;
   }
   ul.tabs.tabsorange > li > input[type="radio"]:checked + label { border-color: var(--ic-accent); }
   
   /* ---------------- panels & forms ---------------- */
   .icpanel {
       background: var(--ic-panel);
       border: 1px solid var(--ic-panel-line);
       border-radius: var(--ic-radius);
       padding: 22px;
   }
   .icpanel h2 { margin-top: 0; font-weight: 600; color: var(--ic-text); }
   .icmuted { color: var(--ic-text-muted); }
   
   .fldwrap { margin-bottom: 14px; }
   .icafmlookupinner {
       display: flex;
       gap: 8px;
       align-items: stretch;
   }
   .icafmlookupinner .fldinput {
       flex: 1;
       min-width: 0;
   }
   .icafmlookupbtn {
       flex-shrink: 0;
       align-self: stretch;
       white-space: nowrap;
   }
   .icafmlookupbtn.icloading { opacity: 0.65; cursor: wait; }
   .fldlabel {
       display: block;
       font-size: 12px;
       letter-spacing: .5px;
       color: var(--ic-text-muted);
       margin-bottom: 5px;
       text-transform: uppercase;
   }
   .fldinput, .fldselect {
       width: 100%;
       padding: 11px 13px;
       background: var(--ic-bg);
       color: var(--ic-text);
       border: 1px solid var(--ic-panel-line);
       border-radius: 8px;
       font-size: 15px;
       outline: none;
   }
   .fldinput:focus, .fldselect:focus {
       border-color: var(--ic-accent);
   }

   /* ---------------- searchable select (combobox) ---------------- */
   .iccombo {
       position: relative;
       width: 100%;
       max-width: 480px;
   }
   .iccomboinner {
       position: relative;
       display: flex;
       align-items: stretch;
   }
   .iccomboinner .iccomboinput {
       width: 100%;
       padding-right: 40px;
   }
   .iccombotoggle {
       position: absolute;
       right: 0;
       top: 0;
       bottom: 0;
       width: 40px;
       border: 0;
       background: transparent;
       cursor: pointer;
       padding: 0;
   }
   .iccombotoggle::after {
       content: "";
       display: block;
       width: 0;
       height: 0;
       margin: 0 auto;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
       border-top: 6px solid var(--ic-text-muted);
       transition: transform .15s ease;
   }
   .iccombo-open .iccombotoggle::after {
       transform: rotate(180deg);
   }
   ul.iccombolist,
   .iccombolist {
       position: absolute;
       left: 0;
       right: 0;
       top: calc(100% + 4px);
       z-index: 40;
       display: block;
       margin: 0;
       padding: 6px 0;
       list-style: none;
       max-height: 260px;
       overflow-x: hidden;
       overflow-y: auto;
       background: var(--ic-bg-alt);
       border: 1px solid var(--ic-panel-line);
       border-radius: 8px;
       box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
   }
   ul.iccombolist[hidden],
   .iccombolist[hidden] {
       display: none !important;
   }
   ul.iccombolist > li.iccomboopt,
   .iccomboopt {
       display: block !important;
       width: 100%;
       box-sizing: border-box;
       padding: 10px 13px;
       margin: 0;
       cursor: pointer;
       color: var(--ic-text);
       font-size: 15px;
       line-height: 1.35;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   ul.iccombolist > li.iccomboopt.iccombo-hide,
   .iccomboopt.iccombo-hide,
   ul.iccombolist > li.iccomboopt[hidden],
   .iccomboopt[hidden] {
       display: none !important;
   }
   .iccomboopt:hover,
   .iccomboopt.iccomboactive {
       background: var(--ic-row-hover);
       color: var(--ic-accent);
   }
   .iccombolist .iccomboempty {
       display: block;
       padding: 10px 13px;
       color: var(--ic-text-muted);
       font-size: 14px;
   }
   
   /* ---------------- custom checkbox ---------------- */
   .iccheckbox {
       margin: 10px 0 14px;
   }
   .iccheckbox-label {
       position: relative;
       display: inline-flex;
       align-items: center;
       gap: 10px;
       cursor: pointer;
       color: var(--ic-text);
       line-height: 1.4;
       font-size: 15px;
       max-width: 100%;
       /* Reset any inherited tab/button label chrome */
       padding: 0;
       margin: 0;
       background: transparent;
       border: none;
       border-radius: 0;
       order: unset;
       flex: 0 1 auto;
   }
   .iccheckbox-input {
       position: absolute;
       opacity: 0;
       width: 1px;
       height: 1px;
       margin: -1px;
       padding: 0;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border: 0;
       appearance: none;
       -webkit-appearance: none;
   }
   .iccheckbox-box {
       position: relative;
       display: block;
       box-sizing: border-box;
       flex-shrink: 0;
       width: 18px;
       height: 18px;
       background: var(--ic-bg-alt);
       border: 1.5px solid var(--ic-panel-line);
       border-radius: 4px;
       transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
   }
   .iccheckbox-box::after {
       content: "";
       position: absolute;
       left: 5px;
       top: 1px;
       width: 5px;
       height: 10px;
       border: solid #fff;
       border-width: 0 2px 2px 0;
       transform: rotate(45deg) scale(0);
       opacity: 0;
       transition: transform .12s ease, opacity .12s ease;
   }
   .iccheckbox-label:hover .iccheckbox-box {
       border-color: var(--ic-accent-light);
   }
   .iccheckbox-input:focus-visible + .iccheckbox-box {
       box-shadow: 0 0 0 3px var(--ic-accent-glow);
       border-color: var(--ic-accent);
   }
   .iccheckbox-input:checked + .iccheckbox-box {
       background: var(--ic-accent);
       border-color: var(--ic-accent);
   }
   .iccheckbox-input:checked + .iccheckbox-box::after {
       opacity: 1;
       transform: rotate(45deg) scale(1);
   }
   .iccheckbox-input:disabled + .iccheckbox-box {
       opacity: 0.55;
       cursor: not-allowed;
   }
   .iccheckbox-text {
       min-width: 0;
       flex: 1 1 auto;
   }
   .icactions.iccheckbox {
       align-items: center;
       gap: 16px;
   }
   .icactions .iccheckbox-label { margin-right: 0; }

   /* ---------------- custom toggle switch ---------------- */
   .ictogglerow {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 16px;
       padding: 14px 16px;
       margin: 12px 0 16px;
       background: var(--ic-bg-alt);
       border: 1px solid var(--ic-panel-line);
       border-radius: 8px;
   }
   .ictogglerow .ictoggle-label {
       font-size: 15px;
       font-weight: 500;
       color: var(--ic-text);
       line-height: 1.35;
   }
   .ictoggle {
       position: relative;
       display: inline-flex;
       align-items: center;
       flex-shrink: 0;
       cursor: pointer;
   }
   .ictoggle-input {
       position: absolute;
       opacity: 0;
       width: 1px;
       height: 1px;
       margin: -1px;
       padding: 0;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border: 0;
   }
   .ictoggle-track {
       position: relative;
       display: block;
       width: 48px;
       height: 26px;
       background: var(--ic-panel);
       border: 1px solid var(--ic-panel-line);
       border-radius: 999px;
       transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
   }
   .ictoggle-thumb {
       position: absolute;
       top: 3px;
       left: 3px;
       width: 20px;
       height: 20px;
       background: var(--ic-text-muted);
       border-radius: 50%;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
       transition: transform .2s ease, background-color .2s ease;
   }
   .ictoggle:hover .ictoggle-track { border-color: var(--ic-accent-light); }
   .ictoggle-input:focus-visible + .ictoggle-track {
       box-shadow: 0 0 0 3px var(--ic-accent-glow);
       border-color: var(--ic-accent);
   }
   .ictoggle-input:checked + .ictoggle-track {
       background: var(--ic-accent);
       border-color: var(--ic-accent);
   }
   .ictoggle-input:checked + .ictoggle-track .ictoggle-thumb {
       transform: translateX(22px);
       background: #fff;
   }
   .ictoggle-input:disabled + .ictoggle-track {
       opacity: 0.55;
       cursor: not-allowed;
   }
   .ictoggle-disabled { cursor: not-allowed; }
   .icissueinvoice-locked .ictoggle-label { color: var(--ic-text-muted); }
   
   .btnprimary {
       display: inline-block;
       background: var(--ic-accent);
       color: #fff;
       border: none;
       border-radius: 8px;
       padding: 11px 26px;
       font-size: 15px;
       font-weight: 600;
       cursor: pointer;
       transition: background-color .15s;
   }
   .btnprimary:hover { background: var(--ic-accent-dark); }
   a.btnprimary, a.btnprimary:hover, a.btnprimary:focus { color: #fff; }
   .btnwide { width: 100%; }
   .btnsecondary {
       display: inline-block;
       background: transparent;
       color: var(--ic-accent-dark);
       border: 1px solid var(--ic-accent);
       border-radius: 8px;
       padding: 9px 20px;
       font-size: 14px;
       cursor: pointer;
   }
   .btnsecondary:hover { background: var(--ic-accent-glow); color: var(--ic-accent-dark); }
   a.btnsecondary:hover, a.btnsecondary:focus { color: var(--ic-accent-dark); }
   
   /* ---------------- alerts ---------------- */
   .alertbox {
       border-radius: 8px;
       border: 1px solid var(--ic-panel-line);
       background: var(--ic-panel);
       padding: 12px 16px;
       margin: 10px 0;
       font-size: 14px;
       color: var(--ic-text);
   }
   .alertbox strong { font-weight: 700; }
   .alerterror   { border-color: var(--ic-danger); }
   .alerterror strong { color: var(--ic-danger); }
   .alertsuccess { border-color: var(--ic-success); }
   .alertsuccess strong { color: var(--ic-success); }
   .alertwarning,
   .alertwarn    { border-color: var(--ic-gold); }
   .alertwarning strong,
   .alertwarn strong { color: var(--ic-gold); }
   
   /* ---------------- domain search ---------------- */
   .icsearchwrap {
       display: flex;
       flex-direction: column;
       flex: 1;
       width: 100%;
       max-width: 760px;
       margin: 0 auto;
       text-align: center;
       justify-content: center;
   }
   .icsearchwrap:has(#icsearchresults:not(:empty)),
   .icsearchwrap:has(#icwhoisresult:not(:empty)) {
       justify-content: flex-start;
   }
   .icsearchtitle {
       margin: 0 0 6px;
       font-size: 1.4rem;
       font-weight: 600;
       letter-spacing: -0.02em;
       color: var(--ic-text);
   }
   .icsearchsub {
       margin: 0 0 18px;
       font-size: 13px;
       line-height: 1.45;
       color: var(--ic-text-muted);
   }
   .icdomainbar {
       display: flex;
       align-items: center;
       gap: 12px;
       width: 100%;
       margin: 0 0 12px;
       padding: 8px 10px 8px 16px;
       text-align: left;
       background: var(--ic-bg);
       border: 1px solid var(--ic-panel-line);
       border-radius: 28px;
       box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
       transition: border-color 0.2s ease, box-shadow 0.2s ease;
   }
   .icdomainbar:focus-within {
       border-color: var(--ic-accent);
       box-shadow: 0 0 0 3px var(--ic-accent-glow);
   }
   .icdomainbar-icon {
       flex-shrink: 0;
       font-size: 18px;
       color: var(--ic-text-muted);
       line-height: 1;
   }
   .icdomainbar-input {
       flex: 1;
       min-width: 0;
       margin: 0;
       padding: 8px 0;
       width: auto;
       font-family: inherit;
       font-size: 16px;
       color: var(--ic-text);
       background: transparent;
       border: none;
       border-radius: 0;
       outline: none;
       box-shadow: none;
   }
   .icdomainbar-input:focus {
       border: none;
       outline: none;
       box-shadow: none;
   }
   .icdomainbar-input::placeholder { color: var(--ic-text-muted); }
   .icdomainbar-btn,
   .icsearchbtn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       flex-shrink: 0;
       text-align: center;
       white-space: nowrap;
       min-width: 110px;
       border-radius: 22px;
       padding: 10px 18px;
   }
   .icsearchbtnspinner {
       display: none;
       width: 14px;
       height: 14px;
       border: 2px solid rgba(255, 255, 255, 0.35);
       border-top-color: #fff;
       border-radius: 50%;
       animation: icspin 0.7s linear infinite;
       flex-shrink: 0;
   }
   .icsearchbtn-loading {
       pointer-events: none;
       opacity: 0.8;
   }
   .icsearchbtn-loading .icsearchbtntext { opacity: 0.65; }
   .icsearchbtn-loading .icsearchbtnspinner { display: inline-block; }
   .icsearchchips {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 6px;
       margin: 0 0 10px;
   }
   #icsearchresults,
   #icwhoisresult {
       text-align: left;
   }
   #icwhoisresult:empty {
       display: none;
   }
   .icsearchchip {
       appearance: none;
       border: 1px solid var(--ic-panel-line);
       background: transparent;
       color: var(--ic-text-muted);
       font: inherit;
       font-size: 12px;
       font-weight: 500;
       font-variant-numeric: tabular-nums;
       padding: 4px 10px;
       border-radius: 4px;
       cursor: pointer;
       transition: border-color 0.12s ease, color 0.12s ease;
   }
   .icsearchchip:hover {
       border-color: var(--ic-text-muted);
       color: var(--ic-text);
   }
   .icsearchchip-active {
       border-color: var(--ic-accent);
       color: var(--ic-accent);
       background: transparent;
   }
   .icsearchhint {
       font-size: 12px;
       color: var(--ic-text-muted);
       line-height: 1.4;
   }
   .icsearchresults-head {
       margin: 28px 0 0;
       padding-bottom: 8px;
       border-bottom: 1px solid var(--ic-panel-line);
       font-size: 12px;
       font-weight: 600;
       color: var(--ic-text-muted);
   }
   .icsearchlane-head {
       margin: 18px 0 0;
       font-size: 13px;
       font-weight: 600;
       color: var(--ic-text);
   }
   .icsearchsuggest-head { margin-top: 32px; }
   .icsearchresultsblock,
   .icsearchsuggestblock,
   .icsuggestlist { text-align: left; }

   .icsearchloading {
       display: flex;
       flex-direction: column;
       gap: 10px;
       padding: 20px 0 8px;
       color: var(--ic-text-muted);
       font-size: 13px;
   }
   .icsearchloadingbar {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       gap: 10px;
   }
   .icsearchloading .icsearchbtnspinner {
       display: inline-block;
       border-color: var(--ic-panel-line);
       border-top-color: var(--ic-accent);
   }
   .icsearchskeleton { display: flex; flex-direction: column; gap: 0; }
   .icsearchskeletonrow {
       height: 44px;
       border-radius: 0;
       border: none;
       border-bottom: 1px solid var(--ic-panel-line);
       background: var(--ic-panel);
       animation: icsearchpulse 1.1s ease-in-out infinite;
   }

   .icresult {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 16px;
       padding: 12px 0;
       margin: 0;
       background: transparent;
       border: none;
       border-bottom: 1px solid var(--ic-panel-line);
       border-radius: 0;
       text-align: left;
   }
   .icresult.icresult-enter {
       animation: icsearchfadein 0.18s ease both;
       animation-delay: calc(var(--i, 0) * 35ms);
   }
   .icsuggestlist .icresult:hover {
       background: var(--ic-bg-alt);
   }
   .icsearchsuggestpending {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-top: 16px;
       padding: 8px 0;
       font-size: 12px;
       color: var(--ic-text-muted);
   }
   .icsearchsuggestpending .icsearchbtnspinner {
       display: inline-block;
       border-color: var(--ic-panel-line);
       border-top-color: var(--ic-accent);
   }
   .icresult-taken,
   .icresult-invalid { opacity: 0.72; }
   .icresultmain { min-width: 0; flex: 1; }
   .icresultname {
       font-size: 15px;
       font-weight: 600;
       letter-spacing: -0.01em;
       word-break: break-all;
   }
   .icresultace { font-size: 12px; color: var(--ic-text-muted); margin-top: 2px; }
   .icsuggesttld {
       display: block;
       font-size: 11px;
       font-weight: 500;
       color: var(--ic-text-muted);
       margin-bottom: 2px;
   }
   .icstatus {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       font-size: 12px;
       font-weight: 500;
       padding: 0;
       border: none;
       border-radius: 0;
       background: transparent;
       white-space: nowrap;
   }
   .icstatusdot {
       display: inline-block;
       width: 6px;
       height: 6px;
       border-radius: 50%;
       flex-shrink: 0;
       background: currentColor;
   }
   .icstatusfree { color: var(--ic-success); }
   .icstatustaken { color: var(--ic-danger); }

   .icresultactions {
       display: flex;
       align-items: center;
       justify-content: flex-end;
       flex-wrap: wrap;
       gap: 12px;
       flex-shrink: 0;
   }
   .icresultprice {
       font-size: 13px;
       font-weight: 500;
       font-variant-numeric: tabular-nums;
       color: var(--ic-text);
       white-space: nowrap;
   }
   .icresult-taken .icresultprice,
   .icresult-invalid .icresultprice {
       color: var(--ic-text-muted);
   }
   .icresultrestricted {
       font-size: 11px;
       font-weight: 500;
       color: var(--ic-gold);
       white-space: nowrap;
   }

   @keyframes icsearchfadein {
       from { opacity: 0; }
       to   { opacity: 1; }
   }
   @keyframes icsearchpulse {
       0%, 100% { opacity: 0.4; }
       50%      { opacity: 0.75; }
   }

   @media (prefers-reduced-motion: reduce) {
       .icdomainbar,
       .icdomainbar-input,
       .icsearchchip,
       .icresult.icresult-enter,
       .icsearchbtnspinner,
       .icsearchskeletonrow {
           animation: none !important;
           transition: none !important;
       }
   }

   @media (max-width: 760px) {
       .icresult {
           flex-direction: column;
           align-items: stretch;
           gap: 8px;
           padding: 12px 0;
       }
       .icresultactions { justify-content: flex-start; }
   }
   
   /* ---------------- badges & tables ---------------- */
   .icbadge {
       display: inline-block;
       font-size: 12px;
       font-weight: 700;
       padding: 3px 12px;
       border-radius: 14px;
       border: 1px solid var(--ic-panel-line);
       white-space: nowrap;
   }
   .icbadge.alertsuccess { color: var(--ic-success); border-color: var(--ic-success); background: transparent; }
   .icbadge.alertwarning { color: var(--ic-gold);    border-color: var(--ic-gold);    background: transparent; }
   .icbadge.alerterror   { color: var(--ic-danger);  border-color: var(--ic-danger);  background: transparent; }
   .icbadgesmall {
       display: inline-block;
       font-size: 11px;
       font-weight: 600;
       padding: 2px 8px;
       border-radius: 999px;
       border: 1px solid var(--ic-panel-line);
       color: var(--ic-text-muted);
       white-space: nowrap;
       line-height: 1.3;
   }
   .icbadgesmall.icbadgeok {
       color: var(--ic-success);
       border-color: var(--ic-success);
       background: transparent;
   }
   
   .icdangerzone { margin-top: 8px; }
   .icbtndanger {
       border-color: var(--ic-danger) !important;
       color: var(--ic-danger) !important;
   }
   .icbtndanger:hover {
       background: rgba(248, 113, 113, 0.12) !important;
   }
   
   .ictable {
       width: 100%;
       border-collapse: collapse;
       font-size: 14px;
   }
   .ictable th {
       text-align: left;
       font-size: 12px;
       text-transform: uppercase;
       letter-spacing: .5px;
       color: var(--ic-text-muted);
       padding: 9px 12px;
       border-bottom: 1px solid var(--ic-panel-line);
   }
   .ictable td {
       padding: 10px 12px;
       border-bottom: 1px solid var(--ic-panel-line);
       vertical-align: middle;
   }
   .ictable tr:hover td { background: var(--ic-row-hover); }

   .ic-rowclick {
       cursor: pointer;
   }
   tr.ic-rowclick:focus,
   tr.ic-rowclick:focus-visible,
   .icbillprofilecard.ic-rowclick:focus,
   .icbillprofilecard.ic-rowclick:focus-visible {
       outline: 2px solid var(--ic-accent, #2563eb);
       outline-offset: 2px;
   }
   .icbillprofilecard.ic-rowclick {
       cursor: pointer;
   }

   /* DNS zone records (Cloudflare-style list) */
   .icdnsheader {
       margin: 12px 0 8px;
   }
   .icdnsheadermain {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 10px 14px;
   }
   .icdnsheadermain h3 {
       margin: 0;
       font-size: 1.25rem;
       font-weight: 600;
       color: var(--ic-text);
   }
   .icdnsbadge {
       display: inline-block;
       font-size: 12px;
       font-weight: 600;
       letter-spacing: .02em;
       padding: 3px 10px;
       border-radius: 4px;
       border: 1px solid var(--ic-panel-line);
       color: var(--ic-text-muted);
       background: transparent;
   }
   .icdnsbadgeok {
       color: #15803d;
       border-color: rgba(21, 128, 61, 0.35);
       background: rgba(21, 128, 61, 0.08);
   }
   .icdnsbadgepend {
       color: #a16207;
       border-color: rgba(161, 98, 7, 0.35);
       background: rgba(161, 98, 7, 0.08);
   }
   .icdnsbadgeerr {
       color: #b91c1c;
       border-color: rgba(185, 28, 28, 0.35);
       background: rgba(185, 28, 28, 0.08);
   }
   [data-theme="dark"] .icdnsbadgeok {
       color: #86efac;
       border-color: rgba(134, 239, 172, 0.35);
       background: rgba(134, 239, 172, 0.1);
   }
   [data-theme="dark"] .icdnsbadgepend {
       color: #fde68a;
       border-color: rgba(253, 230, 138, 0.35);
       background: rgba(253, 230, 138, 0.1);
   }
   [data-theme="dark"] .icdnsbadgeerr {
       color: #fca5a5;
       border-color: rgba(252, 165, 165, 0.35);
       background: rgba(252, 165, 165, 0.1);
   }
   .icdnstoolbar {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 10px;
       margin: 14px 0 12px;
   }
   .icdnstoolbar .fldinput {
       flex: 1 1 220px;
       min-width: 160px;
       max-width: 420px;
   }
   .icdnsform {
       margin: 0 0 16px;
       padding: 14px 16px;
       border: 1px solid var(--ic-panel-line);
       border-radius: 6px;
       background: var(--ic-panel-bg, transparent);
   }
   .icdnsform h4 {
       margin: 0 0 12px;
       font-size: 1rem;
       font-weight: 600;
       color: var(--ic-text);
   }
   .icdnsform .fldwrap {
       max-width: 520px;
   }
   .icdnsempty {
       margin: 18px 0;
       padding: 22px 16px;
       text-align: center;
       border: 1px dashed var(--ic-panel-line);
       border-radius: 6px;
   }
   .icdnstypepill {
       display: inline-block;
       min-width: 3.2em;
       text-align: center;
       font-size: 12px;
       font-weight: 700;
       letter-spacing: .04em;
       padding: 2px 8px;
       border-radius: 4px;
       border: 1px solid var(--ic-panel-line);
       color: var(--ic-text);
   }
   .icdnscontentcell {
       max-width: 28rem;
       word-break: break-word;
       font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
       font-size: 13px;
   }
   .icdnsactions {
       white-space: nowrap;
   }
   .icdnsactions .btnsecondary {
       margin: 2px 4px 2px 0;
   }
   @media (max-width: 720px) {
       .icdnstoolbar { flex-direction: column; align-items: stretch; }
       .icdnstoolbar .fldinput { max-width: none; }
       .icdnsactions { white-space: normal; }
       .icdnsform .fldwrap { max-width: none; }
   }

   .icformgrid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 0 22px;
   }
   .icformgrid .fldfull { grid-column: 1 / -1; }
   .icprofcotype { display: none; }
   .icprofcotype.icprofcotype-on { display: contents; }
   .icbillingeditgrid { align-items: start; }
   .icbillprofilelist {
       display: flex;
       flex-direction: column;
       gap: 8px;
       max-width: 42rem;
       margin: 4px 0 0;
       width: 100%;
   }
   .icbillprofilecard {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 6px;
       text-align: left;
   }
   .icbillprofilerow,
   .icbillprofilepickcard.icbillprofilerow {
       display: flex;
       flex-direction: row;
       align-items: flex-start;
       gap: 12px;
       width: 100%;
       margin: 0;
       padding: 12px 14px;
       text-align: left;
       cursor: pointer;
       position: relative;
       background: var(--ic-bg-alt);
       border: 1px solid var(--ic-panel-line);
       border-radius: 8px;
       border-left: 3px solid transparent;
       transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
   }
   .icbillprofilerow:hover {
       border-color: var(--ic-accent-light);
       border-left-color: var(--ic-accent-light);
   }
   .icbillprofilerow.icbillprofilerowselected {
       border-color: var(--ic-accent);
       border-left-color: var(--ic-accent);
       background: var(--ic-panel);
       box-shadow: 0 0 0 1px var(--ic-accent-glow);
   }
   .icbillprofilerow-pip {
       flex-shrink: 0;
       width: 18px;
       height: 18px;
       margin-top: 2px;
       border-radius: 50%;
       border: 1.5px solid var(--ic-panel-line);
       background: var(--ic-bg);
       position: relative;
       transition: border-color .15s ease, background-color .15s ease;
   }
   .icbillprofilerow-pip::after {
       content: "";
       position: absolute;
       inset: 4px;
       border-radius: 50%;
       background: var(--ic-accent);
       transform: scale(0);
       transition: transform .12s ease;
   }
   .icbillprofilerowselected .icbillprofilerow-pip {
       border-color: var(--ic-accent);
   }
   .icbillprofilerowselected .icbillprofilerow-pip::after {
       transform: scale(1);
   }
   .icbillprofilerow-body {
       flex: 1;
       min-width: 0;
       display: flex;
       flex-direction: column;
       gap: 4px;
   }
   .icbillprofileradio {
       position: absolute;
       opacity: 0;
       width: 1px;
       height: 1px;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       pointer-events: none;
   }
   .icbillprofilecard-head {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 8px;
       width: 100%;
   }
   .icbillprofilecard-title { font-size: 0.95rem; line-height: 1.3; color: var(--ic-text); }
   .icbillprofilecard-sub {
       display: block;
       width: 100%;
       margin-top: 0;
       line-height: 1.45;
       font-size: 12px;
       color: var(--ic-text-muted);
   }
   .icbillprofilecard-tag {
       display: inline-block;
       font-size: 0.78rem;
       color: var(--ic-text-muted);
   }
   .icbillprofileincomplete { border-color: var(--ic-warning, #d97706); }
   .icbillprofileaddrow {
       margin: 6px 0 0;
   }
   .ictextaction {
       font-size: 13px;
       font-weight: 500;
       color: var(--ic-accent-dark);
   }
   .ictextaction:hover { color: var(--ic-accent); }
   #icbillprofilegrid { align-items: stretch; max-width: none; }
   @media (max-width: 760px) { .icformgrid { grid-template-columns: 1fr; } }
   
   .icactions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
   .icbtnrow {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       align-items: center;
   }
   .icsslmodalfooter.icbtnrow {
       justify-content: flex-end;
       align-items: center;
   }
   .icsslmodalfooter.icbtnrow .btnprimary,
   .icsslmodalfooter.icbtnrow .btnsecondary {
       box-sizing: border-box;
       min-height: 42px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       margin: 0;
   }
   .icpaymentpayfooter {
       flex-direction: column;
       align-items: stretch;
   }
   .icpaymentpayfooter .btnprimary,
   .icpaymentpayfooter .btnsecondary {
       width: 100%;
   }
   .btnsmall { padding: 5px 12px; font-size: 12px; }
   
   .icthread { margin: 10px 0; }
   .icmsg {
       background: var(--ic-panel);
       border: 1px solid var(--ic-panel-line);
       border-radius: var(--ic-radius);
       padding: 12px 16px;
       margin: 8px 0;
   }
   .icmsgstaff { border-color: var(--ic-accent); }
   .icmsghead { font-size: 12px; color: var(--ic-text-muted); margin-bottom: 6px; }
   
   .icpricebox {
       background: var(--ic-bg-alt);
       border: 1px solid var(--ic-panel-line);
       border-radius: var(--ic-radius);
       padding: 14px 18px;
       margin: 14px 0;
   }
   
   .icregsection {
       border: 1px solid var(--ic-panel-line);
       border-radius: var(--ic-radius);
       margin: 12px 0;
       padding: 0 16px 14px;
       background: var(--ic-bg-alt);
   }
   .icregsection > summary {
       list-style: none;
       cursor: pointer;
       padding: 12px 0;
       margin: 0 -16px 10px;
       padding-left: 16px;
       padding-right: 16px;
       border-bottom: 1px solid var(--ic-panel-line);
   }
   .icregsection > summary::-webkit-details-marker { display: none; }
   .icregsection[open] > summary { margin-bottom: 14px; }
   .icsectiontitle {
       font-size: 15px;
       font-weight: 600;
       color: var(--ic-text-muted);
       margin: 0;
   }
   .icregprice {
       background: var(--ic-panel);
       border: 1px solid var(--ic-panel-line);
       border-radius: 8px;
       padding: 10px 14px;
       margin: 10px 0 4px;
       font-size: 14px;
   }
   .icnsmore { margin: 6px 0 10px; font-size: 13px; }
   
   .icimpersonate {
       background: var(--ic-gold);
       color: #111;
       text-align: center;
       padding: 8px 16px;
       font-size: 13px;
       font-weight: 600;
   }
   .icimpersonate a { color: #111; text-decoration: underline; }
   
   /* ---------------- MFA enrollment ---------------- */
   .icmfasteps { margin: 16px 0; }
   .icmfasteps p { margin: 10px 0; }
   .icmfaqr {
       display: inline-block;
       padding: 12px;
       margin: 12px 0;
       background: #fff;
       border-radius: 8px;
       border: 1px solid var(--ic-panel-line);
   }
   .icmfacode {
       display: block;
       word-break: break-all;
       letter-spacing: 1px;
       font-family: "Consolas", "Monaco", "Courier New", monospace;
       font-size: 14px;
       padding: 10px 14px;
       background: var(--ic-bg-alt);
       border: 1px solid var(--ic-panel-line);
       border-radius: 8px;
       color: var(--ic-text);
   }
   .icmfastatus { margin: 12px 0; }
   .icmfaaccount {
       margin-top: 28px;
       padding-top: 24px;
       border-top: 1px solid var(--ic-panel-line);
   }
   .icmfaaccount h3 { margin: 0 0 8px; font-size: 1.05rem; }
   
   /* ---------------- login ---------------- */
   .icloginwrap {
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 26px;
       padding: 30px 16px 16px;
   }
   .icloginbox {
       width: 100%;
       max-width: 400px;
       background: var(--ic-login-bg);
       border: 1px solid var(--ic-panel-line);
       border-radius: 14px;
       padding: 34px;
       box-shadow: 0 1px 3px var(--ic-overlay);
   }
   .icloginsub {
       text-align: center;
       color: var(--ic-text-muted);
       font-size: 13px;
       font-weight: 600;
       margin: 0 0 24px 0;
   }
   .icauthgoogle { margin-bottom: 4px; }
   .btngoogle {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       width: 100%;
       padding: 11px 20px;
       background: var(--ic-bg-alt);
       color: var(--ic-text);
       border: 1px solid var(--ic-panel-line);
       border-radius: 8px;
       font-size: 15px;
       font-weight: 600;
       text-decoration: none;
       cursor: pointer;
       transition: background-color .15s, border-color .15s, box-shadow .15s;
       box-sizing: border-box;
   }
   .btngoogle:hover,
   a.btngoogle:hover,
   a.btngoogle:focus {
       background: var(--ic-row-hover);
       border-color: var(--ic-text-muted);
       color: var(--ic-text);
   }
   .btngoogle-disabled {
       opacity: 0.55;
       cursor: not-allowed;
       pointer-events: none;
   }
   .icgoogleicon { flex-shrink: 0; }
   .icauthdivider {
       display: flex;
       align-items: center;
       gap: 12px;
       margin: 18px 0;
       color: var(--ic-text-muted);
       font-size: 13px;
       text-align: center;
   }
   .icauthdivider::before,
   .icauthdivider::after {
       content: "";
       flex: 1;
       height: 1px;
       background: var(--ic-panel-line);
   }
   .icauthdivider span { flex-shrink: 0; }
   .icloginfooter {
       text-align: center;
       font-size: 13px;
       color: var(--ic-text-muted);
       margin-top: 16px;
   }
   .icloginfooter a { color: var(--ic-accent-dark); }
   
   /* ---------------- footer ---------------- */
   #icfooter {
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       z-index: 500;
       background: var(--ic-bg);
       padding: 18px 20px max(24px, env(safe-area-inset-bottom));
       border-top: 1px solid var(--ic-panel-line);
       text-align: center;
       color: var(--ic-text-muted);
       font-size: 13px;
   }
   .icfootline { margin: 3px 0; }
   .icfootsmall { font-size: 11px; }
   
   /* ---------------- loading overlay ---------------- */
   .status, .icmask {
       position: fixed;
       inset: 0;
       background: var(--ic-overlay);
       cursor: progress;
   }
   .status::after {
       content: "";
       position: absolute;
       top: 50%;
       left: 50%;
       width: 42px;
       height: 42px;
       margin: -21px 0 0 -21px;
       border: 4px solid var(--ic-panel-line);
       border-top-color: var(--ic-accent);
       border-radius: 50%;
       animation: icspin 0.8s linear infinite;
   }
   @keyframes icspin { to { transform: rotate(360deg); } }
   
   @media (max-width: 760px) {
       .menutile { min-width: 46%; }
       .icdomainbar {
           flex-wrap: wrap;
           border-radius: var(--ic-radius);
           padding: 12px 14px;
       }
       .icdomainbar-btn,
       .icsearchbtn {
           width: 100%;
           border-radius: 8px;
       }
       .icdomainbar-input { font-size: 16px; }
       #ictopbar { flex-wrap: wrap; gap: 8px; }
       .icbrandsub { font-size: 10px; }
   }
   
   /* ---------------- SSL buy wizard ---------------- */
   .icsslsteps { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
   .icsslstep { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: var(--ic-panel-bg); border: 1px solid var(--ic-panel-line); font-size: 13px; opacity: 0.55; }
   .icsslstepactive { opacity: 1; border-color: var(--ic-accent); color: var(--ic-accent); }
   .icsslstepnum { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ic-accent); color: #fff; font-size: 12px; font-weight: 700; }
   .icsslproductgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
   .icsslproductcard { display: block; padding: 16px; border: 2px solid var(--ic-panel-line); border-radius: 12px; cursor: pointer; position: relative; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
   .icsslproductcard input { position: absolute; opacity: 0; }
   .icsslproductcard:hover,
   .icsslproductcard--pro:hover,
   .icsslproductcard--featured:hover { border-color: var(--ic-accent); box-shadow: 0 0 0 1px var(--ic-accent-glow); }
   .icsslcardselected { border-color: var(--ic-accent); box-shadow: 0 0 0 2px var(--ic-accent); }
   .icsslcardprice { display: block; margin-top: 8px; font-size: 1.15em; font-weight: 600; }
   .icsslcardtype { display: block; font-size: 12px; color: var(--ic-muted); margin-top: 4px; }
   .icsslbadge { position: absolute; top: 8px; right: 8px; font-size: 10px; padding: 2px 8px; border-radius: 8px; background: var(--ic-accent); color: #fff; }
   .icssldcvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 12px 0; }
   .icssldcvgrid--modal { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
   .icssldcvgrid--split { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
   .icssldcvemailblock { margin-bottom: 4px; }
   .icssldcvemailblock.icssldcvactive { border: 2px solid var(--ic-accent); border-radius: 10px; padding: 12px 14px; background: var(--ic-panel); }
   .icsslmodalresulttop { margin-bottom: 14px; }
   .icsslmodalresulttop .alertbox { margin-bottom: 0; }
   .icsslreissuecnreadonly { opacity: 0.85; cursor: not-allowed; background: var(--ic-panel); }
   .icsslreissuesanhint, .icsslreissuehint { margin-top: 8px; font-size: 0.9em; }
   .icsslmodalstep--reissue[hidden] { display: none !important; }
   .icssldcvcard { display: block; padding: 14px; border: 2px solid var(--ic-panel-line); border-radius: 10px; cursor: pointer; text-align: center; position: relative; transition: border-color 0.15s; min-width: 0; }
   .icssldcvcard--email { text-align: left; padding: 12px 14px; }
   .icssldcvcard--email .icssldcvkind { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ic-accent); margin-bottom: 6px; }
   .icssldcvcard--email .icssldcvvalue { display: block; font-size: 0.85rem; font-weight: 600; line-height: 1.4; word-break: break-all; overflow-wrap: anywhere; hyphens: auto; }
   .icssldcvcard--email .icssldcvsubtitle { display: block; font-size: 0.75rem; color: var(--ic-muted, #6b7280); margin-top: 4px; }
   .icssldcvcard strong { word-break: break-word; overflow-wrap: anywhere; }
   .icssldcvcard input.icssldcvradio { position: absolute; opacity: 0; pointer-events: none; }
   .icssldcvemailblock { margin-top: 14px; max-width: 36rem; }
   .icssldcvemailblock.icssldcvactive .icssldcvemailsel { border-color: var(--ic-accent); box-shadow: 0 0 0 3px var(--ic-accent-glow); }
   .icssldcvemailhint { margin-top: 8px; font-size: 0.85rem; }

   /* ---------------- payment method segment + pay form ---------------- */
   .icpaymentpayform {
       display: flex;
       flex-direction: column;
       gap: 0;
   }
   .icpaymentorderhead {
       margin: 0 0 14px;
   }
   .icpaymentordermeta,
   .icpaymentordertotal {
       margin: 0 0 4px;
   }
   .icpaymentsection {
       margin: 0 0 16px;
   }
   .icpaymentpayform > .icpaymentsection:not(.icpaymentmethods):not(.icpaymentbilling) {
       margin-bottom: 0;
   }
   .icpaymentpayform > .icpaymentsection + .icpaymentmethods {
       margin-top: 0;
   }
   .icpaymentsection .icsectiontitle {
       margin: 0 0 4px;
       color: var(--ic-text);
   }
   .icsectionhint,
   .icpayseghint {
       margin: 0 0 10px;
       font-size: 13px;
       line-height: 1.4;
   }
   .icpayseghint {
       margin: 8px 0 0;
       min-height: 1.4em;
   }
   .icpaymentmethods {
       margin-bottom: 8px;
   }
   .icpaymentbilling {
       margin-top: 4px;
   }
   .icpaymentbilling .ictogglerow {
       margin-top: 10px;
       margin-bottom: 8px;
   }
   .icpaysegment {
       display: flex;
       flex-wrap: wrap;
       width: 100%;
       margin: 0;
       padding: 3px;
       gap: 3px;
       background: var(--ic-panel);
       border: 1px solid var(--ic-panel-line);
       border-radius: 10px;
   }
   .icpaysegopt {
       position: relative;
       display: flex;
       flex: 1 1 140px;
       align-items: center;
       justify-content: center;
       min-width: 0;
       margin: 0;
       padding: 10px 12px;
       cursor: pointer;
       text-align: center;
       border-radius: 8px;
       color: var(--ic-text-muted);
       transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
   }
   .icpaysegopt:hover {
       color: var(--ic-text);
       background: var(--ic-row-hover);
   }
   .icpaysegopt.icpaysegselected {
       color: #fff;
       background: var(--ic-accent);
       font-weight: 600;
       box-shadow: 0 1px 3px var(--ic-accent-glow);
   }
   .icpayseglabel {
       font-size: 13px;
       line-height: 1.25;
       word-break: break-word;
   }
   .icpaymethodradio {
       position: absolute;
       opacity: 0;
       width: 1px;
       height: 1px;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       pointer-events: none;
   }
   .icpaysegopt:focus-within {
       box-shadow: 0 0 0 3px var(--ic-accent-glow);
   }
   .icpaysegopt.icpaysegselected:focus-within {
       box-shadow: 0 0 0 3px var(--ic-accent-glow), 0 1px 3px var(--ic-accent-glow);
   }
   @media (max-width: 520px) {
       .icpaysegopt { flex: 1 1 calc(50% - 3px); padding: 9px 8px; }
       .icpayseglabel { font-size: 12px; }
   }

   .icmfamethodgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 16px; }
   .icmfamethodcard { display: block; padding: 14px; border: 2px solid var(--ic-panel-line); border-radius: 10px; cursor: pointer; text-align: left; position: relative; }
   .icmfamethodcard input.icmfamethodradio { position: absolute; opacity: 0; pointer-events: none; }
   .iccopyblock { background: #f3f4f6; padding: 10px; border-radius: 6px; font-size: 12px; overflow-x: auto; margin: 8px 0; }
   .icchecklist { margin: 8px 0 8px 18px; }
   .icssldcvoutcome { margin-bottom: 16px; }
   .icssldcvoutcome .icalert { margin-bottom: 12px; }
   .icssldcvchecklist { margin-top: 0; }
   .icsslrestarthint { margin-top: 10px; font-size: 0.85rem; max-width: 52rem; }
   .icsslnav { margin-top: 20px; gap: 10px; }
   .icapilogpre { max-height: 320px; overflow: auto; font-size: 12px; background: var(--ic-panel-bg); padding: 12px; border-radius: 8px; }
   
   /* SSL modal — pro */
   .icsslheader { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
   .icsslheader h2 { margin: 0; }
   #icsslresult { margin-bottom: 16px; }
   
   .icsslmodal { position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }
   .icsslmodalopen { opacity: 1; pointer-events: auto; }
   .icsslmodalbackdrop { position: absolute; inset: 0; background: rgba(10, 14, 22, 0.62); backdrop-filter: blur(6px); }
   .icsslmodalpanel { position: relative; width: min(760px, 100%); max-height: min(92vh, 920px); background: var(--ic-bg-alt); border: 1px solid var(--ic-panel-line); border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,0.35); display: flex; flex-direction: column; transform: scale(0.96) translateY(8px); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; }
   .icsslmodalpanel--wide { width: min(960px, 100%); max-height: min(94vh, 960px); }
   .icsslmodalopen .icsslmodalpanel { transform: scale(1) translateY(0); opacity: 1; }
   
   .icsslmodalhead { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 8px 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--ic-panel-line); background: linear-gradient(180deg, var(--ic-panel) 0%, transparent 100%); }
   .icsslmodaltitlewrap { display: flex; align-items: center; gap: 10px; grid-column: 1; }
   .icsslmodaltitleicon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ic-accent-glow); color: var(--ic-accent); font-size: 18px; }
   .icsslmodaltitle { margin: 0; font-size: 1.15rem; font-weight: 700; }
   .icsslmodalclose { grid-column: 2; grid-row: 1; border: none; background: var(--ic-panel); width: 36px; height: 36px; border-radius: 10px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ic-text-muted); align-self: start; transition: background 0.15s, color 0.15s; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
   .icsslmodalclose:hover { background: var(--ic-panel-line); color: var(--ic-text); }
   .icsslmodalsteps { grid-column: 1 / -1; min-width: 0; }
   .icsslmodalbody { padding: 16px 20px 0; overflow-y: auto; flex: 1; min-height: 0; }
   .icsslmodalfooter { position: sticky; bottom: 0; margin: 0 -20px; padding: 14px 20px 18px; background: linear-gradient(0deg, var(--ic-bg-alt) 70%, transparent); border-top: 1px solid var(--ic-panel-line); }
   
   .icsslmodalprogress { height: 4px; background: var(--ic-panel-line); border-radius: 4px; margin-bottom: 10px; overflow: hidden; }
   .icsslmodalprogressbar { height: 100%; background: linear-gradient(90deg, var(--ic-accent-dark), var(--ic-accent)); border-radius: 4px; transition: width 0.3s ease; }
   .icsslmodalstepper { display: flex; flex-wrap: wrap; gap: 8px 14px; }
   .icsslmodalsteppill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.45; transition: opacity 0.2s; }
   .icsslmodalstepactive { opacity: 1; color: var(--ic-accent); font-weight: 600; }
   .icsslmodalstepdone { opacity: 0.85; color: var(--ic-success); }
   .icsslmodalstepnum { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ic-panel-line); font-size: 11px; font-weight: 700; }
   .icsslmodalstepactive .icsslmodalstepnum { background: var(--ic-accent); color: #fff; box-shadow: 0 0 0 3px var(--ic-accent-glow); }
   .icsslmodalstepdone .icsslmodalstepnum { background: var(--ic-success); color: #fff; }
   
   .icsslmodalhero { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; margin-bottom: 16px; border-radius: 12px; background: var(--ic-panel); border: 1px solid var(--ic-panel-line); }
   .icsslmodalhero--compact { padding: 12px 14px; margin-bottom: 14px; }
   .icsslmodalhero--success { border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.08); }
   .icsslmodalheroicon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--ic-accent-glow); color: var(--ic-accent); font-size: 22px; }
   .icsslmodalhero--success .icsslmodalheroicon { background: rgba(52, 211, 153, 0.15); color: var(--ic-success); }
   .icsslmodalhero h3 { margin: 0 0 4px; font-size: 1.05rem; }
   .icssltrustrow { margin: 0; font-size: 12px; color: var(--ic-text-muted); line-height: 1.5; }
   .icsslvatnote { margin: -8px 0 12px; font-size: 13px; }
   
   .icsslproductgrid--pro { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
   .icsslproductcard--pro { padding: 18px 16px 16px; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
   .icsslproductcard--pro:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 0 0 1px var(--ic-accent-glow); border-color: var(--ic-accent); }
   .icssltypebadge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; background: var(--ic-panel-line); color: var(--ic-text-muted); margin-bottom: 6px; }
   .icsslproductname { display: block; font-size: 1.05rem; margin-bottom: 2px; }
   .icsslproductfeatures { list-style: none; margin: 10px 0; padding: 0; font-size: 12px; color: var(--ic-text-muted); }
   .icsslproductfeatures li { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
   .icsslproductfeatures .bi-check2 { color: var(--ic-success); font-size: 14px; }
   
   .icsslcheckoutgrid { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; }
   .icsslcheckoutmain { min-width: 0; }
   .icsslordersummary { position: sticky; top: 0; padding: 16px; border-radius: 12px; border: 1px solid var(--ic-panel-line); background: var(--ic-panel); }
   .icsslordersummary h4 { margin: 0 0 12px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ic-text-muted); }
   .icsslsummaryproduct { margin: 0 0 12px; }
   .icsslsummarylines { margin: 0; font-size: 13px; }
   .icsslsummarylines dt { float: left; clear: left; color: var(--ic-text-muted); margin-bottom: 6px; }
   .icsslsummarylines dd { margin: 0 0 6px; text-align: right; font-weight: 500; }
   .icsslsummarylines .icsslsummarytotal { font-size: 1.15rem; font-weight: 700; color: var(--ic-accent); padding-top: 8px; border-top: 1px dashed var(--ic-panel-line); margin-top: 4px; }
   
   .icsslformsection { padding: 14px 16px; margin-bottom: 14px; border-radius: 12px; border: 1px solid var(--ic-panel-line); background: var(--ic-panel); }
   .icsslsectiontitle { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.95rem; }
   .icsslsectiontitle .bi { color: var(--ic-accent); }
   
   .icsslsuccesscard { border-radius: 14px; border: 1px solid rgba(52, 211, 153, 0.35); background: var(--ic-bg-alt); box-shadow: 0 12px 32px rgba(0,0,0,0.12); overflow: hidden; animation: icsslmodalfadein 0.3s ease; }
   .icsslsuccesshero { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: rgba(52, 211, 153, 0.1); border-bottom: 1px solid rgba(52, 211, 153, 0.2); position: relative; }
   .icsslsuccessicon { font-size: 32px; color: var(--ic-success); line-height: 1; }
   .icsslsuccesshero h3 { margin: 0 0 4px; }
   .icsslsuccessdismiss { position: absolute; top: 12px; right: 14px; border: none; background: transparent; font-size: 24px; cursor: pointer; color: var(--ic-text-muted); line-height: 1; }
   .icsslsuccessbody { padding: 16px 20px 0; font-size: 14px; }
   .icsslsuccessbody p { margin: 0 0 8px; }
   .icsslsuccessamount { font-size: 1.2rem; color: var(--ic-accent); }
   .icsslsuccesscard .icpricebox { margin: 12px 20px; border-radius: 10px; }
   .icsslnextstep { margin: 0; padding: 14px 20px 18px; font-size: 13px; color: var(--ic-text-muted); border-top: 1px solid var(--ic-panel-line); }
   
   .icsslbtnloading { pointer-events: none; opacity: 0.85; }
   .icsslbtnloading .icsslbtntext { opacity: 0.6; }
   .icsslbtnspinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: icsslspin 0.7s linear infinite; vertical-align: middle; margin-left: 8px; }
   .icsslbtnloading .icsslbtnspinner { display: inline-block; }
   .icsslmodalloading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 20px; color: var(--ic-text-muted); }
   .icsslmodalloading .icsslbtnspinner { display: inline-block; border-color: var(--ic-panel-line); border-top-color: var(--ic-accent); }
   @keyframes icsslspin { to { transform: rotate(360deg); } }
   
   .icsslmodalsteppanel { animation: icsslmodalfadein 0.22s ease; }
   .icsslmodalstep { animation: icsslmodalfadein 0.22s ease; }
   @keyframes icsslmodalfadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
   body.icsslmodalscrolllock { overflow: hidden; }
   
   @media (max-width: 720px) {
       .icsslmodal { align-items: flex-end; padding: 0; }
       .icsslmodalpanel, .icsslmodalpanel--wide { width: 100%; max-height: 94vh; border-radius: 16px 16px 0 0; }
       .icsslcheckoutgrid { grid-template-columns: 1fr; }
       .icsslordersummary { position: static; order: -1; }
       .icsslproductgrid--pro { grid-template-columns: 1fr; }
       .icssldcvgrid--modal { grid-template-columns: 1fr; }
       .icssldcvgrid--split { grid-template-columns: 1fr; }
       .icsslmodalhead { padding: 14px 16px 10px; }
       .icsslmodalbody { padding: 12px 16px 0; }
       .icsslmodalfooter { margin: 0 -16px; padding: 12px 16px 16px; }
   }
   
   /* SSL catalog UX — featured + grouped products */
   .icsslsectionheading { margin: 20px 0 10px; font-size: 0.95rem; font-weight: 700; color: var(--ic-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
   .icsslfeaturedgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 8px; }
   .icsslfeaturedgrid--page { margin-bottom: 20px; }
   .icsslproductcard--featured {
       border-color: var(--ic-panel-line);
       background: linear-gradient(180deg, var(--ic-panel) 0%, transparent 100%);
   }
   .icsslproductcard.icsslcardselected,
   .icsslproductcard--pro.icsslcardselected,
   .icsslproductcard--featured.icsslcardselected {
       border-color: var(--ic-accent);
       box-shadow: 0 0 0 2px var(--ic-accent), 0 8px 24px var(--ic-accent-glow);
       background: linear-gradient(180deg, rgba(255, 145, 77, 0.08) 0%, transparent 100%);
   }
   .icsslbadge--featured { background: var(--ic-accent); color: #fff; }
   .icsslbadge--free { background: #1a7f4b; color: #fff; }
   .icsslproductcard--free {
       border-color: rgba(26, 127, 75, 0.45);
       background: linear-gradient(180deg, rgba(26, 127, 75, 0.08) 0%, transparent 100%);
   }
   .icsslfreenote {
       padding: 14px 16px;
       border: 1px solid rgba(26, 127, 75, 0.35);
       border-radius: 10px;
       background: rgba(26, 127, 75, 0.06);
   }
   .icsslfreenote p { margin: 0 0 8px; font-weight: 600; }
   .icsslsummaryfree { margin: 12px 0 0; font-size: 1.25rem; color: #1a7f4b; }
   .icsslcardpricing { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
   .icsslvalidityselect {
       flex: 1 1 140px;
       min-width: 120px;
       max-width: 100%;
       padding: 8px 32px 8px 10px;
       border-radius: 8px;
       border: 1px solid var(--ic-panel-line);
       background-color: var(--ic-bg-alt);
       color: var(--ic-text);
       font-size: 13px;
       line-height: 1.35;
       cursor: pointer;
       appearance: none;
       -webkit-appearance: none;
       background-image: linear-gradient(45deg, transparent 50%, var(--ic-text-muted) 50%),
                         linear-gradient(135deg, var(--ic-text-muted) 50%, transparent 50%);
       background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
       background-size: 6px 6px, 6px 6px;
       background-repeat: no-repeat;
       transition: border-color 0.15s, box-shadow 0.15s;
   }
   .icsslvalidityselect:hover { border-color: var(--ic-accent-light); }
   .icsslvalidityselect:focus {
       outline: none;
       border-color: var(--ic-accent);
       box-shadow: 0 0 0 2px var(--ic-accent-glow);
   }
   .icsslvalidityselect option {
       background-color: var(--ic-bg-alt);
       color: var(--ic-text);
   }
   .icsslfeaturedcard {
       position: relative;
       padding: 18px 16px;
       border: 2px solid var(--ic-panel-line);
       border-radius: 12px;
       background: var(--ic-panel);
       display: flex;
       flex-direction: column;
       gap: 4px;
       transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
   }
   .icsslfeaturedcard:hover { border-color: var(--ic-accent); box-shadow: 0 0 0 1px var(--ic-accent-glow); }
   .icsslcatalogtoolbar { margin: 8px 0 12px; }
   .icsslcatalogtoolbar .fldinput { width: 100%; max-width: 360px; }
   .icsslcatalogtable { font-size: 13px; }
   .icsslcatalogtable td { vertical-align: middle; }
   .icsslcatalogrow.icsslrowselected { background: var(--ic-accent-glow); outline: 2px solid var(--ic-accent); outline-offset: -2px; }
   .icsslfeaturedcard .icsslcatalogbuy { margin-top: 12px; align-self: flex-start; }
   .icsslcatalogpage .dataTables_filter { display: none; }
   @media (max-width: 900px) {
       .icsslfeaturedgrid { grid-template-columns: 1fr; }
   }
   @media (max-width: 720px) {
       .icsslmodalpanel--wide { width: min(100%, 100%); }
   }
   
   /* ---------------- HTTP error pages ---------------- */
   /* ---------------- KYC drag-and-drop upload ---------------- */
   .ickycupload { margin: 12px 0 4px; max-width: 520px; }
   .ickyczone {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 8px;
       padding: 28px 20px;
       border: 2px dashed var(--ic-panel-line);
       border-radius: 12px;
       background: var(--ic-panel);
       cursor: pointer;
       transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
       text-align: center;
       min-height: 120px;
   }
   .ickyczone:hover,
   .ickyczone:focus {
       outline: none;
       border-color: var(--ic-accent);
       box-shadow: 0 0 0 3px var(--ic-accent-glow);
   }
   .ickyczone-dragover {
       border-color: var(--ic-accent);
       background: var(--ic-accent-glow);
       box-shadow: 0 0 0 3px var(--ic-accent-glow);
   }
   .ickyczone-uploading {
       opacity: 0.7;
       pointer-events: none;
   }
   .ickyczone-icon { font-size: 2rem; color: var(--ic-accent); line-height: 1; }
   .ickyczone-title { font-size: 0.95rem; font-weight: 600; color: var(--ic-text); }
   .ickyczone-hint { font-size: 0.82rem; }
   .ickycpreview {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       gap: 10px 12px;
       padding: 14px 16px;
       border: 1px solid var(--ic-panel-line);
       border-radius: 12px;
       background: var(--ic-panel);
   }
   .ickycpreview-icon { font-size: 1.35rem; color: var(--ic-success); flex-shrink: 0; }
   .ickycpreview-name {
       flex: 1;
       min-width: 0;
       font-weight: 600;
       word-break: break-all;
   }
   .ickycdeletebtn { flex-shrink: 0; }
   .ickycstatus { margin-top: 10px; font-size: 0.9rem; min-height: 1.4em; }
   .ickycstatus-error { color: var(--ic-danger); }
   
   .icerrorbody { min-height: 100vh; }
   .icerrorpage {
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 32px 16px;
   }
   .icerrorpanel {
       position: relative;
       width: 100%;
       max-width: 480px;
       text-align: center;
       background: var(--ic-login-bg);
       border: 1px solid var(--ic-panel-line);
       border-radius: 14px;
       padding: 36px 28px 32px;
       box-shadow: 0 1px 3px var(--ic-overlay);
   }
   .icerroricon {
       margin: 18px 0 8px;
       font-size: 2.4rem;
       color: var(--ic-accent);
   }
   .icerrorcode {
       margin: 0;
       font-family: "Fredoka", var(--ic-font);
       font-size: 3.5rem;
       font-weight: 700;
       line-height: 1;
       color: var(--ic-text-muted);
       letter-spacing: 2px;
   }
   .icerrortitle {
       margin: 12px 0 10px;
       font-size: 1.35rem;
       font-weight: 600;
       color: var(--ic-text);
   }
   .icerrormsg {
       margin: 0 0 24px;
       color: var(--ic-text-muted);
       line-height: 1.5;
   }
   .icerroractions {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       justify-content: center;
   }
   .icerroractions .btnprimary,
   .icerroractions .btnsecondary {
       min-width: 140px;
   }
   .icerrortheme {
       position: absolute;
       top: 14px;
       right: 14px;
   }

   /* ---- Platform guide (21011) ---- */
   .icguide {
       max-width: 920px;
       margin: 0 auto;
       padding: 4px 4px 32px;
   }
   .icguidehero {
       padding: 22px;
       margin-bottom: 14px;
       border-radius: var(--ic-radius);
       border: 1px solid var(--ic-panel-line);
       background: var(--ic-panel);
   }
   .icguidehero h1 {
       margin: 0 0 8px;
       font-size: 1.25rem;
       font-weight: 600;
       color: var(--ic-text);
       line-height: 1.3;
   }
   .icguidelead {
       margin: 0;
       max-width: 38em;
       color: var(--ic-text-muted);
       line-height: 1.55;
       font-size: 0.98rem;
   }
   .icguidenav {
       display: flex;
       flex-direction: column;
       gap: 12px;
       margin-bottom: 22px;
       padding: 16px 18px;
       border-radius: var(--ic-radius);
       border: 1px solid var(--ic-panel-line);
       background: var(--ic-panel);
   }
   .icguidenavgroup {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 8px 10px;
   }
   .icguidenavlabel {
       flex: 0 0 auto;
       min-width: 5.5rem;
       font-size: 0.72rem;
       font-weight: 600;
       letter-spacing: 0.06em;
       text-transform: uppercase;
       color: var(--ic-text-muted);
   }
   .icguidenavchips {
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
       flex: 1 1 auto;
   }
   .icguidenavchip {
       display: inline-flex;
       align-items: center;
       padding: 5px 11px;
       border-radius: 999px;
       border: 1px solid var(--ic-panel-line);
       background: var(--ic-bg-alt);
       color: var(--ic-text) !important;
       font-size: 0.82rem;
       line-height: 1.3;
       transition: border-color 0.15s, background 0.15s, color 0.15s;
   }
   .icguidenavchip:hover {
       border-color: var(--ic-accent);
       color: var(--ic-accent) !important;
   }
   .icguidebody {
       display: flex;
       flex-direction: column;
       gap: 14px;
   }
   .icguidesection {
       scroll-margin-top: 16px;
       padding: 20px 22px 22px;
       border-radius: var(--ic-radius);
       border: 1px solid var(--ic-panel-line);
       background: var(--ic-panel);
   }
   .icguidesectionhead {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 14px;
       padding-bottom: 12px;
       border-bottom: 1px solid var(--ic-panel-line);
   }
   .icguidesectionicon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       width: 1.5rem;
       height: 1.5rem;
       color: var(--ic-accent);
       line-height: 1;
   }
   .icguidesectionicon .bi {
       font-size: 1.35rem;
       line-height: 1;
   }
   .icguidesectionhead h2 {
       margin: 0;
       font-size: 1.12rem;
       font-weight: 600;
       color: var(--ic-text);
       line-height: 1.3;
   }
   .icguidesectionbody > p {
       margin: 0 0 12px;
       line-height: 1.55;
       color: var(--ic-text);
   }
   .icguidesub {
       margin: 0 0 12px !important;
       color: var(--ic-text-muted) !important;
       font-size: 0.92rem;
   }
   .icguidesteps {
       list-style: none;
       margin: 0;
       padding: 0;
       display: flex;
       flex-direction: column;
       gap: 8px;
   }
   .icguidesteps li {
       display: flex;
       gap: 12px;
       align-items: flex-start;
       padding: 10px 12px;
       border-radius: 8px;
       background: var(--ic-bg-alt);
       border: 1px solid transparent;
   }
   .icguidestepnum {
       flex: 0 0 auto;
       width: 24px;
       height: 24px;
       border-radius: var(--ic-radius);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-size: 0.75rem;
       font-weight: 600;
       color: var(--ic-text-muted);
       background: var(--ic-bg);
       border: 1px solid var(--ic-panel-line);
       line-height: 1;
       margin-top: 1px;
   }
   .icguidesteptext {
       flex: 1 1 auto;
       line-height: 1.5;
       font-size: 0.93rem;
       color: var(--ic-text);
   }
   .icguidesteptext strong { font-weight: 600; }
   .icguidemenugrid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 8px;
       margin-bottom: 4px;
   }
   @media (min-width: 640px) {
       .icguidemenugrid { grid-template-columns: 1fr 1fr; }
       .icguidemenugrid3 { grid-template-columns: 1fr 1fr 1fr; }
   }
   .icguidemenutile {
       display: flex;
       gap: 12px;
       align-items: center;
       padding: 12px 14px;
       border-radius: var(--ic-radius);
       border: 1px solid var(--ic-panel-line);
       background: var(--ic-bg-alt);
       min-height: 64px;
   }
   .icguidemenutileicon {
       flex: 0 0 auto;
       width: 1.5rem;
       height: 1.5rem;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       color: var(--ic-accent);
       line-height: 1;
   }
   .icguidemenutileicon .bi {
       font-size: 1.35rem;
       line-height: 1;
   }
   .icguidemenutile strong {
       display: block;
       font-size: 0.9rem;
       margin-bottom: 2px;
       color: var(--ic-text);
   }
   .icguidemenutile span {
       display: block;
       font-size: 0.8rem;
       line-height: 1.4;
       color: var(--ic-text-muted);
   }
   .icguidecallout {
       display: flex;
       gap: 10px;
       align-items: flex-start;
       margin: 0 0 12px;
       padding: 11px 14px;
       border-radius: var(--ic-radius);
       border: 1px solid var(--ic-panel-line);
       background: var(--ic-bg-alt);
   }
   .icguidecallout i {
       flex: 0 0 auto;
       margin-top: 1px;
       color: var(--ic-text-muted);
       font-size: 1.1rem;
       line-height: 1;
   }
   .icguidecallout p {
       margin: 0 !important;
       font-size: 0.88rem;
       line-height: 1.45;
       color: var(--ic-text);
   }
   .icguidecalloutwarn {
       border-color: var(--ic-danger);
   }
   .icguidecalloutwarn i { color: var(--ic-danger); }
   @media (max-width: 560px) {
       .icguidehero { padding: 20px 18px; }
       .icguidesection { padding: 16px; }
       .icguidenavlabel { min-width: 100%; margin-bottom: 2px; }
       .icguidemenugrid3 { grid-template-columns: 1fr; }
   }

   /* ---------------- public marketing pages (/search, /ssl) ---------------- */
   .icmarketingpage .icmarketingbox {
       max-width: 760px;
       width: 100%;
   }
   .icmarketingpage .icmarketingbox--wide {
       max-width: 960px;
   }
   .icmarketingsearch {
       max-width: none;
       margin: 0 0 16px;
       justify-content: flex-start;
   }
   .icmarketingsearch .icdomainbar {
       margin-bottom: 0;
   }
   .icmarketingpage #icsearchresults {
       text-align: left;
       margin-top: 8px;
   }
   .icmarketingssl {
       margin: 16px 0 20px;
       text-align: left;
   }
   .icmarketingssl .icsslproductcard {
       cursor: default;
   }
   .icmarketingcta {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       justify-content: center;
       margin: 8px 0 4px;
   }