/* Developer Office — AI Vision demo. Palette + fonts mirror developeroffice.com */
:root{
  --accent:#BE7BB5; --accent-light:#d4a0cd; --accent-dark:#9a6293;
  --accent-glow:rgba(190,123,181,0.14);
  --obsidian:#0a0a0a; --charcoal:#141414; --graphite:#1a1a1a; --slate:#2a2a2a;
  --bone:#f7f7f5; --cream:#edece7; --ash:#999; --mist:#bbb; --white:#fff;
  --border:rgba(255,255,255,0.08);
  --sans:'DM Sans','Helvetica Neue',sans-serif;
  --serif:'DM Serif Display',Georgia,serif;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--obsidian); color:var(--bone); font-family:var(--sans);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 500px at 80% -10%, var(--accent-glow), transparent 70%);
}
a{color:var(--accent-light);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

header.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:rgba(10,10,10,.82);backdrop-filter:blur(10px);z-index:10;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:30px;width:auto}
.brand .name{font-family:var(--serif);font-size:18px;letter-spacing:.2px}
.nav .tag{color:var(--ash);font-size:13px}
.navlinks{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.navlinks a{color:var(--mist);font-size:14px;transition:.2s var(--ease-out)}
.navlinks a:hover{color:var(--accent-light)}
.navtoggle{display:none;background:none;border:1px solid var(--border);color:var(--bone);
  border-radius:8px;font-size:20px;line-height:1;padding:6px 12px;cursor:pointer}

/* ---------- MOBILE ONLY (desktop view unchanged) ---------- */
@media(max-width:820px){
  header.nav{flex-wrap:wrap;padding:14px 18px}
  .navtoggle{display:block}
  .navlinks{display:none;order:3;flex-basis:100%;flex-direction:column;align-items:stretch;
    gap:0;margin-top:12px;border-top:1px solid var(--border)}
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 2px;border-bottom:1px solid var(--border);font-size:15px}
  .wrap{padding:0 18px}
  .hero{padding:40px 0 18px}
  .hero h1{font-size:32px}
  .hero p{font-size:15px}
  .panel{margin:24px auto 60px}
  .card{padding:22px}
  .compare{grid-template-columns:1fr;gap:14px}
  .stats{gap:10px}
  .stat{min-width:calc(50% - 10px)}
  .grid2{grid-template-columns:1fr}
  .result-head h2{font-size:24px}
  table th,table td{padding:10px 8px;font-size:13px}
}
@media(max-width:480px){
  .stat{min-width:100%}
  .hero h1{font-size:28px}
  .drop{padding:26px 16px}
}
.cardh{font-family:var(--serif);font-weight:400;font-size:18px;margin-bottom:12px}
.samples{margin-top:24px;border-top:1px solid var(--border);padding-top:18px}
.samples-h{color:var(--ash);font-size:13px;margin-bottom:12px;letter-spacing:.3px}
.samples-grid{display:flex;gap:10px;flex-wrap:wrap}
.sample-thumb{width:96px;height:70px;border-radius:8px;overflow:hidden;border:1px solid var(--border);transition:.2s var(--ease-out)}
.sample-thumb:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 22px rgba(190,123,181,.3)}
.sample-thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:640px){.dmg-grid{grid-template-columns:1fr !important}.navlinks{gap:14px}}

.hero{padding:64px 0 28px;text-align:center}
.hero .eyebrow{
  text-transform:uppercase;letter-spacing:3px;font-size:12px;color:var(--accent-light);
  margin-bottom:18px;
}
.hero h1{font-family:var(--serif);font-size:46px;line-height:1.08;font-weight:400;margin-bottom:16px}
.hero h1 em{font-style:italic;color:var(--accent-light)}
.hero p{color:var(--mist);max-width:620px;margin:0 auto;font-size:17px}

