/* MyForm Unified Theme (Light & Dark) */
:root {
  --color-bg: #f5f7fb;
  --color-bg-alt: #ffffff;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-text: #1e293b;
  --color-text-secondary: #475569;
  --color-primary: #5865F2;
  --color-primary-accent: #4752C4;
  --color-danger: #ED4245;
  --color-danger-accent: #D63638;
  --color-success: #45C46A;
  --color-warning: #FFC107;
  --color-muted: #94a3b8;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.1);
  --shadow-md: 0 2px 6px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --gradient-premium: linear-gradient(135deg,#FFD700,#FFA500);
  --transition: .18s cubic-bezier(.4,0,.2,1);
}
:root.dark {
  --color-bg: #0f172a;
  --color-bg-alt: #111c33;
  --color-surface: #1e293b;
  --color-border: #293445;
  --color-text: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-primary: #7081ff;
  --color-primary-accent: #5b6bdf;
  --color-danger: #f87171;
  --color-danger-accent: #dc2626;
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-muted: #64748b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 2px 8px rgba(0,0,0,.55),0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.55);
}
html { box-sizing: border-box; }
*,*::before,*::after { box-sizing: inherit; }
body {
  margin:0; font-family:'Inter','Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  transition: background .3s, color .3s;
}
/* Global form elements */
input[type=text], input[type=number], input[type=password], input[type=email], textarea, select {
  width:100%; padding:.7rem .8rem; border:1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text);
  font: 500 .9rem/1.3 inherit; transition: var(--transition);
}
textarea { resize: vertical; min-height:80px; }
input:focus, textarea:focus, select:focus { outline:2px solid var(--color-primary); outline-offset:1px; }
label { font-size:.75rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; display:block; margin:0 0 .4rem; color: var(--color-text-secondary); }
.form-group { margin-bottom:1.15rem; }
.inline-note { font-size:.65rem; color: var(--color-text-secondary); margin:.25rem 0 .75rem; }

