@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#0d0918;--panel:#171126;--panel2:#201832;--line:#302441;--text:#f7f2ff;--muted:#a89bb9;--purple:#fefff7d8;--pink:#e08cff;--green:#70e0b0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Kanit,Inter,sans-serif;font-weight:300}a{color:inherit;text-decoration:none}.ambient{position:fixed;border-radius:50%;filter:blur(100px);opacity:.22;pointer-events:none}.a1{width:440px;height:440px;background:#f3f3f2d8;top:-180px;left:-100px}.a2{width:420px;height:420px;background:#d04dce;right:-150px;bottom:-160px}.landing{max-width:1180px;margin:auto;padding:30px 34px;position:relative}.nav{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;font:800 15px Inter,sans-serif;letter-spacing:1.4px}.brandmark{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:linear-gradient(140deg,#ffffff,#ffffff);font:800 20px Inter;box-shadow:0 8px 30px #e9f752d8}.muted{color:#ffffff;font-weight:500}.navtag,.eyebrow,.crumb,.side-label{font:600 10px Inter,sans-serif;letter-spacing:1.6px;color:#ffffff}.hero{min-height:550px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:40px;padding:60px 0 35px}.eyebrow{display:flex;align-items:center;gap:9px;color:#f5f5f5}.eyebrow i{width:7px;height:7px;border-radius:50%;background:#f7f7f7;box-shadow:0 0 14px #ffffff}h1{font-size:clamp(42px,6vw,70px);line-height:1.17;font-weight:600;margin:23px 0 18px;letter-spacing:-1.5px}h1 span{background:linear-gradient(90deg,#b98aff,#f29bdc);-webkit-background-clip:text;color:transparent}.hero p{font-size:16px;line-height:1.9;color:#b9adc7;max-width:520px}.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:30px}.primary{border:0;border-radius:13px;padding:14px 20px;background:linear-gradient(110deg,#8c5bf0,#c16be4);color:white;font:500 14px Kanit;display:inline-flex;align-items:center;gap:11px;cursor:pointer;box-shadow:0 9px 28px #ebebebd8}.primary svg{width:20px;height:20px}.primary span{opacity:.7}.hero-actions small{color:#eeefeb;font-size:11px}.hero-art{height:390px;position:relative;display:grid;place-items:center}.orb{position:absolute;width:330px;height:330px;border-radius:50%;background:linear-gradient(140deg,#e4e4e4fa,#f2f7b5d8);filter:blur(2px);opacity:.45;box-shadow:0 0 120px #a64aff88}.glass-card{position:relative;width:min(100%,380px);padding:25px;border:1px solid #ffffff26;border-radius:25px;background:linear-gradient(145deg,#ffffff19,#ffffff08);backdrop-filter:blur(20px);box-shadow:0 30px 80px #0008;transform:rotate(-3deg)}.glass-top{display:flex;justify-content:space-between;color:#aa9db8;font:600 9px Inter;letter-spacing:1.2px}.glass-top b{color:#7be4b8}.mock-title{display:flex;align-items:center;gap:13px;margin:30px 0}.mock-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(140deg,#9763f4,#e58bd9);font:800 22px Inter}.mock-title strong,.mock-title small{display:block}.mock-title strong{font-size:16px}.mock-title small{color:#b2a4c0;font-size:11px}.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.mock-stats div{padding:13px 10px;border:1px solid #ffffff18;background:#ffffff08;border-radius:12px}.mock-stats strong,.mock-stats small{display:block}.mock-stats strong{font:700 17px Inter}.mock-stats small{font-size:10px;color:#b3a6c1}.mock-bars{height:76px;display:flex;align-items:end;gap:8px;margin-top:25px}.mock-bars i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(#e19aff,#8055e8);height:var(--h,50%)}.mock-bars i:nth-child(3n){--h:85%}.mock-bars i:nth-child(3n+1){--h:48%}.mock-bars i:nth-child(3n+2){--h:67%}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:10px 0 45px}.features article{padding:22px;border:1px solid #ffffff13;background:#ffffff08;border-radius:17px}.features article span{display:block;color:#d49aff;font-size:23px;margin-bottom:12px}.features b,.features small{display:block}.features b{font-size:14px;font-weight:500}.features small{font-size:11px;color:#a99db6;margin-top:5px}footer{color:#796e87;font:500 9px Inter;letter-spacing:1.2px;text-align:center;padding:20px}.appbody{background:radial-gradient(ellipse at 70% -20%,#38204f 0,transparent 45%),#0e0a18;min-height:100vh}.app-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{border-right:1px solid #ffffff12;padding:25px 18px;display:flex;flex-direction:column;background:#100c1b}.side-label{margin:44px 10px 14px}.guild-list{display:flex;flex-direction:column;gap:7px}.guild-item{border:1px solid transparent;background:transparent;color:#b9adc6;text-align:left;padding:12px;border-radius:12px;display:flex;align-items:center;gap:11px;cursor:pointer;font:400 13px Kanit}.guild-item:hover,.guild-item.active{background:#8f5de51b;border-color:#a879ff44;color:#fff}.guild-icon{width:34px;height:34px;border-radius:11px;background:#35244b;display:grid;place-items:center;overflow:hidden;font:700 13px Inter}.guild-icon img{width:100%;height:100%;object-fit:cover}.side-bottom{margin-top:auto;border-top:1px solid #ffffff12;padding-top:17px}.profile{display:flex;align-items:center;gap:10px;font-size:12px;color:#e7ddf2;margin-bottom:12px}.profile img,.avatar{width:34px;height:34px;border-radius:50%;background:#5e3c85;object-fit:cover;display:grid;place-items:center}.logout{border:0;background:transparent;color:#9587a4;padding:8px 0;cursor:pointer;font:12px Kanit}.main{padding:30px clamp(20px,4vw,56px);max-width:1600px;width:100%;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff13;padding-bottom:22px}.crumb{font-size:9px}.crumb span{color:#d3b4ff}.topbar h1{font-size:26px;letter-spacing:0;margin:7px 0 0}.top-right{display:flex;align-items:center;gap:18px}.online-dot{color:#79dfb4;font:600 9px Inter;letter-spacing:1px}.avatar{font:700 14px Inter}.welcome{min-height:300px;margin-top:25px;padding:45px;border:1px solid #ffffff16;border-radius:23px;background:linear-gradient(115deg,#211532,#1a1226 55%,#302047);display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative}.welcome h2{font-size:34px;font-weight:500;margin:14px 0 3px}.welcome p,.section-heading p{color:#a99db6;font-size:13px}.welcome-symbol{font:800 190px Inter;color:#ffffff08;text-shadow:0 0 80px #c181ff55;margin-right:6%}.hidden{display:none!important}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 40px}.stat{padding:19px 21px;border:1px solid #ffffff13;border-radius:15px;background:#ffffff08}.stat small,.stat span{display:block;color:#a89bb8;font-size:11px}.stat strong{display:block;font:700 27px Inter;margin:7px 0}.stat span{font:600 8px Inter;letter-spacing:1.1px;color:#8d7c9e}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px}.section-heading h2{font-size:25px;font-weight:500;margin:5px 0}.section-heading p{margin:0}.search{width:230px;border:1px solid #ffffff1c;background:#191326;color:#fff;padding:11px 14px;border-radius:11px;font:12px Kanit;outline:none}.systems-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.system-card{border:1px solid #ffffff14;background:linear-gradient(145deg,#1b1429,#171121);border-radius:17px;padding:19px;transition:.2s}.system-card:hover{border-color:#a879ff77;transform:translateY(-2px)}.system-card-head{display:flex;align-items:center;justify-content:space-between}.system-icon{width:40px;height:40px;border-radius:13px;background:#9b6be51c;display:grid;place-items:center;font-size:19px}.status{font:600 9px Inter;letter-spacing:.5px;color:#8bdbb7}.status.off{color:#8e829c}.system-card h3{font-size:15px;font-weight:500;margin:15px 0 3px}.system-card p{font-size:11px;color:#9e91ad;margin:0 0 17px;min-height:35px}.card-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff12;padding-top:13px}.table-name{font:9px Inter;color:#766a83}.edit-btn{border:1px solid #a879ff55;color:#d9c1ff;background:#9b6be51a;padding:7px 12px;border-radius:9px;font:12px Kanit;cursor:pointer}.app-footer{text-align:left;padding:35px 0 10px}.app-footer span{color:#bd83fa;margin:0 6px}.modal{position:fixed;inset:0;background:#08050dbb;backdrop-filter:blur(9px);display:grid;place-items:center;padding:20px;z-index:10}.modal-panel{width:min(760px,100%);max-height:90vh;overflow:auto;background:#171122;border:1px solid #ffffff20;border-radius:21px;padding:25px;box-shadow:0 30px 100px #000b}.modal-head{display:flex;justify-content:space-between;align-items:start}.modal-head h2{font-size:24px;font-weight:500;margin:6px 0}.close{border:0;background:#ffffff0d;color:#c9bdd6;width:35px;height:35px;border-radius:10px;font-size:23px;cursor:pointer}.modal-desc{font-size:12px;color:#a99db8;margin:4px 0 20px}.editor{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:11px;color:#cbbbd8}.field input,.field select,.field textarea{width:100%;background:#100c19;border:1px solid #382b49;border-radius:10px;padding:11px 12px;color:#eee5f6;font:12px Kanit;outline:none}.field textarea{min-height:90px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:#a879ff}.field select option{background:#171122}.check-field{display:flex;align-items:center;gap:10px;padding:12px;background:#100c19;border:1px solid #382b49;border-radius:10px}.check-field input{accent-color:#a879ff;width:17px;height:17px}.check-field label{font-size:12px}.editor-empty{grid-column:1/-1;border:1px dashed #4b3b60;border-radius:12px;padding:18px;color:#a99db8;font-size:12px;line-height:1.8}.modal-actions{display:flex;align-items:center;gap:9px;border-top:1px solid #ffffff13;margin-top:22px;padding-top:17px}.ghost,.danger{background:transparent;border:1px solid #ffffff24;color:#c5b8d2;border-radius:10px;padding:10px 14px;font:12px Kanit;cursor:pointer}.danger{color:#ff9caa;border-color:#ff9caa55}.grow{flex:1}.toast{position:fixed;bottom:25px;right:25px;padding:12px 17px;border-radius:11px;background:#272039;border:1px solid #a879ff55;color:#eee;font-size:12px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none;z-index:20}.toast.show{opacity:1;transform:translateY(0)}.loading{color:#91849f;font-size:12px;padding:10px}.empty{color:#91849f;font-size:12px;padding:20px}@media(max-width:1000px){.systems-grid{grid-template-columns:repeat(2,1fr)}.app-shell{grid-template-columns:215px 1fr}}@media(max-width:720px){.landing{padding:22px}.navtag{display:none}.hero{grid-template-columns:1fr;padding-top:55px;gap:0}.hero-art{height:300px;order:-1}.glass-card{max-width:330px}.features{grid-template-columns:1fr}.app-shell{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid #ffffff14;padding:15px 18px}.sidebar .brand{margin-bottom:8px}.side-label{margin:14px 8px 9px}.guild-list{flex-direction:row;overflow:auto}.guild-item{min-width:max-content;padding:8px}.guild-icon{width:29px;height:29px}.side-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px}.profile{margin:0}.main{padding:20px 16px}.welcome{padding:25px;min-height:230px}.welcome h2{font-size:27px}.welcome-symbol{font-size:100px;margin:0}.stats-row{gap:8px}.stat{padding:13px}.stat strong{font-size:20px}.stat small{font-size:10px}.stat span{font-size:7px}.systems-grid{grid-template-columns:1fr}.section-heading{align-items:start;gap:15px;flex-direction:column}.search{width:100%}.editor{grid-template-columns:1fr}.field.full{grid-column:auto}.topbar h1{font-size:22px}.online-dot{display:none}.modal-panel{padding:18px}.modal-actions{flex-wrap:wrap}.danger{order:3}.grow{display:none}}

