@font-face {
  font-family:"HK Grotesk";
  src:url("../fonts/FontsTNM/HKGrotesk-Regular%20(1).otf") format("opentype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:"HK Grotesk";
  src:url("../fonts/FontsTNM/hk-grotesk-bold.otf") format("opentype");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
:root {
  --wine:#7d2631; --wine-deep:#611b24; --terracotta:#9d5544; --ink:#20242a;
  --muted:#68707c; --canvas:#f5f6f8; --paper:#fff; --line:#dfe3e8;
  --line-soft:#eceff2; --focus:rgba(125,38,49,.14);
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; color:var(--ink); background:#f5f6f8; font:14px/1.5 "Roboto",Arial,sans-serif; }
button,input,textarea,select { font:inherit; }
a { color:inherit; }

.app-header {
  position:sticky; top:0; z-index:30; display:grid;
  grid-template-columns:minmax(220px,1fr) auto auto; align-items:center; gap:14px;
  min-height:64px; padding:9px clamp(18px,3vw,40px);
  border-bottom:1px solid rgba(215,219,225,.9); background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
}
.app-brand { display:inline-flex; align-items:center; gap:11px; min-width:0; text-decoration:none; }
.app-brand img { width:36px; height:36px; object-fit:contain; }
.app-brand span { display:grid; gap:2px; }
.app-brand small,.eyebrow { color:var(--terracotta); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.app-brand strong { font-size:15px; font-weight:600; line-height:1.05; }
.app-nav { display:flex; align-items:center; gap:4px; }
.app-nav-link { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:8px 11px; color:var(--muted); border-radius:8px; font-size:13px; font-weight:700; text-decoration:none; }
.app-nav-link:hover,.app-nav-link.is-active { color:var(--wine); background:#eef0f3; }
.user-menu { display:flex; justify-self:end; align-items:center; gap:8px; padding-left:14px; border-left:1px solid var(--line-soft); }
.user-avatar { display:grid; place-items:center; width:30px; height:30px; color:#fff; border-radius:50%; background:var(--wine); font-size:12px; font-weight:800; }
.user-identity { display:grid; gap:1px; }
.user-identity strong { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.user-identity small { color:var(--muted); font-size:11px; }
.app-nav-exit-form { display:inline-flex; margin:0; }
.app-nav-exit { margin-left:4px; padding:0; color:var(--wine); border:0; background:transparent; font-size:12px; font-weight:700; line-height:1.2; text-decoration:none; cursor:pointer; }
.app-nav-exit:hover,.app-nav-exit:focus { color:var(--wine-deep); }
.app-nav-exit:focus-visible { outline:2px solid var(--wine); outline-offset:3px; border-radius:4px; }
.workflow-page { width:min(1180px,calc(100% - 40px)); margin:24px auto 52px; }

.stack-form { display:grid; gap:14px; }
label { display:grid; gap:6px; margin:0; color:#39414b; font-size:12px; font-weight:500; }
input,textarea,select { width:100%; padding:12px 13px; color:var(--ink); border:1px solid #ccd2d9; border-radius:7px; background:#fff; outline:none; line-height:1.4; transition:border-color .16s,box-shadow .16s; }
input:hover,textarea:hover,select:hover { border-color:#aeb6c0; }
input:focus,textarea:focus,select:focus { border-color:var(--wine); box-shadow:0 0 0 4px var(--focus); }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 14px; color:#fff; border:1px solid var(--wine); border-radius:7px; background:var(--wine); font-size:12px; font-weight:600; text-decoration:none; cursor:pointer; }
.button:hover { background:var(--wine-deep); }
.button.ghost { color:#343b44; border-color:#d4d9df; background:#fff; }
.button.ghost:hover { color:var(--wine); background:#f7f8f9; }
.button.small { min-height:32px; padding:7px 11px; font-size:11px; }
.button:disabled { cursor:not-allowed; opacity:.55; }

.status-badge { display:block; margin:0 0 16px; padding:11px 13px; color:#2e7257; border-radius:10px; background:#eaf6ef; font-size:11px; font-weight:700; line-height:1.5; }
.status-badge.danger { color:#9e3038; background:#ffefef; }
.auth-page {
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 18%,rgba(157,85,68,.09) 0,transparent 31%),
    radial-gradient(circle at 88% 12%,rgba(77,195,213,.07) 0,transparent 27%),
    radial-gradient(circle at 78% 88%,rgba(125,38,49,.055) 0,transparent 31%),
    linear-gradient(135deg,#fbfaf7 0%,#f7f5f1 52%,#faf8f5 100%);
  font-family:"HK Grotesk","Segoe UI",Arial,sans-serif;
}
.auth-layout { display:grid; grid-template-columns:1fr minmax(330px,400px); align-items:center; gap:clamp(40px,7vw,90px); width:min(1040px,calc(100% - 40px)); min-height:100vh; margin:0 auto; }
.auth-intro { max-width:510px; }
.auth-intro img { width:88px; height:88px; margin-bottom:19px; object-fit:contain; }
.auth-intro h1 { max-width:520px; margin:7px 0 15px; font-size:clamp(34px,4vw,48px); font-weight:600; line-height:1.08; letter-spacing:-.035em; }
.auth-intro p { max-width:430px; color:var(--muted); font-size:15px; line-height:1.65; }
.auth-intro span { color:var(--wine); font-size:13px; font-weight:700; }
.auth-card { padding:28px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.94); box-shadow:0 12px 36px rgba(20,27,35,.08); }
.auth-card h2 { margin:7px 0; font-size:24px; font-weight:600; }
.auth-copy { margin:0 0 24px; color:var(--muted); font-size:14px; line-height:1.5; }
.password-field { position:relative; display:block; }
.password-field input { padding-right:48px; }
.password-toggle { position:absolute; top:50%; right:8px; display:grid; place-items:center; width:36px; height:36px; padding:0; transform:translateY(-50%); color:var(--muted); border:0; border-radius:8px; background:transparent; cursor:pointer; }
.password-toggle:hover { color:var(--wine); background:rgba(125,38,49,.07); }
.password-toggle:focus-visible { outline:3px solid var(--focus); outline-offset:1px; }
.remember-option { display:flex; align-items:center; gap:8px; width:max-content; cursor:pointer; }
.remember-option input { flex:0 0 auto; width:17px; height:17px; margin:0; accent-color:var(--wine); }
.remember-option span { font-size:12px; font-weight:600; }

.recipe-card-icon { display:inline-grid; place-items:center; width:34px; min-width:34px; height:34px; min-height:34px; padding:0; color:var(--wine); border:1px solid #d4d9df; border-radius:7px; background:#fff; font:inherit; text-decoration:none; cursor:pointer; }
.recipe-card-icon:hover { color:#fff; border-color:var(--wine); background:var(--wine); }
.recipe-card-icon-danger:hover { border-color:#a12634; background:#a12634; }
.recipe-card-icon:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-color:var(--wine); }
.recipe-card-icon i { font-size:13px; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

.app-dialog { position:fixed; inset:0; z-index:1200; display:none; place-items:center; padding:24px; }
.app-dialog.is-open { display:grid; }
.app-dialog__backdrop { position:absolute; inset:0; background:rgba(31,28,27,.62); backdrop-filter:blur(2px); }
.app-dialog__panel { position:relative; z-index:1; display:grid; gap:24px; width:min(100%,600px); padding:34px 32px 32px; border:1px solid #e1d8d3; border-radius:12px; background:#fff; box-shadow:0 24px 70px rgba(24,20,19,.28); }
.app-dialog__panel h2,.app-dialog__panel p { margin:0; }
.app-dialog__panel h2 { padding-right:52px; font-size:25px; line-height:1.2; }
.app-dialog__panel p { color:var(--muted); font-size:16px; line-height:1.55; }
.app-dialog__message { display:grid; gap:16px; }
.app-dialog__message>div { display:grid; gap:4px; }
.app-dialog__message strong { color:var(--ink); font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.app-dialog__message>div:last-child p { font:13px ui-monospace,SFMono-Regular,Consolas,monospace; }
.app-dialog__panel[data-dialog-type="error"] { border-top:4px solid #b4232f; }
.app-dialog__panel[data-dialog-type="warning"],.app-dialog__panel[data-dialog-type="conflict"] { border-top:4px solid #946018; }
.app-dialog__close { position:absolute; top:15px; right:15px; display:grid; place-items:center; width:45px; height:45px; padding:0; color:#737b85; border:0; border-radius:10px; background:#f4f1ef; font-size:28px; line-height:1; cursor:pointer; }
.app-dialog__close:hover { color:var(--wine); background:#eee9e6; }
.app-dialog__actions { display:flex; justify-content:flex-end; gap:12px; margin-top:2px; }
.app-dialog__actions .button { min-width:140px; }
.has-open-dialog { overflow:hidden; }

@media (max-width:800px) {
  .app-header { grid-template-columns:1fr auto; gap:8px; }
  .app-nav { order:3; grid-column:1/-1; justify-content:flex-start; overflow-x:auto; }
  .user-identity { display:none; }
  .auth-layout { grid-template-columns:1fr; gap:28px; padding:50px 0; }
}
@media (max-width:640px) {
  .app-header { padding:9px 12px; }
  .app-brand span,.user-menu { display:none; }
  .workflow-page { width:calc(100% - 24px); margin:16px auto 36px; }
  .auth-layout { width:calc(100% - 28px); padding:28px 0; }
  .auth-intro h1 { font-size:34px; }
  .auth-intro img { width:64px; height:64px; }
  .auth-card { padding:22px 18px; }
}
@media (max-width:520px) {
  .app-dialog { padding:14px; }
  .app-dialog__panel { gap:20px; padding:28px 20px 20px; }
  .app-dialog__panel h2 { font-size:22px; }
  .app-dialog__panel p { font-size:15px; }
  .app-dialog__actions { display:grid; grid-template-columns:1fr; }
  .app-dialog__actions .button { width:100%; }
}