:root{
    --bg:#0f1720;
    --card:#0f1725;
    --muted:#9aa4b2;
    --accent:#5865f2;
    --accent-2:#4756d8;
    --surface:#0b0f14;
    --glass:rgba(255,255,255,0.03);
    --radius:12px;
    --gap:16px;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Utility helpers */
.hidden{display:none !important}

/* Layout */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:linear-gradient(180deg,var(--bg),#071018 120%);
    color:#e6eef6;
}
.container{max-width:1100px;margin:28px auto;padding:0 18px}
.page{min-height:70vh}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 18px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.01));backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.08);box-shadow:0 4px 16px rgba(0,0,0,0.3);position:sticky;top:0;z-index:100}
.topbar-left{display:flex;align-items:center;gap:16px}
.topbar-logo{display:inline-block}
.topbar-logo img{width:40px;height:40px;border-radius:6px;object-fit:contain}
.brand{font-weight:700;font-size:1.25rem;color:var(--accent);white-space:nowrap}
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-actions input#guild-search{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.05);background:var(--surface);color:var(--muted);min-width:220px}
.top-actions{display:flex;gap:8px}

/* profile avatar */
.profile-container{display:flex;align-items:center;gap:8px;position:relative}
.profile-img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.04);cursor:pointer;transition:transform 160ms ease}
.profile-img:hover{transform:scale(1.08)}
.profile-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid rgba(255,255,255,0.08);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.3);min-width:140px;z-index:1000;overflow:hidden}
.profile-dropdown.hidden{display:none}
.dropdown-item{display:block;padding:10px 16px;color:#9aa4b2;text-decoration:none;font-size:0.9rem;transition:all 160ms ease;border-bottom:1px solid rgba(255,255,255,0.04)}
.dropdown-item:last-child{border-bottom:none}
.dropdown-item:hover{background:rgba(88,101,242,0.12);color:var(--accent)}

/* Cards */
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),var(--glass));backdrop-filter:blur(6px);padding:18px;border-radius:var(--radius);box-shadow:0 8px 30px rgba(2,6,23,0.6);margin-bottom:var(--gap)}
.center{text-align:center}
.title{margin:0 0 8px 0}
.muted{color:var(--muted);font-size:0.95rem}

/* Buttons */
.btn{border:0;padding:8px 12px;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.btn.primary{background:var(--accent);color:#fff}
.btn:hover{filter:brightness(.95)}

/* Guild grid */
.guild-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.guild-card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent)}
.guild-card img{width:48px;height:48px;border-radius:8px;object-fit:cover}
.guild-card .meta{flex:1}
.guild-card h4{margin:0;font-size:1rem}
.guild-card p{margin:3px 0 0 0;color:var(--muted);font-size:0.9rem}

/* Forms and grid */
.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.form-col{display:flex;flex-direction:column;gap:8px}
/* Inline pair for side-by-side fields */
.inline-pair{display:flex;gap:12px;align-items:start}
.inline-pair .field{flex:1;display:flex;flex-direction:column;gap:6px}
label{font-weight:600;color:#eaf0ff}
select,input,textarea{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:#061018;color:#eaf0ff}

/* Anti-Ping fieldset styling to match modern dashboard look */
.antiping-group label{font-weight:600;color:#eaf0ff;margin:0}
.antiping-group textarea{min-height:44px;max-height:160px}
.antiping-row{display:flex;align-items:center;gap:8px}

@media(max-width:820px){
    .antiping-group{grid-column:1 / -1}
}
.full-width{grid-column:1 / -1;display:flex;gap:8px;align-items:center}
.inline-form{display:flex;gap:8px;align-items:center}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{padding:8px 12px;border-radius:8px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);cursor:pointer;color:var(--muted);transition:all 160ms ease}
.tab:hover{filter:brightness(1.05);transform:translateY(-1px)}
.tab.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 6px 18px rgba(71,86,216,0.18);border-color:rgba(71,86,216,0.25)}
.panel-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.panel-preview{margin-top:12px}

/* Ticket buttons list: render items inline (two-per-row) to match other fields */
.buttons-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.button-card{background:#071223;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1 1 calc(50% - 12px);min-width:220px;box-sizing:border-box}
.button-card .meta{display:flex;flex-direction:column;gap:4px}
.btn-small{padding:6px 10px;border-radius:8px;border:0;background:var(--accent);color:#fff;cursor:pointer;font-size:0.9rem}
.btn-small.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}

@media(max-width:820px){
    .buttons-list .button-card{flex-basis:100%}
}


/* Subtabs (used in Ticket Config: Editor / Creator) */
.subtabs{display:flex;gap:8px;margin-bottom:12px}
.subtab{padding:6px 10px;border-radius:8px;background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.04);cursor:pointer;color:var(--muted);transition:all 140ms ease}
.subtab:hover{filter:brightness(1.03);transform:translateY(-1px)}
.subtab.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 6px 16px rgba(71,86,216,0.12);border-color:rgba(71,86,216,0.18)}