/* Easy settings experience */
.setup-intro{display:flex;align-items:center;gap:13px;padding:15px 17px;border:1px solid #a879ff35;background:linear-gradient(110deg,#9b6be51b,#ffffff06);border-radius:13px;margin-bottom:2px}
.setup-intro-icon{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;background:#a879ff22;font-size:19px}
.setup-intro b{font-size:13px;font-weight:600;color:#f2eaff}
.setup-intro p{font-size:11px;color:#a99db8;margin:3px 0 0}
.editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:5px 1px}
.advanced-toggle{display:flex;align-items:center;gap:8px;color:#c9b9d9;font-size:11px;cursor:pointer}
.advanced-toggle input{accent-color:#a879ff;width:16px;height:16px}
.field-count{font:10px Inter;color:#8e829c}
.field-card{min-width:0;padding:13px;background:#100c19;border:1px solid #382b49;border-radius:12px;display:flex;flex-direction:column;gap:8px}
.field-card.full{grid-column:1/-1}
.field-card .field-label{font-size:11px;color:#e2d5ef;font-weight:600}
.field-card input:not([type=checkbox]),.field-card select,.field-card textarea{width:100%;background:#191326;border:1px solid #443454;border-radius:9px;padding:10px 11px;color:#eee5f6;font:12px Kanit;outline:none;min-width:0}
.field-card textarea{min-height:90px;resize:vertical}
.field-card input:focus,.field-card select:focus,.field-card textarea:focus{border-color:#a879ff}
.field-card select option{background:#171122}
.field-hint{font-size:10px;color:#91849f;line-height:1.6}
.switch-row{display:flex;align-items:center;gap:11px;cursor:pointer}
.switch-row input{position:absolute;opacity:0;width:1px;height:1px}
.switch-ui{width:38px;height:22px;border-radius:20px;background:#493d55;position:relative;flex:none;transition:.2s}
.switch-ui:after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#d8cadd;transition:.2s}
.switch-row input:checked+.switch-ui{background:#8656d7}
.switch-row input:checked+.switch-ui:after{transform:translateX(16px);background:white}
.switch-row b,.switch-row small{display:block}
.switch-row b{font-size:12px;font-weight:500;color:#eee5f6}
.switch-row small{font-size:10px;color:#91849f;margin-top:2px}
.advanced-hidden{display:none!important}
.add-field-row{display:flex;gap:8px;align-items:center}
.add-field-row input{flex:1}
@media(max-width:720px){.setup-intro,.editor-toolbar{grid-column:1/-1}.add-field-row{flex-direction:column;align-items:stretch}.field-card.full{grid-column:auto}}

/* Auto Bump: beginner-friendly room setup */
.bump-entries{display:grid;gap:14px;margin:12px 0 16px}
.bump-entry{display:grid;gap:9px;padding:16px;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:14px;background:rgba(255,255,255,.025)}
.bump-entry select,.bump-entry textarea{width:100%;min-width:0;box-sizing:border-box}
.bump-entry .bump-remove{justify-self:start;margin-top:2px}
#addBumpEntry{margin-top:4px}
@media(max-width:640px){.bump-entry{padding:12px}.bump-entry .bump-remove{width:100%}}


/* ========================================
   LUMI EMOJI ROLE EDITOR
======================================== */

.emoji-panel-card {
  background: rgba(20, 25, 45, .72);
  border: 1px solid rgba(130, 145, 190, .22);
  border-radius: 15px;
  padding: 18px;
  margin: 14px 0;
}

.emoji-panel-heading,
.emoji-role-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.emoji-panel-heading b {
  display: block;
  font-size: 16px;
}

.emoji-panel-heading small {
  display: block;
  opacity: .65;
  margin-top: 4px;
}

.emoji-panel-card .field-card {
  margin: 12px 0;
}

.emoji-role-entry {
  border: 1px solid rgba(130, 145, 190, .2);
  background: rgba(255, 255, 255, .025);
  padding: 13px;
  border-radius: 12px;
  margin-bottom: 10px;
}

.emoji-role-fields {
  display: grid;
  grid-template-columns: minmax(100px, .7fr) minmax(180px, 1.3fr);
  gap: 12px;
}

.emoji-role-fields input,
.emoji-role-fields select,
.emoji-panel-card input,
.emoji-panel-card select,
.emoji-panel-card textarea {
  width: 100%;
  box-sizing: border-box;
}

.emoji-remove-role {
  margin-top: 10px;
}

.emoji-role-count {
  opacity: .7;
  font-size: 13px;
}

@media (max-width: 600px) {
  .emoji-panel-card {
    padding: 12px;
  }

  .emoji-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .emoji-role-fields {
    grid-template-columns: 1fr;
  }
}


/* ========================================
   LUMI INVITE BOT MENU
======================================== */

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.invite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 11px 18px;

    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;

    color: #fff;
    background: linear-gradient(
        120deg,
        #e9f752d8,
        #c16be4,
        #e08cff
    );

    font: 500 13px Kanit, sans-serif;
    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 8px 25px rgba(255, 246, 84, 0.753);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

.invite-btn svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

.invite-btn span {
    opacity: .8;
    font-size: 16px;
}

.invite-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.12);
    box-shadow: 0 12px 30px rgba(231, 237, 69, 0.855);
}

.invite-btn:active {
    transform: scale(.97);
}

/* MOBILE */
@media (max-width: 720px) {
    .nav {
        gap: 10px;
    }

    .nav-actions {
        gap: 8px;
    }

    .invite-btn {
        padding: 9px 12px;
        font-size: 11px;
        gap: 6px;
    }

    .invite-btn svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 380px) {
    .invite-btn {
        padding: 8px 9px;
        font-size: 10px;
    }
}

/* LUMI LOGO IMAGE */

.brandmark {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
}

.welcome-symbol img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgb(235, 239, 119));
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

@media (max-width: 720px) {
    .welcome-symbol img {
        width: 75px;
        height: 75px;
    }

    .brandmark {
        width: 32px;
        height: 32px;
    }
}
/* LOGO บนกรอบด้านขวาบน */
#topAvatar {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    flex-shrink: 0;
}

#topAvatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}


/* ========================================
   LUMI WHITE & GOLD LUXURY THEME
======================================== */

:root {
    --bg: #0d0d0d;
    --panel: #171717;
    --panel2: #22201b;
    --line: #4a3c20;
    --text: #fffdf7;
    --muted: #c6bda9;
    --purple: #d4af37;
    --pink: #f5d778;
    --green: #d8c18a;

    --gold: #d4af37;
    --gold-light: #f5d778;
    --white: #fffdf7;
}

/* Background */
body {
    background: var(--bg);
    color: var(--white);
}

.appbody {
    background:
        radial-gradient(ellipse at 70% -20%, #665021 0, transparent 45%),
        #0d0d0d;
}

/* Ambient light */
.a1 {
    background: #d4af37;
}

.a2 {
    background: #f5d778;
}

/* Logo */
.brandmark {
    background: linear-gradient(140deg, #d4af37, #fff0a8);
    box-shadow: 0 8px 30px #d4af3755;
}

/* Buttons */
.primary,
.invite-btn {
    background: linear-gradient(
        110deg,
        #a77c18,
        #d4af37,
        #f5d778
    );
    color: #17130a;
    box-shadow: 0 9px 28px #d4af3744;
}

.primary:hover,
.invite-btn:hover {
    filter: brightness(1.13);
    box-shadow: 0 12px 30px #d4af3766;
}

/* Navigation */
.sidebar {
    background: #11100d;
    border-right: 1px solid #4a3c20;
}

.guild-item {
    color: #d7d0c1;
}

.guild-item:hover,
.guild-item.active {
    background: #d4af371c;
    border-color: #d4af3780;
    color: #fff3c4;
}

.guild-icon {
    background: #40351d;
}

/* Hero */
.hero .eyebrow {
    color: #f5d778;
}

.eyebrow i {
    background: #f5d778;
    box-shadow: 0 0 14px #f5d778;
}

h1 span {
    background: linear-gradient(90deg, #d4af37, #fff0a8);
    -webkit-background-clip: text;
    color: transparent;
}

/* Mockup */
.mock-icon {
    background: linear-gradient(140deg, #a77c18, #f5d778);
}

.mock-bars i {
    background: linear-gradient(#fff0a8, #b58a24);
}

/* Welcome */
.welcome {
    background: linear-gradient(
        115deg,
        #292315,
        #17150f 55%,
        #40331b
    );
    border-color: #78602b;
}

.welcome-symbol {
    color: #ffffff0c;
    text-shadow: 0 0 80px #d4af3755;
}

/* Cards */
.system-card,
.stat,
.features article {
    background: linear-gradient(145deg, #1d1b16, #14130f);
    border-color: #40351f;
}

.system-card:hover {
    border-color: #d4af37aa;
}

.system-icon {
    background: #d4af3722;
}

.features article span {
    color: #f5d778;
}

/* Status */
.status {
    color: #e4d19a;
}

.status.off {
    color: #968c79;
}

.online-dot {
    color: #e4d19a;
}

/* Settings */
.modal-panel {
    background: #191711;
    border-color: #65512b;
}

.field-card,
.emoji-panel-card,
.bump-entry {
    background: #14130f;
    border-color: #4a3c20;
}

.field-card input:not([type="checkbox"]),
.field-card select,
.field-card textarea {
    background: #0e0d0a;
    border-color: #574729;
    color: #fffdf7;
}

.field-card input:focus,
.field-card select:focus,
.field-card textarea:focus {
    border-color: #d4af37;
}

.switch-row input:checked + .switch-ui {
    background: #b58a24;
}

/* Edit button */
.edit-btn {
    border-color: #d4af3780;
    color: #f5d778;
    background: #d4af371c;
}

.edit-btn:hover {
    background: #d4af3733;
}

/* Search */
.search {
    background: #17150f;
    border-color: #574729;
    color: #fffdf7;
}

.search:focus {
    border-color: #d4af37;
}

/* Toast */
.toast {
    background: #292315;
    border-color: #d4af3780;
    color: #fff4cf;
}

/* Footer */
.app-footer span {
    color: #d4af37;
}

/* Setup intro */
.setup-intro {
    border-color: #d4af3755;
    background: linear-gradient(110deg, #d4af371c, #ffffff06);
}

.setup-intro-icon {
    background: #d4af3725;
}

.field-card .field-label {
    color: #f5e5b5;
}

/* Mobile */
@media (max-width: 720px) {
    .sidebar {
        background: #11100d;
    }

    .welcome {
        background: linear-gradient(
            115deg,
            #292315,
            #17150f
        );
    }
}

.mock-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 15px;
    background: linear-gradient(140deg, #faf3c200, hsla(284, 22%, 90%, 0));
    flex-shrink: 0;
}

.mock-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
}


/* FORCE LUMI INVITE BUTTON WHITE GOLD */

.nav-actions a.invite-btn,
a.invite-btn {
    background: linear-gradient(
        135deg,
        #d4af37 0%,
        #f5d778 50%,
        #f3d987 100%
    ) !important;

    color: #8a6815 !important;
    border: 1px solid #d4af37 !important;

    box-shadow: 0 5px 20px rgba(212, 175, 55, .3) !important;
}

.nav-actions a.invite-btn svg,
a.invite-btn svg {
    color: #fffefc !important;
    fill: none !important;
}

.nav-actions a.invite-btn:hover,
a.invite-btn:hover {
    background: linear-gradient(
        135deg,
        #fffdf5,
        #f5d778,
        #d4af37
    ) !important;

    color: #5c430c !important;
    border-color: #b38b20 !important;
}


/* ==========================================
   LUMI CONFIRM DIALOG - GOLD THEME
========================================== */

#lumiConfirmLayer .lumi-confirm-card {
    border: 1px solid #a77c18 !important;
    box-shadow: 0 24px 80px rgba(167, 124, 24, .18) !important;
}

/* ไอคอน */
#lumiConfirmLayer .lumi-confirm-icon {
    background: rgba(212, 175, 55, .16) !important;
    border: 1px solid rgba(245, 215, 120, .2);
}

/* หัวข้อ */
#lumiConfirmLayer h3 {
    background: linear-gradient(
        90deg,
        #a77c18,
        #d4af37,
        #f5d778
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
}

/* ข้อความรายละเอียด */
#lumiConfirmLayer p {
    color: #d8cba8 !important;
}

/* ปุ่มยืนยัน */
#lumiConfirmLayer .lumi-confirm-ok {
    color: #241900 !important;

    background: linear-gradient(
        135deg,
        #a77c18,
        #d4af37,
        #f5d778
    ) !important;

    border: 1px solid #f5d778 !important;
    font-weight: 800 !important;

    box-shadow: 0 4px 16px rgba(212, 175, 55, .25);
}

/* Hover ปุ่มยืนยัน */
#lumiConfirmLayer .lumi-confirm-ok:hover {
    filter: brightness(1.12) !important;
    box-shadow: 0 5px 22px rgba(245, 215, 120, .4);
}

/* ปุ่มยกเลิก คงสีม่วง */
#lumiConfirmLayer .lumi-confirm-cancel {
    color: #e5dcef !important;
    background: #342943 !important;
    border: 1px solid #4b3b5e !important;
}

/* ปุ่มยกเลิก Hover */
#lumiConfirmLayer .lumi-confirm-cancel:hover {
    background: #453454 !important;
}