/* ============================================================
   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:       #17171C;
       --ic-bg-deep:      #091c1e;
       --ic-bg-navy:      #0F172A;
       --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.03);
       --ic-topbar-bg:    rgba(18, 18, 23, 0.92);
       --ic-login-bg:     rgba(18, 18, 23, 0.92);
       --ic-overlay:      rgba(9, 28, 30, 0.55);
       --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:         #e2e8f0;
       --ic-text-muted:   #9aa4b2;
       --ic-teal:         #bad3d4;
       --ic-danger:       #f87171;
       --ic-success:      #34d399;
       --ic-radius:       10px;
       --ic-font:         "Segoe UI", "Helvetica Neue", Arial, sans-serif;
       --ic-popup-bg:     #17171C;
       --ic-popup-title-bg: #121217;
       --ic-popup-overlay: rgba(9, 28, 30, 0.55);
   }
   
   [data-theme="light"] {
       --ic-bg:           #f4f6f9;
       --ic-bg-alt:       #ffffff;
       --ic-bg-deep:      #e8edf2;
       --ic-bg-navy:      #ffffff;
       --ic-panel:        rgba(0, 0, 0, 0.04);
       --ic-panel-line:   rgba(0, 0, 0, 0.10);
       --ic-row-hover:    rgba(0, 0, 0, 0.03);
       --ic-topbar-bg:    rgba(255, 255, 255, 0.95);
       --ic-login-bg:     rgba(255, 255, 255, 0.98);
       --ic-overlay:      rgba(15, 23, 42, 0.35);
       --ic-text:         #1e293b;
       --ic-text-muted:   #64748b;
       --ic-popup-bg:     #ffffff;
       --ic-popup-title-bg: #f8fafc;
       --ic-popup-overlay: rgba(15, 23, 42, 0.45);
   }
   
   * { box-sizing: border-box; }
   
   html, body.icbody {
       margin: 0;
       padding: 0;
       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); }
   .icbrandcloud { color: var(--ic-accent); }
   .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; }
   
   /* ---------------- 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;
   }
   ul.tabs li { margin: 0; }
   ul.tabs input[type="radio"] { display: none; }
   ul.tabs label {
       display: inline-block;
       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 input[type="radio"]:checked + label {
       background: var(--ic-bg-navy);
       color: var(--ic-accent);
       border-color: var(--ic-accent);
   }
   .tab-content {
       display: none;
       position: absolute;
       left: 0;
       right: 0;
       top: 41px;
       background: var(--ic-bg-navy);
       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.tabsorange 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; }
   .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-alt);
       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);
   }
   
   /* ---------------- 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;
   }
   
   .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 { max-width: 760px; margin: 0 auto; text-align: center; }
   .icsearchrow { display: flex; gap: 10px; margin: 18px 0; }
   .icsearchrow .fldinput { flex: 1; font-size: 17px; padding: 14px 16px; }
   .icsearchhint { font-size: 12px; color: var(--ic-text-muted); }
   
   .icresult {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       padding: 14px 18px;
       margin: 10px 0;
       background: var(--ic-panel);
       border: 1px solid var(--ic-panel-line);
       border-radius: var(--ic-radius);
       text-align: left;
   }
   .icresultname { font-size: 17px; font-weight: 600; word-break: break-all; }
   .icresultace  { font-size: 12px; color: var(--ic-text-muted); }
   .icstatus { font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 16px; white-space: nowrap; }
   .icstatusfree  { color: var(--ic-success); border: 1px solid var(--ic-success); }
   .icstatustaken { color: var(--ic-danger);  border: 1px solid var(--ic-danger); }
   
   /* ---------------- 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; }
   
   .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); }
   
   .icformgrid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 0 22px;
   }
   .icformgrid .fldfull { grid-column: 1 / -1; }
   @media (max-width: 760px) { .icformgrid { grid-template-columns: 1fr; } }
   
   .icactions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
   .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;
   }
   .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 {
       clear: both;
       margin-top: 30px;
       padding: 18px 20px 24px 20px;
       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%; }
       .icsearchrow { flex-direction: column; }
       #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; }
   .icpaymethodgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
   .icpaymethodcard { display: block; padding: 14px; border: 2px solid var(--ic-panel-line); border-radius: 10px; cursor: pointer; text-align: left; position: relative; }
   .icpaymethodcard input.icpaymethodradio { 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%);
   }
   .icsslproductcard.icsslcardselected::after {
       content: '\2713';
       position: absolute;
       top: 10px;
       left: 10px;
       width: 22px;
       height: 22px;
       border-radius: 50%;
       background: var(--ic-accent);
       color: #fff;
       font-size: 13px;
       font-weight: 700;
       line-height: 22px;
       text-align: center;
       box-shadow: 0 0 0 2px var(--ic-bg-alt);
   }
   .icsslbadge--featured { background: var(--ic-accent); color: #fff; }
   .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%); }
   }