/* NextControl Auth module Scope: pages that set - Prefixed classes to avoid collisions. - No dependencies besides existing nc-theme.css. */ /* Base */ .nc-auth{ background:#f5f7fb; color:#0f172a; } .nc-auth *{ box-sizing:border-box; } .nc-auth-shell{ max-width:1020px; margin:0 auto; padding:28px 16px; } .nc-auth-card{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:18px; padding:22px; box-shadow:0 12px 40px rgba(0,0,0,.06); } /* Header */ .nc-auth-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; } .nc-auth-title{ display:flex; gap:12px; align-items:flex-start; } .nc-auth-title h1{ margin:0; font-size:20px; line-height:1.2; } .nc-auth-title p{ margin:4px 0 0 0; color:#64748b; font-size:12px; line-height:1.35; max-width:58ch; } .nc-auth-titleicon{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(11,116,255,.10); color:#0b74ff; flex:0 0 auto; } .nc-auth-linkbtn{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; border:1px solid rgba(0,0,0,.10); background:#fff; color:#0f172a; text-decoration:none; font-weight:600; font-size:12px; white-space:nowrap; } .nc-auth-linkbtn:hover{ background:#f8fafc; } .nc-auth-linkbtn svg{ width:16px; height:16px; } /* Alerts */ .nc-auth-alert{ border-radius:12px; padding:12px 14px; margin:12px 0 18px 0; } .nc-auth-alert__head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .nc-auth-alert__head svg{ width:18px; height:18px; flex:0 0 auto; } .nc-auth-alert ul{ margin:0; padding-left:18px; } .nc-auth-alert li{ margin:4px 0; font-size:12px; } .nc-auth-alert--err{ background:#fff1f2; border:1px solid #fecdd3; color:#9f1239; } .nc-auth-alert--ok{ background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; } /* Sections */ .nc-auth-form{ margin-top:8px; } .nc-auth-section{ padding-top:10px; } .nc-auth-section + .nc-auth-section{ margin-top:18px; padding-top:18px; border-top:1px solid rgba(0,0,0,.06); } .nc-auth-section__head{ margin-bottom:12px; } .nc-auth-section__head h2{ margin:0; font-size:13px; display:flex; align-items:center; gap:8px; } .nc-auth-section__head h2 svg{ width:16px; height:16px; } .nc-auth-section__head p{ margin:6px 0 0 0; font-size:12px; color:#64748b; line-height:1.35; } /* Grid */ .nc-auth-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; } @media(max-width:860px){ .nc-auth-grid{ grid-template-columns:1fr; } } /* Fields */ .nc-field label{ display:block; font-size:12px; font-weight:700; color:#0f172a; margin-bottom:6px; } .nc-req{ color:#dc2626; font-weight:800; } .nc-opt{ color:#64748b; font-weight:600; } .nc-field__msg{ min-height:14px; margin-top:6px; font-size:11px; color:#64748b; } .nc-field__msg.is-err{ color:#b91c1c; } /* Input group */ .nc-input{ display:flex; align-items:center; gap:10px; border:1px solid rgba(2,6,23,.18); border-radius:12px; background:#fff; padding:8px 12px; min-height:44px; transition:box-shadow .15s ease, border-color .15s ease, background .15s ease; } .nc-input:focus-within{ border-color:rgba(11,116,255,.55); box-shadow:0 0 0 4px rgba(11,116,255,.12); } .nc-input__icon{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; color:#475569; flex:0 0 auto; } .nc-input__icon svg{ width:18px; height:18px; } .nc-input input, .nc-input select{ width:100%; border:none; outline:none; background:transparent; font-size:13px; color:#0f172a; min-width:0; } .nc-input input::placeholder{ color:#94a3b8; } /* Select caret spacing (native) */ .nc-input select{ padding-right:4px; } /* Trailing icon/button */ .nc-input__trail{ display:flex; align-items:center; gap:6px; flex:0 0 auto; } .nc-iconbtn{ width:28px; height:28px; border-radius:10px; border:1px solid rgba(2,6,23,.14); background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; } .nc-iconbtn:hover{ background:#f8fafc; } .nc-iconbtn svg{ width:16px; height:16px; } .nc-pill{ font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid rgba(2,6,23,.12); background:#f8fafc; color:#334155; white-space:nowrap; } /* Password meter */ .nc-meter{ margin-top:8px; display:flex; align-items:center; gap:10px; } .nc-meter__bar{ height:8px; border-radius:999px; background:rgba(2,6,23,.08); overflow:hidden; flex:1 1 auto; } .nc-meter__fill{ height:100%; width:0%; background:#0b74ff; transition:width .18s ease; } .nc-meter__txt{ font-size:11px; color:#64748b; min-width:80px; text-align:right; } /* Optional details */ .nc-details{ border:1px solid rgba(2,6,23,.10); background:#f8fafc; border-radius:14px; padding:12px; } .nc-details summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:800; font-size:12px; color:#0f172a; } .nc-details summary::-webkit-details-marker{ display:none; } .nc-details__hint{ font-weight:600; color:#64748b; font-size:11px; } .nc-details__chev svg{ width:16px; height:16px; } .nc-details[open] .nc-details__chev{ transform:rotate(180deg); } .nc-details__chev{ transition:transform .15s ease; } /* Footer / actions */ .nc-auth-footer{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } @media(max-width:520px){ .nc-auth-footer{ flex-direction:column; align-items:stretch; } } .nc-auth-auxlink{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:#0b74ff; text-decoration:none; font-weight:700; } .nc-auth-auxlink:hover{ text-decoration:underline; } .nc-auth-auxlink svg{ width:16px; height:16px; } .nc-btn{ appearance:none; border:none; border-radius:12px; padding:10px 14px; background:#0b74ff; color:#fff; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:10px; justify-content:center; } .nc-btn svg{ width:16px; height:16px; } .nc-btn:hover{ filter:brightness(.98); } .nc-btn:disabled{ opacity:.65; cursor:not-allowed; } .nc-btn--secondary{ background:#fff; color:#0f172a; border:1px solid rgba(2,6,23,.12); } .nc-btn--success{ background:#16a34a; color:#fff; } .nc-btn--success:hover{ filter:brightness(.98); } .nc-auth-actions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; width:100%; flex-wrap:wrap; } (max-width:520px){ .nc-auth-actions{ flex-direction:column; align-items:stretch; } .nc-auth-actions .nc-btn, .nc-auth-actions .nc-auth-btnlink{ width:100%; } } .nc-auth-btnlink{ text-decoration:none; } .nc-auth-help{ margin-top:12px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; color:#64748b; text-align:center; } .nc-auth-help svg{ width:16px; height:16px; flex:0 0 auto; } .nc-auth-note{ margin-top:14px; display:flex; align-items:flex-start; gap:10px; font-size:12px; color:#64748b; line-height:1.35; } .nc-auth-note svg{ width:16px; height:16px; flex:0 0 auto; margin-top:1px; } /* Inline verify box */ .nc-verify{ margin-top:10px; border:1px dashed rgba(2,6,23,.18); border-radius:14px; padding:12px; background:#fff; } .nc-verify__head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-weight:900; font-size:12px; } .nc-verify__head svg{ width:16px; height:16px; } .nc-verify__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .nc-verify__row a{ text-decoration:none; } .nc-verify__row .nc-btn{ padding:9px 12px; } /* Actions row + help */ .nc-auth-actions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; width:100%; flex-wrap:wrap; } @media(max-width:520px){ .nc-auth-actions{ flex-direction:column; align-items:stretch; } .nc-auth-actions .nc-btn, .nc-auth-actions .nc-btn--secondary{ width:100%; } } .nc-btn--success{ background:#16a34a; color:#fff; } .nc-btn--success:hover{ filter:brightness(.98); } .nc-auth-help{ margin-top:10px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; color:#64748b; text-align:center; } .nc-auth-help svg{ width:16px; height:16px; color:#94a3b8; }