/* ==========================================================================
   Axowl Design System — ah-components.css
   Global component styles with CSS variable support for dark mode.
   Import this in app.css AFTER the existing styles.
   ========================================================================== */

/* ── 1. Design Tokens ─────────────────────────────────────────────────── */
:root {
    /* Surfaces */
    --ah-bg:              #ffffff;
    --ah-bg-subtle:       #f8fafc;
    --ah-bg-surface:      #f1f5f9;
    --ah-bg-overlay:      rgba(0, 0, 0, 0.45);

    /* Borders */
    --ah-border:          #e2e8f0;
    --ah-border-soft:     #f1f5f9;

    /* Text */
    --ah-text:            #0f172a;
    --ah-text-sub:        #475569;
    --ah-text-muted:      #94a3b8;
    --ah-text-placeholder:#cbd5e1;

    /* Accent (primary action) */
    --ah-accent:          #0f172a;
    --ah-accent-text:     #ffffff;
    --ah-link:            #6366f1;
    --ah-link-hover:      #4f46e5;

    /* Toggle */
    --ah-toggle-on:       #1a1a2e;

    /* Semantic */
    --ah-danger:          #dc2626;
    --ah-danger-bg:       #fef2f2;
    --ah-danger-border:   #fecaca;
    --ah-success:         #16a34a;
    --ah-success-bg:      #f0fdf4;
    --ah-success-border:  #bbf7d0;
    --ah-warning:         #d97706;
    --ah-warning-bg:      #fffbeb;
    --ah-warning-border:  #fde68a;
    --ah-info:            #2563eb;
    --ah-info-bg:         #eff6ff;
    --ah-info-border:     #bfdbfe;

    /* Shadows */
    --ah-shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.05);
    --ah-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.10);
    --ah-shadow-lg:       0 12px 40px rgba(0, 0, 0, 0.15);

    /* Focus ring */
    --ah-focus-ring:      0 0 0 2px rgba(129, 140, 248, 0.25);
    --ah-focus-color:     #6366f1;

    /* Radius — 2026-04-17: 살짝만 감소 (완전히 각지지 않게) */
    --ah-radius-sm:       4px;
    --ah-radius:          5px;
    --ah-radius-md:       7px;
    --ah-radius-lg:       10px;
    --ah-radius-xl:       12px;
}

[data-theme="dark"] {
    /* Surfaces — Aspire exact palette */
    --ah-bg:              #272727;       /* 콘텐츠 배경 (Aspire body) */
    --ah-bg-subtle:       #2f2f2f;       /* 서브 배경 */
    --ah-bg-surface:      #383838;       /* elevated surface */
    --ah-bg-overlay:      rgba(0, 0, 0, 0.65);

    /* Borders */
    --ah-border:          #3d3d3d;       /* Aspire table border */
    --ah-border-soft:     #333333;

    /* Text — bright for readability */
    --ah-text:            #ffffff;       /* primary */
    --ah-text-sub:        #e0e0e0;       /* 보조 텍스트 ↑↑ */
    --ah-text-muted:      #c0c0c0;       /* muted ↑↑ */
    --ah-text-placeholder:#909090;

    /* Toggle */
    --ah-toggle-on:       #eac4ff;

    /* Accent */
    --ah-accent:          #ffffff;
    --ah-accent-text:     #272727;
    --ah-link:            #eac4ff;
    --ah-link-hover:      #d4a8f0;

    /* Status colors */
    --ah-danger:          #f98981;
    --ah-danger-bg:       #2d1111;
    --ah-danger-border:   #7f1d1d;
    --ah-success-bg:      #052e16;
    --ah-success-border:  #14532d;
    --ah-warning-bg:      #2d1b00;
    --ah-warning-border:  #78350f;
    --ah-info-bg:         #0c1a3a;
    --ah-info-border:     #1e3a6e;

    /* Shadows */
    --ah-shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.3);
    --ah-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.4);
    --ah-shadow-lg:       0 12px 40px rgba(0, 0, 0, 0.5);
}

/* ── 2. Layout ────────────────────────────────────────────────────────── */
.light-dashboard {
    width: 100%;
}

/* ── 3. Card ──────────────────────────────────────────────────────────── */
.card-panel {
    background:    var(--ah-bg);
    border:        1px solid var(--ah-border-soft);
    border-radius: var(--ah-radius-lg);
    box-shadow:    var(--ah-shadow-sm);
    padding:       1.5rem;
    margin-bottom: 1.5rem;
}

.card-title {
    font-size:      0.85rem;
    font-weight:    800;
    color:          var(--ah-text);
    letter-spacing: -0.2px;
    margin-bottom:  0.2rem;
    display:        flex;
    align-items:    center;
    gap:            0.5rem;
}

.card-desc {
    font-size:     0.8rem;
    color:         var(--ah-text-muted);
    margin-bottom: 1.25rem;
    line-height:   1.5;
}