/* Alerts */
.alert { padding:.85rem 1rem; border-radius: var(--radius-md); font-size:.8rem; font-weight:500; display:flex; align-items:center; gap:.6rem; box-shadow: var(--shadow-sm); }
.alert-error { background: var(--color-danger); color:#fff; }
.alert-success { background: var(--color-success); color:#032c1d; }
.alert-warning { background: var(--color-warning); color:#3a2802; }

/* Question builder */
.questions-container { display:flex; flex-direction:column; gap:.8rem; }
.question-item { background: var(--color-bg-alt); border:1px solid var(--color-border); border-left:4px solid var(--color-primary); padding: .9rem .9rem .7rem; border-radius: var(--radius-md); position:relative; }
.question-item textarea.question-text { min-height:46px; max-height:140px; }
.remove-question { position:absolute; top:.45rem; right:.45rem; background: var(--color-danger); color:#fff; border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; display:grid; place-items:center; font-weight:700; }
.remove-question:hover { background: var(--color-danger-accent); }
.btn-add-question { margin-top:.75rem; }

/* AI modal custom (reuse .modal container if wanted) */
.ai-modal { position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:1.25rem; z-index:300; }
.ai-modal-content { background: var(--color-surface); width:100%; max-width:440px; border:1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding:1.1rem 1.15rem 1.25rem; overflow-y:auto; max-height:90vh; }
.ai-modal-content h3 { margin:0 0 1rem; font-size:1rem; font-weight:600; color: var(--color-primary); letter-spacing:.5px; }

/* Premium badge reuse override inside dark */
.premium-badge { font-size:.6rem; letter-spacing:.5px; }

/* Support toggle switch */
.toggle-switch { position:relative; width:54px; height:28px; background: var(--color-border); border-radius:50px; cursor:pointer; transition: var(--transition); display:inline-flex; align-items:center; padding:3px; }
.toggle-switch .toggle-slider { width:22px; height:22px; background: var(--color-surface); border-radius:50%; box-shadow: var(--shadow-sm); transform:translateX(0); transition: var(--transition); }
.toggle-switch.active { background: var(--color-success); }
.toggle-switch.active .toggle-slider { transform: translateX(26px); }

/* Status pages layout helper */
.status-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; }
.status-card { width:100%; max-width:640px; }

/* Utility text */
.text-center { text-align:center; }
.mt-sm { margin-top:.5rem; } .mt-md { margin-top:1rem; } .mt-lg { margin-top:1.5rem; }
.mb-sm { margin-bottom:.5rem; } .mb-md { margin-bottom:1rem; } .mb-lg { margin-bottom:1.5rem; }

/* Experimental AI button */
.ai-generation { background: linear-gradient(135deg, var(--color-primary), #7c3aed); color:#fff; border:none; border-radius: var(--radius-md); padding:.75rem 1.1rem; font-weight:600; display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; position:relative; overflow:hidden; transition: var(--transition); }
.ai-generation:hover { filter:brightness(.95); transform: translateY(-2px); }
.ai-generation:disabled { opacity:.55; cursor:not-allowed; }

/* Loading spinner inline */
.loading { display:inline-block; width:20px; height:20px; border:3px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation: spin 1s linear infinite; }

/* Simple chips */
.status-badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.65rem; padding:.3rem .65rem; border-radius:40px; font-weight:600; letter-spacing:.5px; background: var(--color-bg-alt); border:1px solid var(--color-border); }
.status-active { background: rgba(34,197,94,.15); color: var(--color-success); }
.status-inactive { background: rgba(239,68,68,.15); color: var(--color-danger); }

/* Review / inline checkboxes */
.checkbox-group { display:flex; align-items:flex-start; gap:.55rem; font-size:.8rem; }
.checkbox-group input[type=checkbox] { width:18px; height:18px; margin-top:.15rem; }

/* Helper hide class already exists (.hidden) */

/* Media tweaks */
@media (max-width:640px){
  input[type=text], input[type=number], textarea, select { font-size:.85rem; }
  .ai-modal-content { max-width:100%; }
}
img { max-width:100%; display:block; }
a { color: var(--color-primary); text-decoration:none; }
a:hover { color: var(--color-primary-accent); }

.container { width:100%; max-width:1220px; margin:0 auto; padding:1.5rem 1.25rem; }

/* Utility */
.flex { display:flex; }
.grid { display:grid; }
.hidden { display:none !important; }
.center { justify-content:center; align-items:center; }
.full-center { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.narrow { width:100%; max-width:640px; margin:0 auto; }
.prose { line-height:1.6; font-size:.95rem; }
.badge { display:inline-block; padding:.25rem .55rem; border-radius:40px; font-size:.65rem; font-weight:600; letter-spacing:.5px; background:var(--color-bg-alt); border:1px solid var(--color-border); }
.status-hero { text-align:center; padding:2.25rem 1.5rem 2.4rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); position:relative; overflow:hidden; color:#fff; }
/* Improve contrast in dark mode by forcing light text on vivid gradients */
.status-hero.success { background: linear-gradient(135deg,#34d399,#059669); }
.status-hero.danger { background: linear-gradient(135deg,#f87171,#dc2626); }
.status-hero.warning { background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.status-hero h1, .status-hero h2, .status-hero p, .status-hero a, .status-hero li { color:#fff; }
.status-hero .inline-note { background:rgba(0,0,0,.25); color:#fff; }
.status-icon { font-size:4rem; line-height:1; margin-bottom:.75rem; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.gap-sm { gap:.5rem; } .gap-md { gap:1rem; } .gap-lg { gap:1.5rem; }
.text-secondary { color: var(--color-text-secondary); }
.muted { color: var(--color-muted); }
.round { border-radius:50%; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.card {
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg);
  padding:1.25rem 1.15rem; box-shadow: var(--shadow-sm); position:relative; overflow:hidden;
  transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Card placed inside gradient status hero needs translucent styling for readability */
.status-hero .card { 
  background: rgba(255,255,255,.18); 
  border:1px solid rgba(255,255,255,.35); 
  color:#fff; 
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
:root.dark .status-hero .card { 
  background: rgba(0,0,0,.35); 
  border:1px solid rgba(255,255,255,.18); 
  color:#fff; 
}
.status-hero .card h1, .status-hero .card h2, .status-hero .card h3, .status-hero .card p, .status-hero .card li, .status-hero .card a { color:#fff; }
.status-hero .card .inline-note { background:rgba(0,0,0,.25); color:#fff; }

/* Buttons */
.button { --btn-bg: var(--color-primary); --btn-bg-hover: var(--color-primary-accent); --btn-color:#fff; --btn-border:transparent; font:600 0.95rem/1.2 inherit; padding:.75rem 1rem; border-radius: var(--radius-md); border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--btn-color); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-align:center; text-decoration:none; transition: var(--transition); position:relative; }
.button:hover { background: var(--btn-bg-hover); color: var(--btn-color); }
.button:disabled { opacity:.55; cursor:not-allowed; }
.button.secondary { --btn-bg: var(--color-muted); --btn-bg-hover:#7a8696; }
.button.outline { --btn-bg:transparent; --btn-bg-hover:rgba(0,0,0,.04); --btn-color: var(--color-text); --btn-border: var(--color-border); }
:root.dark .button.outline { --btn-bg-hover: rgba(255,255,255,.08); }
.button.danger { --btn-bg: var(--color-danger); --btn-bg-hover: var(--color-danger-accent); }
.button.success { --btn-bg: var(--color-success); --btn-bg-hover:#22c55e; }
.button.warning { --btn-bg: var(--color-warning); --btn-bg-hover:#e0a800; color:#222; }
.button.premium { background: var(--gradient-premium); border:none; color:#fff; font-weight:700; }
.button.premium:hover { filter:brightness(.95); }
.button.outline.danger { --btn-bg:transparent; --btn-color: var(--color-danger); --btn-border: var(--color-danger); }
.button.outline.danger:hover { background: rgba(237,66,69,.12); color: var(--color-danger); }
.button.outline.success { --btn-bg:transparent; --btn-color: var(--color-success); --btn-border: var(--color-success); }
.button.outline.success:hover { background: rgba(69,196,106,.15); color: var(--color-success); }
.button.outline.warning { --btn-bg:transparent; --btn-color: var(--color-warning); --btn-border: var(--color-warning); }
.button.outline.warning:hover { background: rgba(255,193,7,.15); color: var(--color-warning); }
/* Premium outline variant keeps gradient border illusion via inset box-shadow */
.button.outline.premium { --btn-bg:transparent; --btn-color:#fff; --btn-border:rgba(255,255,255,.6); position:relative; }
.button.outline.premium:hover { background:rgba(255,255,255,.12); }
.button.outline.premium::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:var(--gradient-premium); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.small { padding:.55rem .75rem; font-size:.8rem; }

/* Center helper when needed */
.center-content { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }

/* Header / Navbar */
.navbar { backdrop-filter: blur(12px); background: linear-gradient(90deg, rgba(88,101,242,.15), rgba(255,255,255,.4)); border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:50; }
:root.dark .navbar { background: linear-gradient(90deg, rgba(112,129,255,.15), rgba(20,30,50,.55)); }
.navbar-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { font-weight:700; font-size:1.1rem; display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; }
.brand-badge { background: var(--color-primary); color:#fff; padding:.15rem .55rem; font-size:.65rem; border-radius: var(--radius-sm); letter-spacing:.5px; }

/* Theme toggle */
.theme-toggle { width:48px; height:26px; background: linear-gradient(135deg, var(--color-border), rgba(255,255,255,.6)); border-radius:50px; position:relative; cursor:pointer; transition: var(--transition); display:inline-flex; align-items:center; padding:2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.15); }
.theme-toggle::after { content:""; position:absolute; inset:1px; border-radius:50px; background: linear-gradient(135deg,#1e2533,#2d3647); opacity:.55; transition: var(--transition); }
.theme-toggle .thumb { width:22px; height:22px; position:relative; z-index:2; background: var(--color-surface); border-radius:50%; box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.3); transform: translateX(0); transition: var(--transition); display:grid; place-items:center; font-size:.7rem; }
:root.dark .theme-toggle { background: linear-gradient(135deg,#1c2533,#2b3344); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.6); }
:root.dark .theme-toggle::after { background: linear-gradient(135deg,#2a3647,#3a475b); opacity:.9; }
:root.dark .theme-toggle .thumb { transform: translateX(22px); background: linear-gradient(135deg,#253042,#1b2432); box-shadow: 0 2px 4px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
html:not(.dark) .theme-toggle .thumb { transform: translateX(0); }

/* Avatar chip */
.user-chip { display:flex; align-items:center; gap:.7rem; padding:.35rem .85rem; background: var(--color-surface); border:1px solid var(--color-border); border-radius: 40px; box-shadow: var(--shadow-sm); }
.user-chip img { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.user-chip .name { font-weight:600; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Guild grid */
.guild-grid { display:grid; gap:1.25rem; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); margin-top:1.5rem; }
.guild-card { padding:0; display:flex; flex-direction:column; }
.guild-banner { height:110px; background:linear-gradient(135deg,var(--color-primary),var(--color-primary-accent)); display:flex; align-items:center; justify-content:center; font-size:2.2rem; font-weight:700; color:#fff; letter-spacing:1px; position:relative; }
.guild-banner img { width:100%; height:100%; object-fit:cover; }
.guild-body { padding:1rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.guild-title { font-size:1.05rem; font-weight:600; margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; color: var(--color-primary); }
:root.dark .guild-title { color: var(--color-text); }
.guild-meta { font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; color: var(--color-muted); font-weight:600; }
.actions { margin-top:auto; display:flex; flex-direction:column; gap:.5rem; }
.premium-badge { background: var(--gradient-premium); color:#fff; font-size:.55rem; padding:.25rem .5rem; border-radius:20px; letter-spacing:.5px; font-weight:700; display:inline-flex; align-items:center; gap:.25rem; }

/* Forms list */
.forms-wrapper { margin-top:1.5rem; }
.back-link { display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color: var(--color-primary); cursor:pointer; padding:.55rem .9rem; border-radius: var(--radius-md); background: var(--color-surface); border:1px solid var(--color-border); box-shadow: var(--shadow-sm); margin-bottom:1rem; }
.back-link:hover { background: var(--color-bg-alt); }
.form-list { display:flex; flex-direction:column; gap:1rem; }
.form-item { padding:0; overflow:hidden; }
.form-head { background: var(--color-primary); color:#fff; padding:.85rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
:root.dark .form-head { background: var(--color-primary-accent); }
.form-head h3 { margin:0; font-size:1rem; font-weight:600; letter-spacing:.3px; }
.form-inner { padding:1rem 1rem 1.15rem; display:grid; gap:.75rem; }
.form-stats { display:flex; flex-wrap:wrap; gap:1rem; font-size:.8rem; }
.form-stats span { background: var(--color-bg-alt); padding:.35rem .6rem; border-radius: var(--radius-sm); border:1px solid var(--color-border); font-weight:500; }
.toggle-row { display:flex; flex-wrap:wrap; gap:.5rem; }

/* Empty / loading */
.state-box { text-align:center; padding:3rem 1rem; border:2px dashed var(--color-border); border-radius: var(--radius-lg); }
.state-box h2 { margin:0 0 .5rem; font-size:1.15rem; }
.loader { width:42px; height:42px; border:4px solid rgba(88,101,242,.3); border-top-color: var(--color-primary); border-radius:50%; animation: spin 1s linear infinite; margin:0 auto 1rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Modal */
.modal { position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:1.25rem; z-index:200; }
.modal-panel { width:100%; max-width:460px; background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; }
.modal-header { padding:1rem 1.15rem; border-bottom:1px solid var(--color-border); display:flex; align-items:center; justify-content:space-between; }
.modal-header h2 { margin:0; font-size:1rem; letter-spacing:.5px; }
.modal-body { padding:1rem 1.15rem; font-size:.9rem; line-height:1.4; }
.modal-footer { padding: .85rem 1.15rem 1.15rem; display:flex; justify-content:flex-end; gap:.6rem; border-top:1px solid var(--color-border); }

/* Responsive */
@media (max-width: 820px) {
  .navbar-inner { flex-wrap:wrap; }
  .guild-grid { grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); }
  .user-chip .name { max-width:100px; }
}
@media (max-width: 540px) {
  .container { padding:1.1rem .95rem 3rem; }
  .guild-grid { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap:.9rem; }
  .navbar-inner { gap:.75rem; }
  .brand { font-size:1rem; }
  .user-chip { padding:.3rem .65rem; }
  .user-chip img { width:30px; height:30px; }
  .button { padding:.65rem .8rem; font-size:.8rem; }
  .actions .button { font-size:.75rem; padding:.55rem .65rem; }
}