/* Modumaker — unified Aura redesign (2026-09) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;550;600;650;700&display=swap');

:root,
body,
body[data-app-theme],
body[data-landing="aura"]{
  --bg:#08090b;
  --bg-soft:#0d0e11;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.025);
  --surface-3:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.075);
  --border-solid:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.18);
  --text:#f5f5f6;
  --text-dim:#b4b7bf;
  --text-faint:#858a95;
  --accent:#f4f4f5;
  --accent-2:#c7cad1;
  --accent-warm:#f4f4f5;
  --accent-warm-2:#d8d8dc;
  --success:#77d39b;
  --warning:#e6c777;
  --danger:#f17c82;
  --radius-sm:8px;
  --radius:10px;
  --radius-lg:12px;
  --radius-xl:16px;
  --shadow-sm:0 8px 26px rgba(0,0,0,.22);
  --shadow:0 18px 55px rgba(0,0,0,.34);
  --shadow-lg:0 32px 100px rgba(0,0,0,.5);
  --container-page:1240px;
}

html{background:#08090b;scrollbar-color:#54575e #111216;scrollbar-width:thin}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;
  background:#08090b!important;color:var(--text)!important;
  background-image:none!important;letter-spacing:-.01em;
}
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:-2;filter:blur(80px);opacity:.42;border-radius:50%;will-change:transform}
body::before{width:55vw;height:55vw;left:-18vw;top:-28vw;background:radial-gradient(circle at 50% 50%,rgba(55,111,108,.32),rgba(26,54,70,.14) 42%,transparent 72%);animation:auraFloatA 18s ease-in-out infinite alternate}
body::after{width:48vw;height:48vw;right:-16vw;top:-18vw;background:radial-gradient(circle,rgba(83,72,114,.28),rgba(33,53,83,.12) 48%,transparent 72%);animation:auraFloatB 22s ease-in-out infinite alternate}
@keyframes auraFloatA{to{transform:translate(13vw,11vh) scale(1.12)}}
@keyframes auraFloatB{to{transform:translate(-10vw,18vh) scale(.93)}}

*{scrollbar-width:thin;scrollbar-color:#484b52 transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#3a3c42;border:2px solid transparent;background-clip:padding-box;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:#595c64;border:2px solid transparent;background-clip:padding-box}

h1,h2,h3,h4{font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;letter-spacing:-.045em!important;color:#f7f7f8}
p{color:var(--text-dim)}
.muted{color:var(--text-faint)!important}

/* buttons — intentionally neutral/white, no orange CTA */
.btn{border-radius:8px!important;font-weight:600!important;box-shadow:none!important;transition:background .16s,border-color .16s,color .16s,transform .16s!important}
.btn-primary,.btn-accent{background:#f3f3f4!important;color:#101114!important;border:1px solid #f3f3f4!important}
.btn-primary:hover,.btn-accent:hover{background:#fff!important;border-color:#fff!important;transform:translateY(-1px)!important}
.btn-outline{background:rgba(255,255,255,.025)!important;border-color:rgba(255,255,255,.13)!important;color:#e8e9eb!important}
.btn-outline:hover,.btn-ghost:hover{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.22)!important;color:#fff!important}
.btn-ghost{color:#b8bbc2!important}

.brand{font-weight:650!important;letter-spacing:-.025em!important;color:#f5f5f5!important}
.brand-mark{background:#f2f2f3!important;color:#111216!important;border-radius:9px!important;box-shadow:none!important;font-size:15px!important}
.brand-mark::after{display:none!important}

/* public nav */
.nav{top:12px!important;margin:0 auto!important;width:min(calc(100% - 28px),1240px)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:12px!important;background:rgba(12,13,16,.62)!important;backdrop-filter:blur(22px) saturate(130%)!important;box-shadow:0 12px 50px rgba(0,0,0,.20)!important}
.nav-inner{height:60px!important;padding:0 14px!important}
.nav-links a{color:#aeb1b8!important;font-size:13px!important}.nav-links a:hover{color:#fff!important}

/* landing */
body[data-landing="aura"]{overflow-x:hidden}
body[data-landing="aura"]::before{width:76vw;height:66vw;left:-26vw;top:-34vw;opacity:.6;background:radial-gradient(circle at 52% 50%,rgba(63,123,111,.35),rgba(38,73,87,.18) 40%,transparent 70%)}
body[data-landing="aura"]::after{width:70vw;height:64vw;right:-30vw;top:-26vw;opacity:.55;background:radial-gradient(circle at 50% 50%,rgba(97,76,126,.31),rgba(42,56,91,.16) 43%,transparent 70%)}
body[data-landing="aura"] .hero{padding-top:150px!important}
body[data-landing="aura"] .hero::before{content:"";position:absolute;inset:-160px 0 auto 0;height:780px;pointer-events:none;background:radial-gradient(ellipse at 50% 25%,rgba(255,255,255,.055),transparent 52%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px;mask-image:linear-gradient(to bottom,black 0,rgba(0,0,0,.75) 55%,transparent 100%);opacity:.7}
body[data-landing="aura"] .aura-glow{filter:blur(100px)!important;opacity:.24!important;animation:auraOrb 15s ease-in-out infinite alternate}
@keyframes auraOrb{to{transform:translateX(-50%) translateY(90px) scale(1.12)}}
body[data-landing="aura"] .eyebrow{color:#d0d2d7!important;background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.11)!important;text-transform:none!important;letter-spacing:-.01em!important;font-size:12px!important;padding:8px 12px!important}
body[data-landing="aura"] .eyebrow .dot{background:#8be0bc!important;box-shadow:0 0 14px rgba(139,224,188,.65)!important}
body[data-landing="aura"] .hero-top{max-width:900px!important}
body[data-landing="aura"] .hero-top h1{font-size:clamp(48px,7.2vw,96px)!important;line-height:.98!important;font-weight:600!important;max-width:980px;margin:8px auto 26px!important}
body[data-landing="aura"] .text-grad{background:none!important;color:#f7f7f8!important;-webkit-text-fill-color:initial!important}
body[data-landing="aura"] .lede{color:#a8abb3!important;line-height:1.65!important;font-size:16px!important}
body[data-landing="aura"] .hero-cta-row{margin-top:30px!important}
body[data-landing="aura"] .hero-meta{margin-top:56px!important;padding-top:24px!important;border-top:1px solid rgba(255,255,255,.07)!important}
body[data-landing="aura"] .hero-meta div{color:#858994!important}body[data-landing="aura"] .hero-meta strong{font-weight:550!important;color:#e9eaec!important}
body[data-landing="aura"] .mock-browser{border-color:rgba(255,255,255,.11)!important;background:rgba(15,16,20,.5)!important;backdrop-filter:blur(28px) saturate(130%)!important;box-shadow:0 45px 120px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.04)!important}
body[data-landing="aura"] .mock-topbar,body[data-landing="aura"] .mock-rail,body[data-landing="aura"] .mock-props{border-color:rgba(255,255,255,.08)!important}
body[data-landing="aura"] .mock-body{background:radial-gradient(600px 360px at 38% 30%,rgba(70,107,102,.15),transparent 62%),radial-gradient(500px 360px at 78% 78%,rgba(72,68,100,.13),transparent 62%),rgba(8,9,11,.56)!important}
body[data-landing="aura"] .mock-rail i.on{background:#ececee!important;box-shadow:none!important}
body[data-landing="aura"] .card,body[data-landing="aura"] .split-media,body[data-landing="aura"] .cta-band{background:rgba(255,255,255,.025)!important;border-color:rgba(255,255,255,.085)!important;backdrop-filter:blur(20px)!important;box-shadow:none!important}
body[data-landing="aura"] .card-hover:hover{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.15)!important;transform:translateY(-2px)!important}
body[data-landing="aura"] .icon-tile{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.09)!important;color:#f0f0f1!important}
body[data-landing="aura"] .feature-card li::before,body[data-landing="aura"] .price-card li::before{color:#b7e5d0!important}
body[data-landing="aura"] .ribbon{background:#ededee!important;color:#111!important}
body[data-landing="aura"] .price-card.featured{border-color:rgba(255,255,255,.24)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important}

/* authenticated app — Rayon-like neutral UI */
.app-frame{grid-template-columns:238px minmax(0,1fr)!important;background:#0b0c0e!important}
.app-sidebar{background:#101113!important;border-right:1px solid #222327!important;padding:14px 10px!important}
.app-sidebar .brand{padding:7px 8px 20px!important}
.app-sidebar .brand-mark{width:30px!important;height:30px!important;font-size:13px!important}
.side-section{color:#6f737c!important;padding:18px 10px 7px!important;font-size:10px!important;text-transform:none!important;letter-spacing:.01em!important;font-weight:600!important}
.side-link{border-radius:7px!important;padding:8px 9px!important;color:#aaaeb7!important;font-size:13px!important}
.side-link:hover{background:#18191c!important;color:#f0f0f1!important}
.side-link.active{background:#222326!important;color:#fff!important;border:1px solid #2a2b2f!important}
.side-link .ic{opacity:.9!important}.side-link .ic svg{width:16px!important;height:16px!important}
.side-user{border-top-color:#222327!important;padding:12px 8px!important}.avatar{background:#ececef!important;color:#121316!important}
.side-user small{color:#777b84!important}.side-user strong{color:#dfe0e3!important;font-weight:500!important}
.app-main{padding:28px 32px 64px!important;max-width:none!important;min-width:0;background:#0b0c0e!important}
.app-topbar{margin-bottom:30px!important;border-bottom:1px solid #202126!important;padding-bottom:22px!important}
.app-topbar h1{font-size:20px!important;font-weight:600!important}.app-topbar p{font-size:13px!important;color:#878b94!important}
.stat-row{gap:10px!important;margin-bottom:22px!important}.stat-tile{background:#111214!important;border-color:#222328!important;border-radius:8px!important;padding:15px 16px!important}.stat-tile .label{color:#7e828b!important;text-transform:none!important;letter-spacing:0!important;font-size:11px!important}.stat-tile .value{font-size:21px!important;font-weight:550!important;color:#f1f1f2!important}
.toolbar-row{border-bottom:1px solid #202126!important;padding-bottom:16px!important}.search-input{background:#111214!important;border-color:#25262b!important;border-radius:7px!important;height:36px!important;color:#737780!important}.search-input input{color:#e6e7e9!important}
.pill-tabs{background:#111214!important;border:1px solid #24252a!important;border-radius:7px!important;padding:3px!important}.pill-tabs button{color:#898d96!important;border-radius:5px!important}.pill-tabs button.active{background:#28292d!important;color:#fff!important;box-shadow:none!important}
.project-grid{gap:14px!important;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important}.project-card{background:#111214!important;border-color:#222328!important;border-radius:9px!important}.project-card:hover{transform:translateY(-1px)!important;border-color:#383a40!important;box-shadow:none!important}.project-thumb{height:160px!important;background:#17181b!important;border-bottom-color:#24252a!important}.project-body{padding:14px 15px 15px!important;gap:8px!important}.project-body h3{font-size:13px!important;font-weight:600!important}.project-meta{color:#8b8f98!important}.project-foot .muted{color:#737780!important}.kebab-btn{background:#18191c!important;border-color:#292a2f!important;color:#a7abb4!important}.kebab-dropdown{background:#18191c!important;border-color:#303137!important}.kebab-dropdown button,.kebab-dropdown a{color:#c1c4ca!important}.kebab-dropdown button:hover,.kebab-dropdown a:hover{background:#242529!important;color:#fff!important}
.empty-state,.table-card,.modal-box{background:#111214!important;border:1px solid #25262b!important;border-radius:9px!important;box-shadow:0 26px 80px rgba(0,0,0,.45)!important}
.badge{border-radius:5px!important}

/* forms/auth/legal/quotes */
.auth-shell{background:#0b0c0e!important;min-height:100vh}
.auth-side{background:radial-gradient(700px 620px at 15% 15%,rgba(67,100,94,.18),transparent 62%),#0d0e10!important;border-right:1px solid #232429!important;padding:64px clamp(32px,6vw,86px)!important;position:relative;overflow:hidden}
.auth-side::after{content:"";position:absolute;width:420px;height:420px;left:-140px;bottom:-180px;background:radial-gradient(circle,rgba(81,66,105,.2),transparent 66%);filter:blur(30px)}
.auth-side h2{font-size:clamp(32px,4vw,52px)!important;line-height:1.03!important;font-weight:580!important;max-width:520px!important}.auth-side .lede{font-size:15px!important;color:#a0a4ad!important}
.auth-form-wrap{background:#0b0c0e!important;padding:42px 24px!important}.auth-card{width:min(100%,470px)!important;background:transparent!important;border:none!important;box-shadow:none!important;padding:22px!important}.auth-card h2{font-size:27px!important;font-weight:600!important}.auth-card>p{color:#8e929b!important}
.field label{color:#b7bac1!important;font-size:12px!important;font-weight:500!important}.field input,.field textarea,.field select,input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{background:#111214!important;border:1px solid #292a2f!important;color:#f0f1f2!important;border-radius:7px!important;box-shadow:none!important}.field input:focus,.field textarea:focus,.field select:focus,input:focus,textarea:focus,select:focus{outline:none!important;border-color:#555860!important;box-shadow:0 0 0 3px rgba(255,255,255,.045)!important}::placeholder{color:#666a73!important}
.auth-alert{border-radius:7px!important}.auth-alert.error{background:rgba(241,124,130,.08)!important;border-color:rgba(241,124,130,.25)!important;color:#f2a8ac!important}.auth-alert.success{background:rgba(119,211,155,.08)!important;border-color:rgba(119,211,155,.22)!important;color:#a0dfb7!important}
.sep{border-color:#24252a!important}
.table-card table th{color:#80848d!important}.table-card table td{color:#c2c5cb!important}.table-card table tr{border-color:#232429!important}
.modal-backdrop{background:rgba(0,0,0,.64)!important;backdrop-filter:blur(5px)!important}

.footer{background:#0a0b0d!important;border-color:#1d1e22!important}.footer p,.footer-grid a,.footer-bottom{color:#858994!important}.footer-word{background:linear-gradient(115deg,#292b30 20%,#989ba2 45%,#292b30 67%)!important;-webkit-background-clip:text!important;color:transparent!important}
.cookie-bar-inner{background:#151619!important;border:1px solid #2a2b30!important}

@media(max-width:900px){.nav{top:8px!important;width:calc(100% - 16px)!important}.nav-links{background:#111214!important;border-color:#292a2f!important;border-radius:0 0 10px 10px!important}.app-frame{grid-template-columns:1fr!important}.app-sidebar{position:relative!important;height:auto!important}.app-main{padding:20px 16px 50px!important}.auth-side{display:none!important}.auth-shell{grid-template-columns:1fr!important}.auth-card{margin:auto!important}}

/* 2026-09 dashboard polish */
.search-input{
  display:flex!important;align-items:center!important;gap:9px!important;
  padding:0 11px!important;min-width:260px!important;
  background:#111214!important;border:1px solid #2a2b30!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012)!important;
}
.search-input:focus-within{border-color:#474950!important;box-shadow:0 0 0 3px rgba(255,255,255,.035)!important}
.search-input input{
  flex:1!important;width:100%!important;height:100%!important;padding:0!important;margin:0!important;
  border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;
  border-radius:0!important;color:#ececef!important;font-size:13px!important;
}
.search-input input:focus{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important}
.search-glyph{width:13px;height:13px;border:1.5px solid #777b84;border-radius:50%;position:relative;flex:0 0 13px}
.search-glyph:after{content:"";position:absolute;width:5px;height:1.5px;background:#777b84;right:-4px;bottom:-2px;transform:rotate(45deg);border-radius:2px}

.project-thumb img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;padding:10px!important;background:#f7f8fa!important}

.kebab-dropdown{
  min-width:190px!important;max-width:min(280px,calc(100vw - 16px))!important;
  max-height:min(430px,calc(100dvh - 24px))!important;overflow-y:auto!important;overscroll-behavior:contain!important;
  padding:6px!important;border-radius:10px!important;z-index:10050!important;
  box-shadow:0 18px 50px rgba(0,0,0,.48)!important;
}
.kebab-dropdown a,.kebab-dropdown button{
  min-height:36px!important;padding:8px 10px!important;border-radius:7px!important;font-size:13px!important;font-weight:500!important;
  gap:0!important;text-align:left!important;
}
.kebab-divider{margin:5px 4px!important;border-color:#2b2c31!important}
.kebab-section-label{padding:8px 10px 4px!important;font-size:10px!important;letter-spacing:.08em!important;color:#777b84!important}

/* Full-width account layout + reliable upload control */
body[data-app-theme] .app-main > .card,
body[data-app-theme] .app-main > .grid{max-width:none!important}
.quote-logo-row .btn input[type=file]{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden!important;pointer-events:none!important}
.quote-logo-row label.btn{position:relative!important;overflow:hidden!important;white-space:nowrap!important}

/* Compact dashboard footer */
.app-footer-compact{margin:0!important;padding:0!important;border-top:1px solid #1d1e22!important;background:#090a0c!important}
.app-footer-inner{min-height:46px;padding:10px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#7f838d;font-size:11.5px}
@media(max-width:700px){.app-footer-inner{padding:10px 16px;align-items:flex-start;flex-direction:column;gap:3px}}

/* Tall modals: never clipped above/below viewport */
.modal-backdrop{position:fixed!important;inset:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:18px!important;align-items:center!important;justify-content:center!important}
.modal-backdrop.open{display:flex!important}
.modal-box{width:min(100%,560px)!important;max-height:calc(100dvh - 36px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;margin:auto!important}
.modal-box form{min-width:0}

/* Native-dialog replacement */
.mm-dialog{width:min(440px,100%)!important}
.mm-dialog h3{margin:0 0 8px!important;font-size:16px!important}
.mm-dialog p{font-size:13px!important;line-height:1.55!important;margin-bottom:16px!important}
.mm-dialog-link{display:flex;gap:8px;align-items:center;margin:12px 0 4px}
.mm-dialog-link input{flex:1;min-width:0;background:#0d0e10!important;border:1px solid #2a2b30!important;color:#dfe1e5!important;border-radius:8px!important;padding:10px 11px!important;font-size:12px!important}