.card-desc code {
    font-family:   'JetBrains Mono', 'Noto Sans KR', 'Noto Sans JP', monospace;
    font-size:     0.78rem;
    background:    var(--ah-bg-surface);
    padding:       0.1rem 0.3rem;
    border-radius: var(--ah-radius-sm);
    color:         var(--ah-text);
}

/* ── 4. Tabs ──────────────────────────────────────────────────────────── */
/* [2026-07-09] navy pill 탭 통일 (밑줄 → 흰 pill + navy 활성, member-tab/ra-filter 와 동일). */
.settings-tabs {
    display:       flex;
    gap:           0.4rem;
    margin-bottom: 1.5rem;
    overflow-x:    auto;
    scrollbar-width: none;
}

.settings-tabs::-webkit-scrollbar { display: none; }

.settings-tab {
    padding:        0.4rem 0.9rem;
    font-size:      0.84rem;
    font-weight:    600;
    background:     #fff;
    border:         1px solid #e2e8f0;
    color:          #64748b;
    border-radius:  8px;
    cursor:         pointer;
    transition:     all 0.12s ease;
    white-space:    nowrap;
    user-select:    none;
}

.settings-tab:hover  { border-color: #cbd5e1; color: #334155; }

.settings-tab.active {
    background:    #0f172a;
    border-color:  #0f172a;
    color:         #fff;
}

.tab-count {
    font-size:     0.6rem;
    font-weight:   700;
    background:    var(--ah-bg-surface);
    color:         var(--ah-text-muted);
    padding:       0.1rem 0.35rem;
    border-radius: 10px;
    border:        1px solid var(--ah-border);
    margin-left:   0.3rem;
}

/* ── 5. Form Fields ───────────────────────────────────────────────────── */
.field-group { margin-bottom: 1.25rem; }

.field-label {
    font-size:      0.7rem;
    font-weight:    700;
    color:          var(--ah-text-sub);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom:  0.35rem;
    display:        block;
}

.field-input {
    width:         100%;
    font-size:     0.85rem;
    padding:       0.6rem 0.85rem;
    border:        1px solid var(--ah-border);
    border-radius: var(--ah-radius);
    outline:       none;
    color:         var(--ah-text);
    background:    var(--ah-bg);
    transition:    border-color 0.15s, box-shadow 0.15s;
    box-sizing:    border-box;
}

.field-input:focus {
    border-color: var(--ah-focus-color);
    box-shadow:   var(--ah-focus-ring);
}

.field-input::placeholder { color: var(--ah-text-placeholder); }

.field-input:disabled {
    background: var(--ah-bg-subtle);
    color:      var(--ah-text-muted);
    cursor:     not-allowed;
}

.field-textarea {
    width:         100%;
    font-size:     0.85rem;
    padding:       0.6rem 0.85rem;
    border:        1px solid var(--ah-border);
    border-radius: var(--ah-radius);
    outline:       none;
    color:         var(--ah-text);
    background:    var(--ah-bg);
    resize:        vertical;
    line-height:   1.6;
    transition:    border-color 0.15s, box-shadow 0.15s;
    box-sizing:    border-box;
}

.field-textarea:focus {
    border-color: var(--ah-focus-color);
    box-shadow:   var(--ah-focus-ring);
}

.field-textarea::placeholder { color: var(--ah-text-placeholder); }

.field-select {
    width:          100%;
    font-size:      0.85rem;
    padding:        0.6rem 0.85rem;
    border:         1px solid var(--ah-border);
    border-radius:  var(--ah-radius);
    outline:        none;
    color:          var(--ah-text);
    background:     var(--ah-bg);
    box-sizing:     border-box;
    -webkit-appearance: none;
    appearance:     none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 0.85rem center;
    padding-right:  2.2rem;
    transition:     border-color 0.15s, box-shadow 0.15s;
}

.field-select:focus {
    border-color: var(--ah-focus-color);
    box-shadow:   var(--ah-focus-ring);
}

.field-hint {
    font-size:   0.65rem;
    color:       var(--ah-text-muted);
    margin-top:  0.25rem;
    line-height: 1.5;
}

/* [2026-07-31] 필수 칸 표시 — opt-in. 라벨에 <span class="field-required">*</span> 를 붙인다.
   기존 모달은 이 클래스를 안 쓰므로 영향 없음. */
.field-required {
    color:       var(--ah-danger, #dc2626);
    margin-left: 0.15rem;
    font-weight: 700;
}

/* 버튼이 왜 잠겼는지 말해주는 한 줄. 저장 버튼 아래(=modal-actions 다음)에 놓는다.
   "Connected." 는 떴는데 버튼만 회색이면 사용자는 이유를 알 길이 없다. */
.modal-actions-note {
    font-size:  0.7rem;
    color:      var(--ah-text-muted);
    text-align: right;
    margin-top: 0.5rem;
}

.field-hint a    { color: var(--ah-info); }
.field-hint code {
    font-family:   'JetBrains Mono', 'Noto Sans KR', 'Noto Sans JP', monospace;
    font-size:     0.65rem;
    background:    var(--ah-bg-surface);
    padding:       0.1rem 0.3rem;
    border-radius: var(--ah-radius-sm);
    color:         var(--ah-text-sub);
}

.two-col {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1rem;
}

@media (max-width: 640px) {
    .two-col { grid-template-columns: 1fr; }
}

/* ── 6. Buttons ───────────────────────────────────────────────────────── */

/* Primary */
.btn-primary {
    font-size:     0.8rem;
    font-weight:   700;
    color:         var(--ah-accent-text);
    background:    var(--ah-accent);
    border:        1px solid var(--ah-accent);
    padding:       0.5rem 1.5rem;
    border-radius: var(--ah-radius);
    cursor:        pointer;
    transition:    opacity 0.15s;
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
}
.btn-primary:hover    { opacity: 0.85; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Secondary */
.btn-secondary {
    font-size:     0.75rem;
    font-weight:   600;
    color:         var(--ah-text-sub);
    background:    var(--ah-bg);
    border:        1px solid var(--ah-border);
    padding:       0.4rem 1rem;
    border-radius: var(--ah-radius);
    cursor:        pointer;
    transition:    all 0.15s;
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
}
.btn-secondary:hover    { background: var(--ah-bg-subtle); border-color: var(--ah-text-muted); }
.btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Danger */
.btn-danger {
    font-size:     0.75rem;
    font-weight:   700;
    color:         #ffffff;
    background:    var(--ah-danger);
    border:        1px solid var(--ah-danger);
    padding:       0.4rem 1rem;
    border-radius: var(--ah-radius);
    cursor:        pointer;
    transition:    opacity 0.15s;
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
}
.btn-danger:hover    { opacity: 0.85; }
.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }

/* Danger outline */
.btn-danger-outline {
    font-size:     0.75rem;
    font-weight:   600;
    color:         var(--ah-danger);
    background:    var(--ah-bg);
    border:        1px solid var(--ah-danger-border);
    padding:       0.4rem 1rem;
    border-radius: var(--ah-radius);
    cursor:        pointer;
    transition:    all 0.15s;
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
}
.btn-danger-outline:hover    { background: var(--ah-danger-bg); }
.btn-danger-outline:disabled { opacity: 0.4; cursor: not-allowed; }

/* Revoke */
.btn-revoke {
    font-size:     0.68rem;
    font-weight:   600;
    color:         var(--ah-danger);
    background:    none;
    border:        1px solid var(--ah-danger-border);
    padding:       0.25rem 0.6rem;
    border-radius: var(--ah-radius-sm);
    cursor:        pointer;
    transition:    all 0.12s;
}
.btn-revoke:hover    { background: var(--ah-danger-bg); }
.btn-revoke:disabled { opacity: 0.4; cursor: not-allowed; }

/* Delete */
.btn-delete {
    font-size:     0.68rem;
    font-weight:   600;
    color:         var(--ah-danger);
    background:    var(--ah-danger-bg);
    border:        1px solid var(--ah-danger-border);
    padding:       0.25rem 0.6rem;
    border-radius: var(--ah-radius-sm);
    cursor:        pointer;
    transition:    all 0.12s;
    display:       inline-flex;
    align-items:   center;
    gap:           0.25rem;
}
.btn-delete:hover { background: #fee2e2; }

/* Copy inline */
.btn-copy-inline {
    background: none;
    border:     none;
    color:      var(--ah-text-muted);
    cursor:     pointer;
    font-size:  0.75rem;
    padding:    0.2rem;
    transition: color 0.12s;
    flex-shrink: 0;
}
.btn-copy-inline:hover { color: var(--ah-text); }

/* Spinner */
.btn-spinner {
    display:       inline-block;
    width:         12px;
    height:        12px;
    border:        2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation:     ah-spin 0.6s linear infinite;
    flex-shrink:   0;
}

.btn-secondary .btn-spinner,
.btn-revoke    .btn-spinner {
    border-color:      rgba(71, 85, 105, 0.3);
    border-top-color:  var(--ah-text-sub);
}

@keyframes ah-spin { to { transform: rotate(360deg); } }

/* ── 7. Back link ─────────────────────────────────────────────────────── */
.back-link {
    font-size:   0.75rem;
    font-weight: 600;
    color:       var(--ah-text-muted);
    cursor:      pointer;
    text-decoration: none;
    transition:  color 0.15s;
    display:     inline-flex;
    align-items: center;
    gap:         0.3rem;
}
.back-link:hover { color: var(--ah-text-sub); }

/* ── 8. Actions bar ───────────────────────────────────────────────────── */
.actions-bar {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding-top:     1rem;
    border-top:      1px solid var(--ah-border-soft);
    margin-top:      0.5rem;
}

/* ── 9. Notice bar ────────────────────────────────────────────────────── */
.notice-bar {
    display:       flex;
    align-items:   flex-start;
    gap:           0.6rem;
    padding:       0.7rem 0.9rem;
    border-radius: var(--ah-radius-md);
    border:        1px solid var(--ah-border);
    font-size:     0.75rem;
    color:         var(--ah-text-sub);
    line-height:   1.55;
    margin-bottom: 1rem;
}

.notice-bar a { color: var(--ah-info); font-weight: 600; }

/* ── 10. Security notice ──────────────────────────────────────────────── */
.security-notice {
    background:    var(--ah-bg-subtle);
    border:        1px solid var(--ah-border);
    border-radius: var(--ah-radius-md);
    padding:       0.85rem 1.25rem;
    font-size:     0.75rem;
    color:         var(--ah-text-sub);
    margin-bottom: 1.5rem;
    display:       flex;
    align-items:   flex-start;
    gap:           0.5rem;
    line-height:   1.5;
}

/* ── 11. One-time banner ──────────────────────────────────────────────── */
.one-time-banner {
    background:    var(--ah-warning-bg);
    border:        1px solid var(--ah-warning-border);
    border-radius: var(--ah-radius-md);
    padding:       1rem 1.25rem;
    margin-bottom: 1.25rem;
}

/* Modal variant: centered overlay with backdrop (used for Plugin Token / API Key creation). */
.one-time-modal-backdrop {
    position:        fixed;
    inset:           0;
    background:      rgba(15, 23, 42, 0.55);
    z-index:         1100;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1rem;
    backdrop-filter: blur(2px);
}

.one-time-banner.one-time-modal {
    max-width:     560px;
    width:         100%;
    margin-bottom: 0;
    box-shadow:    0 20px 60px rgba(0, 0, 0, 0.35);
    animation:     one-time-modal-pop 0.18s ease-out;
}

@keyframes one-time-modal-pop {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.one-time-banner-title {
    font-size:     0.78rem;
    font-weight:   700;
    color:         #92400e;
    margin-bottom: 0.5rem;
}

.one-time-banner-key {
    font-family:   'JetBrains Mono', 'Noto Sans KR', 'Noto Sans JP', monospace;
    font-size:     0.82rem;
    color:         var(--ah-text);
    background:    var(--ah-bg);
    border:        1px solid var(--ah-warning-border);
    border-radius: var(--ah-radius);
    padding:       0.6rem 0.85rem;
    word-break:    break-all;
}

/* ── 12. Danger zone ──────────────────────────────────────────────────── */
.danger-zone { border-color: var(--ah-danger-border) !important; }

.danger-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         1rem 0;
    border-bottom:   1px solid var(--ah-danger-bg);
}

.danger-row:last-child { border-bottom: none; }

.danger-action {
    font-size:   0.8rem;
    font-weight: 700;
    color:       var(--ah-danger);
}

.danger-desc {
    font-size:  0.7rem;
    color:      var(--ah-text-muted);
    margin-top: 0.1rem;
}

/* ── 13. Modal ────────────────────────────────────────────────────────── */
.modal-overlay {
    position:        fixed;
    inset:           0;
    background:      var(--ah-bg-overlay);
    backdrop-filter: blur(4px);
    z-index:         1000;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.modal-panel {
    background:    var(--ah-bg);
    border-radius: var(--ah-radius-xl);
    box-shadow:    var(--ah-shadow-lg);
    padding:       2rem;
    max-width:     480px;
    width:         92%;
    max-height:    90vh;
    overflow-y:    auto;
}

.modal-title {
    font-weight:   800;
    font-size:     1.1rem;
    color:         var(--ah-text);
    margin-bottom: 0.3rem;
}

.modal-subtitle {
    font-size:     0.8rem;
    color:         var(--ah-text-muted);
    margin-bottom: 1.5rem;
    line-height:   1.4;
}

.confirm-desc {
    font-size:     0.85rem;
    color:         var(--ah-text-sub);
    line-height:   1.5;
    margin-bottom: 1.5rem;
}

.modal-actions {
    display:         flex;
    justify-content: flex-end;
    gap:             0.5rem;
    margin-top:      1.5rem;
    padding-top:     1.25rem;
    border-top:      1px solid var(--ah-border-soft);
}

.btn-modal-cancel {
    padding:       0.45rem 1rem;
    font-size:     0.8rem;
    font-weight:   600;
    border:        1px solid var(--ah-border);
    background:    var(--ah-bg);
    color:         var(--ah-text-sub);
    border-radius: var(--ah-radius);
    cursor:        pointer;
    transition:    background 0.12s;
}
.btn-modal-cancel:hover { background: var(--ah-bg-subtle); }

.btn-modal-confirm {
    padding:       0.45rem 1.1rem;
    font-size:     0.8rem;
    font-weight:   700;
    border:        1px solid var(--ah-accent);
    background:    var(--ah-accent);
    color:         var(--ah-accent-text);
    border-radius: var(--ah-radius);
    cursor:        pointer;
    transition:    opacity 0.12s;
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
}
.btn-modal-confirm:hover    { opacity: 0.85; }
.btn-modal-confirm:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-modal-delete {
    padding:       0.45rem 1.1rem;
    font-size:     0.8rem;
    font-weight:   700;
    border:        1px solid var(--ah-danger);
    background:    var(--ah-danger);
    color:         #ffffff;
    border-radius: var(--ah-radius);
    cursor:        pointer;
    transition:    opacity 0.12s;
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
}
.btn-modal-delete:hover    { opacity: 0.85; }
.btn-modal-delete:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── 14. Slug input ───────────────────────────────────────────────────── */
.slug-input-wrapper {
    display:     flex;
    align-items: center;
    border:      1px solid var(--ah-border);
    border-radius: var(--ah-radius);
    overflow:    hidden;
}

.slug-prefix {
    font-family:  'JetBrains Mono', 'Noto Sans KR', 'Noto Sans JP', monospace;
    font-size:    0.8rem;
    color:        var(--ah-text-muted);
    background:   var(--ah-bg-subtle);
    padding:      0.6rem 0.75rem;
    border-right: 1px solid var(--ah-border);
    white-space:  nowrap;
}

.slug-input {
    border:        none !important;
    border-radius: 0 !important;
    font-family:   'JetBrains Mono', 'Noto Sans KR', 'Noto Sans JP', monospace;
}
.slug-input:focus { box-shadow: none !important; }

/* ── 15. Key table ────────────────────────────────────────────────────── */
.key-table {
    width:           100%;
    border-collapse: separate;
    border-spacing:  0;
}

.key-table th {
    font-size:      0.65rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color:          var(--ah-text-muted);
    border-bottom:  1px solid var(--ah-border-soft);
    padding:        0.6rem 0.75rem;
    text-align:     left;
}

.key-table td {
    padding:       0.75rem 0.75rem;
    border-bottom: 1px solid var(--ah-bg-subtle);
    font-size:     0.8rem;
    color:         var(--ah-text-sub);
    vertical-align: middle;
}

.key-table tbody tr:last-child td { border-bottom: none; }

.key-name {
    font-weight: 700;
    color:       var(--ah-text);
    font-size:   0.8rem;
}

.key-prefix {
    font-family:   'JetBrains Mono', 'Noto Sans KR', 'Noto Sans JP', monospace;
    font-size:     0.72rem;
    color:         var(--ah-text-muted);
    background:    var(--ah-bg-subtle);
    padding:       0.15rem 0.4rem;
    border-radius: var(--ah-radius-sm);
    border:        1px solid var(--ah-border-soft);
}

.key-date { font-size: 0.72rem; color: var(--ah-text-muted); }
.key-date.expiring { color: var(--ah-danger); font-weight: 600; }

/* ── 16. Signing key info ─────────────────────────────────────────────── */
.signing-key-info {
    background:    var(--ah-bg-subtle);
    border:        1px solid var(--ah-border);
    border-radius: var(--ah-radius-md);
    padding:       1rem 1.25rem;
}

.signing-key-row {
    display:         flex;
    justify-content: space-between;
    padding:         0.4rem 0;
    border-bottom:   1px solid var(--ah-border-soft);
}
.signing-key-row:last-child { border-bottom: none; }

.signing-key-label {
    font-size:   0.7rem;
    font-weight: 700;
    color:       var(--ah-text-muted);
}

.signing-key-value {
    font-size:   0.75rem;
    font-weight: 600;
    color:       var(--ah-text);
}

/* ── 17. Secret display ───────────────────────────────────────────────── */
.secret-display {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--ah-bg-subtle);
    border:          1px solid var(--ah-border);
    border-radius:   var(--ah-radius-md);
    padding:         0.75rem 1rem;
    font-size:       0.8rem;
    color:           var(--ah-text);
}

/* ── 18. Plugin tokens ────────────────────────────────────────────────── */
.plugin-icon {
    font-size:     0.75rem;
    font-weight:   800;
    color:         var(--ah-text-sub);
    background:    var(--ah-bg-surface);
    width:         24px;
    height:        24px;
    border-radius: var(--ah-radius-sm);
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.plugin-status {
    font-size:     0.65rem;
    font-weight:   700;
    padding:       0.15rem 0.4rem;
    border-radius: var(--ah-radius-sm);
}

.plugin-status.active {
    color:      var(--ah-success);
    background: var(--ah-success-bg);
    border:     1px solid var(--ah-success-border);
}

.plugin-status.inactive {
    color:      var(--ah-text-muted);
    background: var(--ah-bg-subtle);
    border:     1px solid var(--ah-border);
}

/* ── 19. URL / DNS preview ────────────────────────────────────────────── */
.dns-verify-box {
    background:    var(--ah-bg-subtle);
    border:        1px solid var(--ah-border);
    border-radius: var(--ah-radius-md);
    padding:       1rem 1.25rem;
    margin-top:    1rem;
}

.dns-verify-title {
    font-size:      0.7rem;
    font-weight:    700;
    color:          var(--ah-text-sub);
    text-transform: uppercase;
    margin-bottom:  0.35rem;
}

.dns-verify-desc {
    font-size:     0.72rem;
    color:         var(--ah-text-muted);
    margin-bottom: 0.75rem;
}

.dns-record-row   { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.dns-record-cell  { display: flex; flex-direction: column; gap: 0.15rem; }

.dns-label {
    font-size:      0.6rem;
    font-weight:    700;
    color:          var(--ah-text-muted);
    text-transform: uppercase;
}

.dns-value {
    font-size:   0.78rem;
    font-weight: 600;
    color:       var(--ah-text);
}

.dns-status {
    font-size:     0.68rem;
    font-weight:   700;
    padding:       0.2rem 0.5rem;
    border-radius: var(--ah-radius-sm);
}
.dns-status.verified {
    color:      #166534;
    background: var(--ah-success-bg);
    border:     1px solid var(--ah-success-border);
}
.dns-status.pending {
    color:      #92400e;
    background: var(--ah-warning-bg);
    border:     1px solid var(--ah-warning-border);
}

.url-preview-box {
    background:    var(--ah-bg-subtle);
    border:        1px solid var(--ah-border);
    border-radius: var(--ah-radius-md);
    padding:       0.75rem 1rem;
}

.url-preview-label {
    font-size:      0.6rem;
    font-weight:    700;
    color:          var(--ah-text-muted);
    text-transform: uppercase;
    margin-bottom:  0.25rem;
}

.url-preview-value {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    font-size:       0.8rem;
    font-weight:     600;
    color:           var(--ah-text);
}

/* ── 20. Rotation timeline ────────────────────────────────────────────── */
.rotation-timeline { display: flex; flex-direction: column; gap: 0; }

.rotation-event {
    display:       flex;
    align-items:   flex-start;
    gap:           0.75rem;
    padding:       0.6rem 0;
    border-bottom: 1px solid var(--ah-bg-subtle);
}
.rotation-event:last-child { border-bottom: none; }

.rotation-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--ah-border);
    margin-top:    0.3rem;
    flex-shrink:   0;
}
.rotation-dot.create { background: #22c55e; }
.rotation-dot.rotate { background: #f59e0b; }
.rotation-dot.revoke { background: var(--ah-danger); }

.rotation-action { font-size: 0.78rem; font-weight: 600; color: var(--ah-text); }
.rotation-meta   { font-size: 0.68rem; color: var(--ah-text-muted); }

/* ── 21. Tier / Device selector ───────────────────────────────────────── */
.tier-selector   { display: flex; flex-direction: column; gap: 0.5rem; }
.device-selector { display: flex; flex-direction: column; gap: 0.5rem; }

.tier-option,
.device-option {
    border:        1px solid var(--ah-border);
    border-radius: var(--ah-radius-md);
    padding:       1rem 1.25rem;
    cursor:        pointer;
    transition:    all 0.15s;
}
.tier-option:hover,
.device-option:hover { border-color: var(--ah-text-muted); background: var(--ah-bg-subtle); }

.tier-option.selected,
.device-option.selected { border-color: var(--ah-text); background: var(--ah-bg-subtle); }

.tier-option.disabled { opacity: 0.4; cursor: not-allowed; }

.tier-option-header {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    margin-bottom: 0.25rem;
}

.tier-option-level {
    font-family:   'JetBrains Mono', 'Noto Sans KR', 'Noto Sans JP', monospace;
    font-size:     0.7rem;
    font-weight:   800;
    color:         var(--ah-text);
    background:    var(--ah-bg-surface);
    padding:       0.15rem 0.5rem;
    border-radius: var(--ah-radius-sm);
}

.tier-option-name  { font-size: 0.8rem; font-weight: 700; color: var(--ah-text); }
.tier-option-desc  { font-size: 0.75rem; color: var(--ah-text-sub); }
.tier-option-tech  { font-size: 0.68rem; color: var(--ah-text-muted); margin-top: 0.15rem; }

.tier-locked-badge {
    font-size:     0.6rem;
    font-weight:   600;
    color:         var(--ah-danger);
    background:    var(--ah-danger-bg);
    padding:       0.1rem 0.4rem;
    border-radius: var(--ah-radius-sm);
    border:        1px solid var(--ah-danger-border);
    margin-left:   auto;
}

.device-option-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.device-option-name   { font-size: 0.8rem; font-weight: 700; color: var(--ah-text); }

/* ── 22. Toggle switch ────────────────────────────────────────────────── */
.toggle-switch {
    width:         40px;
    height:        22px;
    border-radius: 11px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    padding:       2px;
    transition:    background 0.2s;
    flex-shrink:   0;
}
.toggle-switch.on  { background: var(--ah-toggle-on, #1a1a2e); }
.toggle-switch.off { background: var(--ah-border); }

.toggle-knob {
    width:         18px;
    height:        18px;
    border-radius: 50%;
    background:    #ffffff;
    box-shadow:    0 1px 3px rgba(0, 0, 0, 0.2);
    transition:    transform 0.2s;
}
.toggle-switch.on  .toggle-knob { transform: translateX(18px); }
.toggle-switch.off .toggle-knob { transform: translateX(0); }

/* ── 23. Empty state ──────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ah-text-muted); }
.empty-icon  { font-size: 2rem; margin-bottom: 0.5rem; display: block; }
.empty-text  { font-size: 0.85rem; font-weight: 600; }

/* ── 24. Utility ──────────────────────────────────────────────────────── */
.mono { font-family: 'JetBrains Mono', 'Noto Sans KR', 'Noto Sans JP', monospace; }

/* ── 25. Checkbox (global, unified) ───────────────────────────────────────
   [2026-06-17] 기준 = Device Identity 테이블의 기본(raw) 체크박스 룩
   (브라우저 기본 파란색 + 작은 사이즈). 기존 .member-checkbox / .notif-checkbox 의
   16px·인디고(accent-color: var(--ah-link)) 를 대체해 앱 전체 선택 체크박스를 동일하게 통일한다.
   accent-color 는 지정하지 않아 브라우저 기본 파란색을 유지한다. */
.ah-checkbox {
    width:          14px;
    height:         14px;
    cursor:         pointer;
    vertical-align: middle;
}

/* ── 26. Bulk selection bar (global, unified) ─────────────────────────────
   [2026-06-17] 기준 = Device Identity 의 'N selected' 액션 바. Members / Notifications
   도 동일하게 이 클래스를 공유한다. 라이트모드 값(#f1f5f9 / #e2e8f0)이 곧 토큰이라
   var(--ah-bg-surface) / var(--ah-border) 로 두면 라이트는 동일 + 다크모드도 정상. */
.ah-bulk-bar {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.6rem 1rem;
    margin-bottom:   0.6rem;
    background:      var(--ah-bg-surface);
    border:          1px solid var(--ah-border);
    border-radius:   8px;
    font-size:       0.85rem;
}
.ah-bulk-actions { display: flex; gap: 0.5rem; }

.ah-btn-secondary {
    background:    var(--ah-bg);
    color:         var(--ah-text-sub);
    border:        1px solid var(--ah-border);
    font-size:     0.8rem;
    font-weight:   600;
    padding:       0.5rem 1.1rem;
    border-radius: 6px;
    cursor:        pointer;
    transition:    background 0.15s;
}
.ah-btn-secondary:hover    { background: var(--ah-bg-subtle); }
.ah-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.ah-btn-danger {
    background:    var(--ah-danger-bg);
    color:         var(--ah-danger);
    border:        1px solid var(--ah-danger-border);
    font-size:     0.8rem;
    font-weight:   700;
    padding:       0.55rem 1rem;
    border-radius: 6px;
    cursor:        pointer;
    transition:    opacity 0.15s;
}
.ah-btn-danger:hover    { opacity: 0.85; }
.ah-btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* [2026-07-09] AhSelect — 커스텀 팝업 드롭다운 (native <select> 대체, 전역). */
.ah-select { position: relative; width: 100%; }
.ah-select.is-disabled { opacity: 0.6; pointer-events: none; }
.ah-select-btn {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    width: 100%; background: var(--ah-bg); border: 1px solid var(--ah-border); color: var(--ah-text);
    font-size: 0.85rem; font-weight: 500; padding: 0.6rem 0.85rem; border-radius: var(--ah-radius);
    cursor: pointer; text-align: left; transition: border-color 0.12s, box-shadow 0.12s;
}
.ah-select-btn:hover { border-color: #cbd5e1; }
.ah-select-btn.open { border-color: var(--ah-focus-color); box-shadow: var(--ah-focus-ring); }
.ah-select-btn i { color: #64748b; font-size: 0.7rem; flex-shrink: 0; transition: transform 0.12s; }
.ah-select-btn.open i { transform: rotate(180deg); }
.ah-select-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-select-label.placeholder { color: var(--ah-text-placeholder); }
.ah-select-backdrop { position: fixed; inset: 0; z-index: 1000; background: transparent; }

/* [2026-07-11] 전화 입력 행 — AhSelect(div)는 bootstrap input-group 정렬을 못 받아 높이/라운드 어긋남.
   3요소(국가선택·번호입력·Verify)를 동일 고정높이(box-sizing)로 정합. */
.ah-phone-row { display: flex; gap: 8px; align-items: center; }
.ah-phone-row > .ah-select { flex: 0 0 220px; }
.ah-phone-row > .form-control { flex: 1 1 auto; }
.ah-phone-row .ah-select-btn { height: 44px; box-sizing: border-box; }
.ah-phone-row .form-control {
    height: 44px; box-sizing: border-box; padding: 0 0.85rem; font-size: 0.85rem;
    border-radius: var(--ah-radius);
}
.ah-phone-row .btn {
    height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 1.1rem; font-size: 0.85rem; font-weight: 600; border-radius: var(--ah-radius); white-space: nowrap;
}
.ah-select-menu {
    display: none; position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 1001;
    min-width: 100%; background: var(--ah-bg); border: 1px solid var(--ah-border); border-radius: 10px;
    box-shadow: var(--ah-shadow-lg); padding: 0.35rem; max-height: 300px; overflow-y: auto;
    flex-direction: column;
}
.ah-select-menu.open { display: flex; }
.ah-select-item {
    display: flex; align-items: center; gap: 0.4rem; width: 100%; border: none; background: none;
    text-align: left; font-size: 0.82rem; font-weight: 500; color: var(--ah-text);
    padding: 0.5rem 0.7rem; border-radius: 6px; cursor: pointer; transition: background 0.12s;
}
.ah-select-item:hover:not(:disabled) { background: var(--ah-bg-subtle); color: var(--ah-text); }
.ah-select-item.sel { background: #0f172a; color: #fff; font-weight: 600; }
.ah-select-item:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── 27. Page header (대시보드 페이지 머리 — 단일 정본) ───────────────────
   [2026-08-05 Sonny] 페이지 제목/부제가 5가지 마크업으로 갈라져 크기·굵기·
   색이 페이지마다 달랐다(1.15/1.3/h2기본, 700/800, text-dark 고정색).
   Dashboard "Test Workspace" 머리를 기준으로 삼아 여기 하나로 통일한다.
   마크업은 직접 쓰지 말고 <PageHeader> 컴포넌트를 쓸 것.
   ---------------------------------------------------------------------- */
.ah-page-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   1.25rem;
}

.ah-page-header-main { min-width: 0; flex: 1 1 auto; }

/* Leading(아이콘/아바타)이 있을 때 제목 묶음이 그 오른쪽으로 붙도록 */
.ah-page-header > .ah-page-header-main:not(:first-child) { margin-left: 0.9rem; }

/* 제목 옆 칩/뱃지(예: "Application Group")를 붙이는 줄 */
.ah-page-title-row {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    flex-wrap:   wrap;
}

.ah-page-title {
    margin:         0;
    font-size:      1.15rem;
    font-weight:    700;
    color:          var(--ah-text);
    letter-spacing: -0.3px;
    line-height:    1.3;
}

.ah-page-subtitle {
    margin:      3px 0 0;
    font-size:   0.72rem;
    color:       var(--ah-text-muted);
    line-height: 1.5;
}

/* 부제 안에서 강조한 이름(org/group)은 muted 보다 한 단계 진하게 */
.ah-page-subtitle strong,
.ah-page-subtitle b { color: var(--ah-text-sub); font-weight: 600; }

.ah-page-header-actions {
    display:     flex;
    gap:         8px;
    align-items: center;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .ah-page-header { flex-direction: column; align-items: stretch; }
    .ah-page-header-actions { flex-wrap: wrap; }
}

/* ── 15. 모바일 대응 ──────────────────────────────────────────────────────
   [2026-08-08 responsive] 폰(≤640px) 공통 — 모달·카드·액션 줄. 페이지별 scoped css 를
   478개 다 고칠 수 없으니, 모든 화면이 공유하는 이 어휘 층에서 잡는다. */
@media (max-width: 640px) {
    .modal-overlay { padding: 0.75rem; }

    .modal-panel {
        width:      96%;
        padding:    1.5rem 1.25rem;
        max-height: 92dvh;
    }

    .card-panel { padding: 1.1rem; margin-bottom: 1.1rem; }

    .modal-actions,
    .actions-bar,
    .ah-bulk-bar { flex-wrap: wrap; }

    /* iOS Safari 는 포커스된 입력의 글자가 16px 미만이면 화면 전체를 자동 확대한다.
       rem 이 아니라 px 로 못박아야 root 축소와 무관하게 확대가 안 일어난다. */
    .field-input,
    .field-select,
    .field-textarea { font-size: 16px; }

    .danger-row {
        flex-direction: column;
        align-items:    flex-start;
        gap:            0.6rem;
    }

    .signing-key-row { flex-wrap: wrap; }
    .secret-display  { flex-wrap: wrap; word-break: break-all; }
}