/* deviz-app-skin.css — cover-quality polish for the main app's two FULL-SCREEN surfaces
   (login gate + empty/landing state). Everything is scoped to #authGate / #empty /
   .auth-box, so the canvas workspace (toolbars, panels, cards) is untouched. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,500&display=swap');

/* ══ landing / empty state ══ */
#empty{
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(240,168,75,.11), transparent 62%),
    radial-gradient(700px 420px at 100% 100%, rgba(229,83,61,.07), transparent 60%),
    #0d0a08 !important;
  gap:0 !important;
}
.dvz-word{
  font-family:'Playfair Display',serif; font-style:italic; font-weight:400;
  font-size:62px; line-height:1; color:#f3e9e4; letter-spacing:-.035em;
}
.dvz-tag{
  font-size:13.5px; color:#b39a91; line-height:1.7; margin:12px 0 28px;
  max-width:430px; letter-spacing:-.01em;
}
/* the drop target fills most of the screen — the old box was tiny and easy to miss */
#empty .drop{
  border:1.5px dashed #3a2823 !important; border-radius:22px !important;
  width:min(820px, 82vw) !important; min-height:44vh !important;
  display:flex !important; flex-direction:column; align-items:center; justify-content:center;
  padding:30px !important; font-size:15px !important; line-height:1.9; color:#b39a91;
  background:rgba(255,255,255,.014); transition:border-color .2s, background .2s, color .2s;
}
#empty .drop:hover,#empty .drop.over,
#empty.over .drop{           /* dragging ANYWHERE over the landing lights the zone up */
  border-color:var(--amber) !important; background:rgba(240,168,75,.07) !important; color:#f3e9e4 !important;
}

/* (landing shortcut cards removed — the landing has one job: drop a file.
   Other tools are reachable via the logo → cover.) */
#empty .drop span{color:#836e66}
#empty button{
  border-radius:999px !important; padding:9px 20px !important; font-size:12.5px !important;
  transition:border-color .16s, color .16s, transform .16s, background .16s;
}
#empty button:hover{ border-color:var(--amber) !important; color:var(--amber) !important; transform:translateY(-1px); }

/* ══ login gate ══ */
#authGate{
  background:
    radial-gradient(820px 480px at 50% -12%, rgba(240,168,75,.12), transparent 62%),
    #0b0806 !important;
}
.auth-box{
  background:linear-gradient(180deg,#191310 0%,#100c0a 100%) !important;
  border:1px solid #3a2823 !important; border-radius:22px !important;
  padding:30px 26px 26px !important; max-width:360px !important;
  box-shadow:0 26px 74px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.auth-brand{
  font-family:'Playfair Display',serif !important; font-style:italic !important; font-weight:400 !important;
  font-size:42px !important; letter-spacing:-.035em !important;
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:#f3e9e4 !important; color:#f3e9e4 !important;
}
.auth-sub{ color:#b39a91 !important; font-size:13px !important; margin:6px 0 22px !important; }
.auth-box input{
  border-radius:11px !important; padding:12px 13px !important; font-size:13.5px !important;
  background:#241a17 !important; border:1px solid #3a2823 !important; transition:border-color .15s, box-shadow .15s;
}
.auth-box input:focus{
  outline:none; border-color:var(--amber) !important; box-shadow:0 0 0 3px rgba(240,168,75,.16) !important;
}
.auth-box .btn{ border-radius:999px !important; padding:11px !important; font-size:13px !important; }
.auth-box .btn-primary{
  background:linear-gradient(180deg,#f7bb63,var(--amber)) !important; color:#241803 !important;
  font-weight:700 !important; box-shadow:0 8px 22px rgba(240,168,75,.24) !important;
}
.auth-box .btn-primary:hover{ filter:brightness(1.04); transform:translateY(-1px); }

/* ══ palette: shift the app's red accent to the cover's amber ══
   Done at the variable level so every var(--red*) usage follows, then the few
   places that painted white text on red get dark text for contrast. */
:root{
  --red:#e0a94a !important;      /* primary action  */
  --red-hi:#f0c070 !important;   /* icons / links   */
  --red-dim:#7a5a22 !important;  /* borders         */
  --red-soft:#2a2015 !important; /* tinted surfaces */
}
.btn-primary{ background:linear-gradient(180deg,#eab75d,#e0a94a) !important; color:#231803 !important; }
.tbtn.tool-on{ background:var(--red) !important; color:#231803 !important; }
.tbtn-undo{ background:linear-gradient(180deg,#eab75d,#e0a94a) !important; color:#231803 !important; border-color:transparent !important; }
.tbtn-undo:disabled{ background:#3a2620 !important; color:#8a6a60 !important; }
#modeSwitch button.on{ background:var(--red) !important; color:#231803 !important; }

/* ══ brand mark, top-left = Home ══ */
.app-logo{
  position:fixed; top:10px; left:10px; z-index:25;
  display:flex; align-items:center; gap:8px;
  padding:8px 15px 8px 12px; border-radius:14px; cursor:pointer; text-decoration:none;
  background:rgba(20,15,14,.88); border:1px solid #3a2823;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.46);
  transition:transform .16s ease, border-color .16s;
}
.app-logo:hover{ transform:translateY(-1px); border-color:var(--amber); }
.app-logo svg{ width:20px; height:20px; fill:var(--amber); flex:none; }
.app-logo span{ font-family:'Playfair Display',serif; font-style:italic; font-size:19px; color:var(--ink); line-height:1; }

/* ══ workspace chrome polish ══
   Visual properties only (background / border / radius / shadow / colour /
   transition). No width, height, position, display or flex changes, so the
   canvas layout and every JS-driven measurement stay exactly as they were. */
#genPanel{
  background:linear-gradient(180deg, rgba(27,20,18,.94) 0%, rgba(18,13,11,.94) 100%) !important;
  border:1px solid #3f2c26 !important; border-radius:16px !important;
  backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 18px 54px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
#genPanel.collapsed{ border-radius:14px !important; box-shadow:0 10px 28px rgba(0,0,0,.5) !important; }
#genPanel .dt-title{ letter-spacing:.09em !important; text-transform:uppercase; color:#c6ab9e !important; }
#genPanel .dt-row{ border-radius:8px !important; transition:background .15s; }
#genPanel .dt-row:hover{ background:rgba(255,255,255,.04); }
#genPanel .dt-add{ border-radius:999px !important; transition:border-color .15s, color .15s, background .15s; }

.bar{
  background:rgba(20,15,14,.88) !important; border:1px solid #3a2823 !important;
  border-radius:14px !important;
  backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.46) !important;
}
.tbtn{ border-radius:11px !important; transition:transform .14s ease, border-color .14s, background .14s; }
.tbtn:hover:not(:disabled){ transform:translateY(-1px); }
.btn{ border-radius:10px !important; transition:transform .14s ease, background .14s, border-color .14s; }
.btn:hover:not(:disabled){ transform:translateY(-1px); }
.btn-primary{ box-shadow:0 8px 24px rgba(229,83,61,.3) !important; }
.btn-primary:hover:not(:disabled){ box-shadow:0 12px 30px rgba(229,83,61,.4) !important; }

@media (max-width:640px){
  .dvz-word{font-size:46px}
  #empty .drop{padding:42px 26px !important}
  .auth-brand{font-size:34px !important}
}