/* Tab content spacing */
.tab-content{padding-top:8px}

/* role-dropdown */
.role-dropdown{position:relative}
.role-dropdown-display{padding:10px;border-radius:8px;background:#061018;border:1px solid rgba(255,255,255,0.04);cursor:pointer}
.role-list{position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:260px;background:#051015;border-radius:8px;overflow:auto;padding:8px;border:1px solid rgba(255,255,255,0.02);box-shadow:0 6px 18px rgba(1,6,12,0.6);z-index:40}
.role-item{padding:8px;border-radius:6px}
.role-item.selected{background:rgba(88,101,242,0.12);font-weight:700}
.selected-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.role-chip{background:#071224;padding:6px 8px;border-radius:12px;color:var(--muted)}

/* toast */
.toast{position:fixed;right:18px;bottom:18px;min-width:240px;max-width:360px;border-radius:10px;padding:12px;background:#081029;color:#fff;box-shadow:0 8px 30px rgba(0,0,0,0.6);display:none}
.toast.show{display:block}

/* Responsive */
@media(max-width:820px){
    .grid-form{grid-template-columns:1fr}
    .nav-actions input#guild-search{min-width:120px}
}

/* Transcripts list styling */
.transcript-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px}
.transcript-header{display:flex;flex-direction:column}
.transcript-title{font-weight:700}
.transcript-actions{display:flex;gap:8px}
.transcript-meta{font-size:0.9rem;color:var(--muted)}

/* Theme for injected transcript HTML */
.transcript-html{background:var(--surface);color:#0f1720;padding:18px;border-radius:8px}
.transcript-html .message{padding:12px;border-radius:8px;margin-bottom:8px;background:linear-gradient(90deg,rgba(255,255,255,0.01),transparent);border:1px solid rgba(255,255,255,0.02)}
.transcript-html .meta{color:var(--muted);font-size:12px;margin-bottom:6px}
.transcript-html .content{white-space:pre-wrap}
.transcript-html .embed{border-left:4px solid var(--accent);padding:8px;margin-top:8px;background:rgba(71,86,216,0.03);border-radius:6px}
.transcript-html .embed .embed-title{font-weight:700}
.transcript-html .embed .embed-desc{margin-top:6px}
.transcript-html .embed .embed-fields{margin-top:6px}
.transcript-html .embed-image img{max-width:100%;height:auto;border-radius:6px;margin-top:8px}
.transcript-html .component-row{margin-top:8px}
.transcript-html .component-btn{display:inline-block;padding:6px 10px;border-radius:6px;background:rgba(255,255,255,0.03);color:var(--muted);margin-right:6px;text-decoration:none}
.transcript-html a{color:var(--accent)}

/* Footer */
.footer {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), var(--glass));
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 60px;
    padding: 40px 18px 20px;
    color: #9aa4b2;
    /* 1. Ensures the overall footer container fills the width to allow proper centering */
    width: 100%; 
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 32px;
    justify-content: center; 
}

.footer-section {
    flex: 1;
    min-width: 250px; 
    max-width: 500px; 
    /* 2. Centers the text and list items inside each individual section */
    text-align: center; 
}

.footer-section h4 {
    margin: 0 0 12px 0;
    color: #eaf0ff;
    font-size: 0.95rem;
    font-weight: 600;
}

.footer-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* 3. Centers the flex-direction: column links horizontally */
    align-items: center; 
}

.footer-section a {
    color: #9aa4b2;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 160ms ease;
}

.footer-section a:hover {
    color: var(--accent);
}

.footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    text-align: center;
    color: #5f6a77;
    font-size: 0.85rem;
}

.footer-bottom p {
    margin: 0;
}


@media(max-width:820px){
    .footer-content{grid-template-columns:1fr 1fr;gap:24px}
    .footer{padding:32px 18px 16px}
}

@media(max-width:480px){
    .footer-content{grid-template-columns:1fr;gap:20px}
}