.card{
  background:linear-gradient(180deg,var(--graphite),var(--charcoal));
  border:1px solid var(--border);border-radius:18px;padding:30px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.panel{max-width:680px;margin:36px auto 80px}

.tabs{display:flex;gap:8px;margin-bottom:16px;background:var(--charcoal);padding:6px;border-radius:12px;border:1px solid var(--border)}
.tab{flex:1;padding:11px;border:none;border-radius:8px;background:transparent;color:var(--mist);cursor:pointer;font-weight:500;transition:.2s var(--ease-out)}
.tab:hover{color:var(--bone)}
.tab.active{background:var(--accent-glow);color:var(--accent-light);box-shadow:inset 0 0 0 1px rgba(190,123,181,.4)}
.tabpane{display:none}
.tabpane.active{display:block}
.note{color:var(--ash);font-size:13px;margin-top:14px;line-height:1.5}

/* processing overlay */
.loading-overlay{position:fixed;inset:0;z-index:1000;display:none;
  align-items:center;justify-content:center;
  background:rgba(10,10,10,.82);backdrop-filter:blur(6px)}
.loading-overlay.show{display:flex}
.loading-box{text-align:center;max-width:min(420px,90vw);padding:34px 30px;
  background:linear-gradient(180deg,var(--graphite),var(--charcoal));
  border:1px solid var(--border);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.spinner{width:54px;height:54px;margin:0 auto 20px;border-radius:50%;
  border:4px solid rgba(190,123,181,.25);border-top-color:var(--accent);
  animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-title{font-family:var(--serif);font-size:22px;margin-bottom:6px}
.loading-sub{color:var(--mist);font-size:14px;line-height:1.5;margin-bottom:18px}
.loading-box::after{content:"";display:block;height:4px;width:60%;margin:0 auto;border-radius:4px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  background-size:200% 100%;animation:slide 1.2s ease-in-out infinite}
@keyframes slide{0%{background-position:200% 0}100%{background-position:-200% 0}}
.marker-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--accent-glow);border:1px solid rgba(190,123,181,.35);border-radius:12px;
  padding:12px 16px;margin-bottom:18px;font-size:14px;color:var(--mist)}
.mini-btn{display:inline-block;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;
  color:#160a14;background:linear-gradient(135deg,var(--accent-light),var(--accent));white-space:nowrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;align-items:end}
.opt{margin-top:16px}
.adv{margin-top:16px;color:var(--mist);font-size:13px}
.adv summary{cursor:pointer;color:var(--accent-light)}
.fld{min-height:16px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}

label.fld{display:block;font-size:13px;color:var(--ash);margin:0 0 8px;letter-spacing:.3px}
.drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;min-height:150px;
  border:1.5px dashed rgba(190,123,181,.45);border-radius:14px;padding:34px;text-align:center;
  background:rgba(190,123,181,.05);transition:.25s var(--ease-out);cursor:pointer;
}
.drop:hover{background:rgba(190,123,181,.10);border-color:var(--accent)}
.drop .big{font-family:var(--serif);font-size:20px;margin-bottom:6px}
.drop .small{color:var(--ash);font-size:13px}
.drop input{display:none}
.fname{margin-top:12px;color:var(--accent-light);font-size:14px;min-height:18px}

button{font-family:var(--sans);font-size:15px}
/* unified form control — selects and inputs share one box model */
select, .inp{
  width:100%;height:46px;box-sizing:border-box;
  padding:0 14px;border-radius:10px;
  background:var(--slate);color:var(--bone);
  border:1px solid var(--border);
  font-family:var(--sans);font-size:15px;line-height:46px;
  transition:border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
select:hover, .inp:hover{border-color:rgba(190,123,181,.45)}
select:focus, .inp:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow)}
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  padding-right:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
}
select option{background:var(--graphite);color:var(--bone)}
.row{margin-top:22px}
button.cta{
  width:100%;padding:15px;border:none;border-radius:12px;cursor:pointer;font-weight:600;
  color:#160a14;background:linear-gradient(135deg,var(--accent-light),var(--accent));
  transition:.2s var(--ease-out);letter-spacing:.3px;
}
button.cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(190,123,181,.35)}

.error{background:rgba(252,165,165,.12);border:1px solid #fca5a5;color:#fca5a5;
  padding:12px 14px;border-radius:10px;margin-bottom:18px;font-size:14px}

/* result page */
.result-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:36px 0 22px;flex-wrap:wrap}
.result-head h2{font-family:var(--serif);font-weight:400;font-size:30px}
.pill{display:inline-block;padding:6px 12px;border-radius:30px;background:var(--accent-glow);
  border:1px solid rgba(190,123,181,.4);color:var(--accent-light);font-size:13px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px}
.compare figure{background:var(--charcoal);border:1px solid var(--border);border-radius:14px;padding:10px;margin:0}
.compare img{width:100%;border-radius:8px;display:block}
.compare figcaption{color:var(--ash);font-size:12px;text-align:center;margin-top:8px;text-transform:uppercase;letter-spacing:1px}

.stats{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.stat{flex:1;min-width:150px;background:var(--charcoal);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.stat .n{font-family:var(--serif);font-size:28px;color:var(--accent-light)}
.stat .l{color:var(--ash);font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-top:2px}

table{width:100%;border-collapse:collapse;margin-top:8px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--border);font-size:14px}
th{color:var(--ash);font-weight:500;text-transform:uppercase;letter-spacing:1px;font-size:12px}
td .bar{height:7px;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-light))}

.back{display:inline-block;margin:24px 0 80px;color:var(--mist)}
footer{border-top:1px solid var(--border);padding:26px 0;color:var(--ash);font-size:13px;text-align:center}

@media(max-width:640px){.compare{grid-template-columns:1fr}.hero h1{font-size:34px}}