/* =========================================================================
   LSTUDIO Management — Design Tokens
   Direction: a working drawing, not a brochure. Cool vellum paper, hairline
   rules, blueprint ink for interaction, and a redline accent borrowed from
   the pencil architects use to mark up a plan. Data reads in mono, like a
   coordinate readout; everything else reads in a quiet grotesk.
   ========================================================================= */

:root{
  color-scheme: light;

  /* ---- Type families ------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* ---- Type scale ------------------------------------------------------ */
  --text-2xs: 0.6875rem;   /* 11px — kbd, micro labels */
  --text-xs:  0.75rem;     /* 12px — eyebrows, captions */
  --text-sm:  0.8125rem;   /* 13px — dense UI text */
  --text-base:0.9375rem;   /* 15px — body */
  --text-md:  1.0625rem;   /* 17px */
  --text-lg:  1.375rem;    /* 22px */
  --text-xl:  1.75rem;     /* 28px */
  --text-2xl: 2.375rem;    /* 38px */
  --text-3xl: 3.25rem;     /* 52px */

  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* ---- Spacing (8px baseline) ------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5.5rem;

  /* ---- Radii & lines ----------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --hairline: 1px;
  --stroke-w: 1.5px;

  /* ---- Motion --------------------------------------------------------- */
  --ease-plan: cubic-bezier(0.22, 0.61, 0.23, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(20, 24, 28, 0.06);
  --shadow-md: 0 6px 20px -6px rgba(20, 24, 28, 0.14);
  --shadow-lg: 0 20px 48px -16px rgba(20, 24, 28, 0.22);
  --shadow-focus: 0 0 0 3px var(--blue-100);

  /* ===== Light theme (default) ===== */
  --paper: #EEEFE9;          /* vellum — cool warm-gray, not cream */
  --paper-raised: #F8F8F4;   /* cards, panels */
  --paper-sunken: #E4E5DE;   /* inset fields, skeletons */
  --surface: #FFFFFF;

  --ink-900: #14181B;
  --ink-700: #3D444A;
  --ink-500: #6B7278;
  --ink-300: #A6ACA9;
  --ink-100: #D4D6D0;

  --line: #D7D8D0;
  --line-strong: #BEC0B6;

  --blue-900: #0D2A46;
  --blue-700: #1A1A1A;   /* primary — blueprint ink */
  --blue-600: #1A1A1A;
  --blue-500: #2E6FA6;
  --blue-100: #E3EBF1;

  --red-600: #B5432A;    /* redline — destructive / errors / annotation */
  --red-100: #F5E6E0;

  --green-600: #3D7A54;
  --green-100: #E4EFE7;

  --amber-600: #A8722E;
  --amber-100: #F2E9DA;

  --overlay: rgba(15, 18, 21, 0.5);
}

/* ===== Dark theme ===== */
[data-theme="dark"]{
  color-scheme: dark;

  --paper: #14181B;
  --paper-raised: #1B2024;
  --paper-sunken: #0E1113;
  --surface: #1B2024;

  --ink-900: #F1F1EB;
  --ink-700: #C7CAC5;
  --ink-500: #8B9096;
  --ink-300: #565C60;
  --ink-100: #2A3034;

  --line: #2A3034;
  --line-strong: #3B4247;

  --blue-900: #D6E6F3;
  --blue-700: #5D9BD1;
  --blue-600: #4A88C0;
  --blue-500: #3E77AC;
  --blue-100: #1D2D3A;

  --red-600: #DE8163;
  --red-100: #33241E;

  --green-600: #6FBB8A;
  --green-100: #1F2E24;

  --amber-600: #E1AE68;
  --amber-100: #332A1B;

  --overlay: rgba(6, 8, 10, 0.65);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px -6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 48px -16px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 3px var(--blue-100);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===== Reset ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }
* { margin: 0; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur-base) var(--ease-plan), color var(--dur-base) var(--ease-plan);
}

img, picture, svg, canvas, video{ display: block; max-width: 100%; }

input, button, textarea, select{
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button{ cursor: pointer; }
button:disabled{ cursor: not-allowed; }

a{ color: inherit; text-decoration: none; }

ul, ol{ list-style: none; padding: 0; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: -0.01em;
}

p{ color: var(--ink-700); }

::selection{ background: var(--blue-700); color: var(--surface); }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: var(--ink-300);
  border-radius: var(--radius-full);
  border: 2px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover{ background: var(--ink-500); }

:focus-visible{
  outline: var(--stroke-w) solid var(--blue-700);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================================
   Layout — dashboard shell
   ========================================================================= */

.app-shell{
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100svh;
  background: var(--paper);
}

/* ---- Sidebar --------------------------------------------------------- */
.sidebar{
  display: flex;
  flex-direction: column;
  height: 100svh;
  position: sticky;
  top: 0;
  padding: var(--space-5) var(--space-4);
  border-right: var(--hairline) solid var(--line);
  background: var(--paper-raised);
  z-index: 40;
  transition: transform var(--dur-base) var(--ease-plan);
}

.brand-block{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: 0 var(--space-2);
}
.brand{ display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.brand-symbol{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--blue-700);
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}
.brand-copy{ display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: 0.01em;
}
.brand-product{
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-500);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.sidebar-close{ display: none; }
.desktop-expand-icon{ display: none; }

.main-nav{ flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.nav-label{
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-300);
  padding: var(--space-4) var(--space-3) var(--space-1);
}
.nav-link{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-700);
  position: relative;
  transition: background var(--dur-fast) var(--ease-plan), color var(--dur-fast) var(--ease-plan);
}
.nav-link i{ width: 18px; text-align: center; font-size: 14px; color: var(--ink-300); transition: color var(--dur-fast) var(--ease-plan); }
.nav-link:hover{ background: var(--paper-sunken); color: var(--ink-900); }
.nav-link:hover i{ color: var(--blue-700); }
.nav-link.active,
.nav-link[aria-current="page"]{ background: var(--blue-100); color: var(--blue-700); }
.nav-link.active i,
.nav-link[aria-current="page"] i{ color: var(--blue-700); }
.nav-link.active::before{
  content: "";
  position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px;
  background: var(--blue-700);
  border-radius: var(--radius-full);
}

.sidebar-footer{ padding-top: var(--space-4); margin-top: var(--space-3); border-top: var(--hairline) solid var(--line); }
.user-compact{ display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); }
.user-compact strong{ display: block; font-size: var(--text-sm); font-weight: 500; }
.user-compact small{ display: block; font-size: var(--text-xs); color: var(--ink-500); }

/* .sidebar-scrim itself is defined once in responsive.css, next to the
   media queries that govern it — no duplicate rule here. */

/* ---- Workspace / topbar ------------------------------------------------ */
.workspace{ display: flex; flex-direction: column; min-width: 0; }

.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 68px;
  padding: 0 var(--space-6);
  border-bottom: var(--hairline) solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar-left{ display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.menu-button{ display: none; }
/* app.js injects: <span class="topbar-eyebrow">…</span><strong>Title<span
   class="topbar-detail">…</span></strong> — style each part explicitly
   rather than the flat mono line this used to assume. */
.breadcrumbs{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.topbar-eyebrow{
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs strong{
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-detail{
  margin-left: var(--space-2);
  font-weight: 400;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-500);
}
.topbar-actions{ display: flex; align-items: center; gap: var(--space-3); }

.search-trigger{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: var(--hairline) solid var(--line);
  background: var(--paper-raised);
  color: var(--ink-500);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-plan);
}
.search-trigger span{ display: none; }
.search-trigger:hover{ border-color: var(--blue-700); color: var(--blue-700); }
@media (min-width: 900px){
  .search-trigger{ width: 220px; justify-content: flex-start; }
  .search-trigger span{ display: inline; margin-right: auto; }
}

.route-view{
  flex: 1;
  padding: var(--space-6);
  outline: none;
}

/* ---- Offline banner ------------------------------------------------------ */
.offline-banner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--amber-100);
  color: var(--amber-600);
  font-size: var(--text-xs);
  text-align: center;
  border-bottom: var(--hairline) solid var(--line);
}
.offline-banner small{ color: var(--ink-500); }
.offline-banner[hidden]{ display: none; }

/* =========================================================================
   Layout — login page
   ========================================================================= */

.login-page{ background: var(--ink-900); }

.login-layout{
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100svh;
}

.login-atmosphere{
  position: relative;
  overflow: hidden;
  background: var(--blue-900);
  display: none;
}
.login-panel{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--paper);
  position: relative;
}
.login-content{
  width: 100%;
  max-width: 380px;
  position: relative;
}
/* Login theme toggle — always visible inside the login panel. */
.login-theme-toggle{
  position:absolute;
  top:20px;
  right:20px;
  z-index:40;
  width:46px;
  height:46px;
  min-width:46px;
  border-radius:14px;
  border:1px solid #1A1A1A;
  background:#1A1A1A;
  color:#fff;
  box-shadow:0 8px 22px rgba(26,26,26,.16);
  opacity:1;
  visibility:visible;
  transform:none;
  transition:background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.login-theme-toggle i{font-size:16px;color:inherit;pointer-events:none}
.login-theme-toggle:hover{
  background:#242424;
  border-color:#242424;
  color:#fff;
  transform:none;
  box-shadow:0 8px 22px rgba(26,26,26,.18);
}
.login-theme-toggle:active{transform:scale(.97)}
.login-theme-toggle:focus-visible{outline:3px solid rgba(26,26,26,.22);outline-offset:3px}
[data-theme="dark"] .login-theme-toggle{
  background:#f2f2ef;
  border-color:#f2f2ef;
  color:#1A1A1A;
  box-shadow:0 8px 22px rgba(0,0,0,.24);
}
[data-theme="dark"] .login-theme-toggle:hover{background:#ecece8;border-color:#ecece8;color:#1A1A1A;transform:none;box-shadow:0 8px 22px rgba(0,0,0,.26)}
[data-theme="dark"] .login-theme-toggle:focus-visible{outline-color:rgba(242,242,239,.34)}
@media(max-width:900px){.login-theme-toggle{top:14px;right:14px;width:44px;height:44px;min-width:44px}}

.login-brand{
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-8);
}
.login-brand span{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
}
.login-brand small{
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-500);
  letter-spacing: var(--tracking-wide);
}

.login-copy h1{
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}
.login-copy p{ font-size: var(--text-base); margin-bottom: var(--space-7); }

.login-actions{ display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }
.login-actions .text-button{ align-self: center; margin-top: var(--space-2); }

.login-footer{
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--line);
  font-size: var(--text-2xs);
  color: var(--ink-300);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

@media (min-width: 901px){
  .login-layout{ grid-template-columns: 1.15fr 1fr; }
  .login-atmosphere{ display: block; }
}

/* =========================================================================
   Layout — setup wizard
   ========================================================================= */

.setup-shell{
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100svh;
  background: var(--paper);
}

.setup-aside{
  display: none;
  position: relative;
  overflow: hidden;
  background: var(--blue-900);
  padding: var(--space-8);
  flex-direction: column;
  justify-content: space-between;
}
.setup-aside-brand{ display: flex; align-items: baseline; gap: var(--space-2); position: relative; z-index: 1; }
.setup-aside-brand span{ font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: #fff; }
.setup-aside-brand small{ font-family: var(--font-mono); font-size: var(--text-2xs); color: rgba(255,255,255,0.55); }

.setup-aside-copy{ position: relative; z-index: 1; color: #fff; max-width: 360px; }
.setup-step-number{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-wide);
}
.setup-aside-copy > p{ font-size: var(--text-sm); color: rgba(255,255,255,0.7); margin-bottom: var(--space-2); }
.setup-aside-copy h2{ font-size: var(--text-2xl); color: #fff; margin-bottom: var(--space-4); }
.setup-aside-copy small{ display: block; font-size: var(--text-sm); color: rgba(255,255,255,0.6); line-height: var(--lh-snug); max-width: 300px; }

.setup-aside-footer{
  position: relative; z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.08em;
}

.setup-main{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  position: relative;
}
.setup-theme-toggle{ position: absolute; top: var(--space-5); right: var(--space-5); }

.setup-content{ width: 100%; max-width: 440px; }

.setup-progress{ display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.setup-progress span{ width: 26px; height: 3px; border-radius: var(--radius-full); background: var(--line-strong); }
.setup-progress span.active{ background: var(--blue-700); }
.setup-progress small{
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-500);
  letter-spacing: 0.04em;
}

.setup-content h1{ font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.setup-intro{ font-size: var(--text-base); margin-bottom: var(--space-7); max-width: 40ch; }

.setup-change-account{ display: block; margin: var(--space-6) auto 0; }

.setup-footer{
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-7);
  font-size: var(--text-2xs);
  font-family: var(--font-mono);
  color: var(--ink-300);
}
.setup-footer i{ margin-right: 4px; }

@media (min-width: 960px){
  .setup-shell{ grid-template-columns: 1fr 1.1fr; }
  .setup-aside{ display: flex; }
  .setup-footer{ margin-top: var(--space-9); max-width: 440px; }
}


/* =========================================================================
   Components
   ========================================================================= */

/* ---- Eyebrow / labels -------------------------------------------------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: var(--space-3);
}
.eyebrow::before{
  content: "";
  width: 14px;
  height: var(--stroke-w);
  background: var(--blue-700);
}

/* ---- Buttons ------------------------------------------------------------ */
.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: var(--hairline) solid transparent;
  transition: background var(--dur-fast) var(--ease-plan),
              border-color var(--dur-fast) var(--ease-plan),
              transform var(--dur-fast) var(--ease-plan),
              box-shadow var(--dur-fast) var(--ease-plan);
  white-space: nowrap;
}
.button:active{ transform: translateY(1px); }

.button-primary{
  background: var(--blue-700);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.button-primary:hover{ background: var(--blue-600); box-shadow: var(--shadow-md); }

.button-secondary{
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-900);
}
.button-secondary:hover{ border-color: var(--blue-700); color: var(--blue-700); }

.button-large{ height: 52px; padding: 0 var(--space-6); font-size: var(--text-base); width: 100%; }

.button.loading{ opacity: 0.75; pointer-events: none; }
.button.loading i{ animation: spin 900ms linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.button-danger{ background: var(--red-600); color: #fff; border-color: transparent; }
.button-danger:hover{ background: var(--red-600); filter: brightness(0.92); }

.button-primary.topbar-create{
  width: auto; height: 38px; padding: 0 var(--space-4);
}
.button-primary.topbar-create span{ display: none; }
@media (min-width: 720px){
  .button-primary.topbar-create span{ display: inline; }
}

.text-button{
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-500);
  border-bottom: var(--hairline) solid transparent;
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-plan), border-color var(--dur-fast) var(--ease-plan);
}
.text-button:hover{ color: var(--blue-700); border-color: var(--blue-700); }

/* ---- Icon button --------------------------------------------------------- */
.icon-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  border: var(--hairline) solid var(--line);
  color: var(--ink-700);
  font-size: 14px;
  transition: border-color var(--dur-fast) var(--ease-plan),
              color var(--dur-fast) var(--ease-plan),
              background var(--dur-fast) var(--ease-plan);
}
.icon-button:hover{ border-color: var(--blue-700); color: var(--blue-700); }

/* Theme toggle: swap moon/sun via [data-theme] */
[data-theme="dark"] .theme-toggle .fa-moon::before{ content: "\f185"; } /* sun glyph */

/* ---- Kbd ------------------------------------------------------------------ */
kbd{
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: var(--hairline) solid var(--line-strong);
  background: var(--paper-raised);
  color: var(--ink-500);
  line-height: 1.4;
}

/* ---- Avatar ------------------------------------------------------------ */
.avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--blue-700);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.topbar-avatar{
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--blue-700);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.user-menu-avatar{ width: 40px; height: 40px; font-size: var(--text-sm); }

/* ---- Dropdown / popover menus -------------------------------------------- */
.user-menu{ position: relative; }
.user-menu-popover{
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 280px;
  background: var(--paper-raised);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  z-index: 60;
  animation: pop-in var(--dur-base) var(--ease-plan);
}
.user-menu-popover[hidden]{ display: none; }

@keyframes pop-in{
  from{ opacity: 0; transform: translateY(-6px) scale(0.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

.user-menu-identity{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-3);
  border-bottom: var(--hairline) solid var(--line);
}
.user-menu-identity strong{ display: block; font-size: var(--text-sm); }
.user-menu-identity small{ color: var(--ink-500); font-size: var(--text-xs); }

.user-menu-links a{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-plan);
}
.user-menu-links a:hover{ background: var(--paper-sunken); }
.user-menu-links strong{ display: block; font-size: var(--text-sm); font-weight: 500; }
.user-menu-links small{ color: var(--ink-500); font-size: var(--text-xs); }
.user-menu-links > a > i:last-child{ margin-left: auto; font-size: 11px; color: var(--ink-300); }
.user-menu-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: var(--paper-sunken); color: var(--blue-700); font-size: 13px; flex-shrink: 0;
}

.user-menu-signout{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--line);
  color: var(--red-600);
  font-size: var(--text-sm);
  font-weight: 500;
}
.user-menu-signout:hover{ opacity: 0.75; }

/* ---- Command / global search dialog -------------------------------------- */
.command-dialog{
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: min(14vh, 140px);
}
.command-dialog[hidden]{ display: none; }
.dialog-backdrop{
  position: absolute; inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  border: none;
}
.command-panel{
  position: relative;
  width: min(560px, calc(100vw - 2 * var(--space-5)));
  background: var(--paper-raised);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop-in var(--dur-base) var(--ease-plan);
}
.command-input-wrap{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--hairline) solid var(--line);
  color: var(--ink-500);
}
.command-input-wrap input{
  flex: 1;
  font-size: var(--text-base);
  color: var(--ink-900);
}
.command-input-wrap input::placeholder{ color: var(--ink-300); }
.command-input-wrap kbd{ flex-shrink: 0; }
.command-results{
  max-height: 360px;
  overflow-y: auto;
  padding: var(--space-3);
  min-height: 80px;
}
.command-results:empty::after{
  content: "Commencez à taper pour rechercher un projet, un client ou une facture.";
  display: block;
  padding: var(--space-5) var(--space-3);
  color: var(--ink-500);
  font-size: var(--text-sm);
  text-align: center;
}

/* ---- Modal / toast layer (structural hooks for app.js) ------------------ */
.modal-layer{ position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.modal-layer:not(:empty){ pointer-events: auto; }

.modal-backdrop{
  position: fixed; inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  border: none;
}
.modal{
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 2 * var(--space-5)));
  max-height: min(680px, calc(100vh - 2 * var(--space-5)));
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop-in var(--dur-base) var(--ease-plan);
}
.modal.modal-wide{ width: min(720px, calc(100vw - 2 * var(--space-5))); }

.modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: var(--hairline) solid var(--line);
  flex-shrink: 0;
}
.modal-header h2{ font-size: var(--text-md); }

.modal form{ display: flex; flex-direction: column; min-height: 0; }
.modal-body{ padding: var(--space-5); overflow-y: auto; }
.modal-footer{
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: var(--hairline) solid var(--line);
  flex-shrink: 0;
}

.content-stack{ display: flex; flex-direction: column; gap: var(--space-2); }

/* ---- Search results (command palette + quick-create menu) ---------------- */
.search-result{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-align: left;
  transition: background var(--dur-fast) var(--ease-plan);
}
.search-result:hover{ background: var(--paper-sunken); }
.search-result > span:not(.search-result-icon){ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-result strong{ font-size: var(--text-sm); font-weight: 500; }
.search-result small{ color: var(--ink-500); font-size: var(--text-xs); }
.search-result > i:last-child{ margin-left: auto; font-size: 12px; color: var(--ink-300); flex-shrink: 0; }
.search-result-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--blue-100); color: var(--blue-700); font-size: 14px; flex-shrink: 0;
}

/* ---- Toasts ---------------------------------------------------------------- */
.toast-region{
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 110;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(360px, calc(100vw - 2 * var(--space-5)));
}
.toast{
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  border: var(--hairline) solid var(--line);
  box-shadow: var(--shadow-md);
  animation: toast-in var(--dur-base) var(--ease-plan);
}
@keyframes toast-in{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}
.toast strong{ display: block; font-size: var(--text-sm); margin-bottom: 2px; }
.toast p{ font-size: var(--text-xs); color: var(--ink-500); }
.toast i{ margin-top: 2px; font-size: 15px; }
.toast-success i{ color: var(--green-600); }
.toast-error i{ color: var(--red-600); }
.toast-info i{ color: var(--blue-700); }

/* ---- Badges ------------------------------------------------------------ */
.badge{
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 500;
  font-family: var(--font-mono);
}
.badge::before{ content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.badge-success{ background: var(--green-100); color: var(--green-600); }
.badge-warning{ background: var(--amber-100); color: var(--amber-600); }
.badge-danger{ background: var(--red-100); color: var(--red-600); }
.badge-neutral{ background: var(--paper-sunken); color: var(--ink-500); }


/* =========================================================================
   Forms
   ========================================================================= */

.form-field{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

label{
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-900);
}
label.required::after{
  content: " *";
  color: var(--red-600);
}

.setup-label-line{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.setup-label-line a{
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--blue-700);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.setup-label-line a:hover{ text-decoration: underline; }

.input,
input[type="text"], input[type="url"], input[type="email"], input[type="search"], input[type="password"]{
  height: 48px;
  padding: 0 var(--space-4);
  background: var(--paper-raised);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--ink-900);
  transition: border-color var(--dur-fast) var(--ease-plan), box-shadow var(--dur-fast) var(--ease-plan);
  width: 100%;
}
.input::placeholder{ color: var(--ink-300); }
.input:hover{ border-color: var(--ink-300); }
.input:focus-visible{
  outline: none;
  border-color: var(--blue-700);
  box-shadow: var(--shadow-focus);
}

.setup-input-wrap{
  position: relative;
  display: flex;
  align-items: center;
}
.setup-input-wrap i{
  position: absolute;
  left: var(--space-4);
  color: var(--ink-300);
  font-size: 13px;
  pointer-events: none;
}
.setup-input-wrap .input{ padding-left: calc(var(--space-4) * 2 + 13px); }
.setup-input-wrap:focus-within i{ color: var(--blue-700); }

.field-help{
  font-size: var(--text-xs);
  color: var(--ink-500);
  line-height: var(--lh-snug);
}

.form-help{
  font-size: var(--text-xs);
  color: var(--ink-500);
  min-height: 1.2em;
}
.form-help[data-state="error"], .form-help.error{ color: var(--red-600); }
.form-help[data-state="success"], .form-help.success{ color: var(--green-600); }

/* ---- Google identity slot ------------------------------------------------ */
.google-button-slot{ min-height: 0; }
.google-button-slot:empty{ display: none; }

.google-mark{
  display: inline-flex;
  width: 18px; height: 18px;
  align-items: center; justify-content: center;
  font-size: 13px;
}

/* ---- Setup owner callout -------------------------------------------------- */
.setup-owner-card{
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--amber-100);
  border: var(--hairline) solid var(--line);
  margin-bottom: var(--space-6);
}
.setup-owner-card > span{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--amber-600);
  flex-shrink: 0;
  font-size: 13px;
}
.setup-owner-card strong{ display: block; font-size: var(--text-sm); margin-bottom: 2px; }
.setup-owner-card p{ font-size: var(--text-xs); color: var(--ink-700); line-height: var(--lh-snug); }
.setup-owner-card b{ color: var(--ink-900); }

/* ---- Setup connected-account chip ----------------------------------------- */
.setup-identity{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  margin-bottom: var(--space-6);
}
.setup-identity > span:first-child{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--paper-sunken); font-size: 14px; flex-shrink: 0;
}
.setup-identity small{ display: block; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--ink-500); }
.setup-identity strong{ font-size: var(--text-sm); font-weight: 500; }
.setup-identity i{ margin-left: auto; color: var(--green-600); font-size: 16px; }


/* =========================================================================
   Tables
   ========================================================================= */

.table-wrap{
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-raised);
}

table{ width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

thead th{
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-500);
  background: var(--paper-sunken);
  border-bottom: var(--hairline) solid var(--line);
  white-space: nowrap;
}

tbody td{
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--hairline) solid var(--line);
  color: var(--ink-900);
  vertical-align: middle;
}
tbody tr:last-child td{ border-bottom: none; }
tbody tr{ transition: background var(--dur-fast) var(--ease-plan); }
tbody tr:hover{ background: var(--paper-sunken); }

td.numeric, th.numeric{ text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- Status pills -------------------------------------------------------- */
.pill{
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 500;
  font-family: var(--font-mono);
}
.pill::before{ content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.pill-success{ background: var(--green-100); color: var(--green-600); }
.pill-warning{ background: var(--amber-100); color: var(--amber-600); }
.pill-danger{ background: var(--red-100); color: var(--red-600); }
.pill-neutral{ background: var(--paper-sunken); color: var(--ink-500); }


/* =========================================================================
   Dashboard — loading & empty states
   ========================================================================= */

.page-skeleton{ display: flex; flex-direction: column; gap: var(--space-5); }

.skeleton{
  position: relative;
  overflow: hidden;
  background: var(--paper-sunken);
  border-radius: var(--radius-md);
}
.skeleton::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    var(--paper-raised) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: skeleton-sweep 1.6s var(--ease-plan) infinite;
}

@keyframes skeleton-sweep{
  to{ transform: translateX(100%); }
}

.skeleton-title{ width: 240px; height: 30px; }

.skeleton-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
.skeleton-card{ height: 140px; }

/* ---- Empty / error states — matches ui.js's emptyState()/errorState() ----
   Markup: .empty-state > div > (.empty-state-mark > i, h3, p, button?) ---- */
.empty-state{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 240px;
  padding: var(--space-8) var(--space-6);
  border: var(--hairline) dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.empty-state > div{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 360px;
}
.empty-state-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--paper-sunken);
  color: var(--blue-700);
  font-size: 18px;
}
.empty-state h3{ font-size: var(--text-md); }
.empty-state p{ color: var(--ink-500); font-size: var(--text-sm); line-height: var(--lh-snug); }
.empty-state .button{ margin-top: var(--space-2); }

/* ---- Generic card ------------------------------------------------------- */
.card{
  background: var(--paper-raised);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}


/* =========================================================================
   Responsive
   ========================================================================= */

/* ---- ≤ 900px: sidebar becomes an off-canvas drawer -----------------------
   Matches app.js's mobileQuery = matchMedia('(max-width: 900px)').
   app.js toggles the drawer with sidebar.classList.add/remove('open') and
   shows/hides #sidebarScrim via its `hidden` property directly — it never
   sets any data-attribute on .app-shell, so the CSS hooks on the class and
   the [hidden] state, not on the container. ---------------------------- */
@media (max-width: 720px){
  .app-shell{ grid-template-columns: 1fr; }

  .sidebar{
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 84vw);
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open{ transform: translateX(0); }

  .sidebar-close .mobile-close-icon{ display: inline; }
  .sidebar-close .desktop-collapse-icon,
  .sidebar-close .desktop-expand-icon{ display: none; }
  .sidebar-close{
    display: inline-flex;
    width: 34px; height: 34px;
  }

  .menu-button{ display: inline-flex; }

  .topbar{ padding: 0 var(--space-4); }
  .route-view{ padding: var(--space-4); }
}

/* #sidebarScrim ships with the `hidden` attribute in the HTML and app.js
   toggles that attribute directly (scrim.hidden = true/false) — so the
   element must NOT carry a competing `display:none` of its own, or removing
   `hidden` would never reveal it. */
.sidebar-scrim{
  position: fixed;
  inset: 0;
  background: var(--overlay);
  border: none;
  z-index: 39;
}
.sidebar-scrim[hidden]{ display: none !important; }

@media (min-width: 901px){
  .sidebar-scrim{ display: none !important; }
}

/* ---- Desktop collapsed sidebar --------------------------------------------
   app.js sets document.documentElement.dataset.sidebar = 'collapsed' (via
   the sidebar-close button) and relies on CSS alone for the visual change;
   it also toggles which of .desktop-collapse-icon / .desktop-expand-icon is
   shown. Text nodes in .nav-link aren't wrapped in their own element, so
   they're collapsed with font-size:0 on the link while the icon keeps an
   explicit font-size and stays visible. ------------------------------- */
@media (min-width: 901px){
  html[data-sidebar="collapsed"] .app-shell{ grid-template-columns: 84px 1fr; }
  html[data-sidebar="collapsed"] .sidebar{ width: 84px; padding-left: var(--space-2); padding-right: var(--space-2); }
  html[data-sidebar="collapsed"] .brand-block{ justify-content: center; padding: 0; }
  html[data-sidebar="collapsed"] .brand{ gap: 0; }
  html[data-sidebar="collapsed"] .brand-copy,
  html[data-sidebar="collapsed"] .nav-label,
  html[data-sidebar="collapsed"] .user-compact strong,
  html[data-sidebar="collapsed"] .user-compact small{ display: none; }
  html[data-sidebar="collapsed"] .nav-link{ justify-content: center; gap: 0; font-size: 0; padding: var(--space-3) 0; }
  html[data-sidebar="collapsed"] .nav-link i{ font-size: 16px; }
  html[data-sidebar="collapsed"] .nav-link.active::before{ display: none; }
  html[data-sidebar="collapsed"] .user-compact{ justify-content: center; padding: var(--space-2) 0; }
  html[data-sidebar="collapsed"] .desktop-collapse-icon{ display: none; }
  html[data-sidebar="collapsed"] .desktop-expand-icon{ display: inline; }
}


/* ---- Sidebar polish -------------------------------------------------------
   Large desktop: collapse control lives on the divider instead of consuming
   room beside the logo. Medium-width screens use an icon-only rail with no
   duplicate hamburger/chevron controls. Mobile keeps the off-canvas drawer. */
@media (min-width: 1101px){
  .sidebar{ position: sticky; }
  .sidebar-close{
    display: inline-flex;
    position: absolute;
    top: 20px;
    right: -15px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--paper-raised);
    border: 1px solid var(--line-strong);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    z-index: 5;
  }
  .sidebar-close:hover{ background: var(--paper-sunken); }
  .brand-block{ padding-right: 0; }
}

@media (min-width: 721px) and (max-width: 1100px){
  .app-shell{ grid-template-columns: 78px minmax(0,1fr); }
  .sidebar{
    width: 78px;
    padding: 18px 8px;
  }
  .brand-block{
    justify-content: center;
    padding: 0;
    margin-bottom: 22px;
  }
  .brand{ gap: 0; justify-content: center; }
  .brand-symbol{ width: 40px; height: 40px; border-radius: 10px; }
  .brand-copy,
  .nav-label,
  .user-compact strong,
  .user-compact small,
  .sidebar-close{ display: none !important; }
  .main-nav{ gap: 6px; }
  .nav-link{
    justify-content: center;
    gap: 0;
    min-height: 44px;
    padding: 10px 0;
    font-size: 0;
  }
  .nav-link i{ width: auto; font-size: 17px; }
  .nav-link.active::before{ display: none; }
  .user-compact{ justify-content: center; padding: 8px 0; }
  .menu-button{ display: none !important; }
  .topbar{ padding-left: 22px; }
}

@media (max-width: 720px){
  .brand-block{
    min-height: 42px;
    padding: 0;
    margin-bottom: 20px;
  }
  .sidebar-close{
    margin-left: auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .sidebar.open ~ .workspace .menu-button{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* ---- ≤ 640px: tighter spacing, stacked footers --------------------------- */
@media (max-width: 640px){
  .route-view{ padding: var(--space-3); }
  .topbar{ height: 60px; padding: 0 var(--space-3); }
  .breadcrumbs{ display: none; }

  .login-panel, .setup-main{ padding: var(--space-4); }
  .login-copy h1{ font-size: var(--text-xl); }
  .setup-content h1{ font-size: var(--text-xl); }

  .login-footer, .setup-footer{ flex-direction: column; gap: 4px; }

  .toast-region{
    left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
    width: auto;
  }

  .user-menu-popover{ width: min(320px, calc(100vw - 2 * var(--space-4))); right: -var(--space-2); }
}

/* ---- Wide desktop: give the workspace some breathing room ---------------- */
@media (min-width: 1440px){
  .route-view{ padding: var(--space-7) var(--space-8); }
  .command-dialog{ padding-top: min(18vh, 200px); }
}

/* ---- Print: strip chrome for exported views ------------------------------- */
@media print{
  .sidebar, .topbar, .toast-region, .command-dialog, .modal-layer{ display: none !important; }
  .app-shell{ display: block; }
  body{ background: #fff; color: #000; }
}


/* =========================================================================
   Signature — drawn, not decorated.
   A quiet reference to the working drawing: a blueprint grid, floating plan
   volumes rendered as line drawings, and a coordinate readout in mono type.
   Pure CSS — holds up even before login-visual.js paints the canvas.

   login-visual.js flips its own canvas palette opposite to the app theme
   (light-mode app → near-black canvas; dark-mode app → paper-light canvas),
   so these CSS overlay elements — which sit on top of the canvas — flip
   their own ink color the same way to stay legible in both states.
   ========================================================================= */

.login-atmosphere{
  --atmosphere-ink: 255, 255, 255;
}
[data-theme="dark"] .login-atmosphere{
  --atmosphere-ink: 26, 26, 26;
}

/* ---- Blueprint grid backdrop -------------------------------------------- */
.drawing-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--atmosphere-ink), 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--atmosphere-ink), 0.055) 1px, transparent 1px),
    linear-gradient(rgba(var(--atmosphere-ink), 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--atmosphere-ink), 0.03) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 45%, transparent 90%);
}

.architecture-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }

/* ---- Floating plan volumes (pure line drawings) --------------------------- */
.drawing-volume{
  position: absolute;
  border: 1px solid rgba(var(--atmosphere-ink), 0.16);
  border-radius: 2px;
}
.drawing-volume::before{
  content: "";
  position: absolute; inset: 10px;
  border: 1px dashed rgba(var(--atmosphere-ink), 0.1);
}
.volume-one{
  width: 280px; height: 190px;
  top: 16%; left: 12%;
  transform: rotate(-6deg);
  animation: drift-one 22s var(--ease-plan) infinite alternate;
}
.volume-two{
  width: 190px; height: 240px;
  bottom: 10%; right: 8%;
  transform: rotate(9deg);
  animation: drift-two 26s var(--ease-plan) infinite alternate;
}

@keyframes drift-one{
  from{ transform: rotate(-6deg) translate(0, 0); }
  to{ transform: rotate(-3deg) translate(10px, -14px); }
}
@keyframes drift-two{
  from{ transform: rotate(9deg) translate(0, 0); }
  to{ transform: rotate(6deg) translate(-12px, 10px); }
}

/* ---- Coordinate HUD -------------------------------------------------------- */
.architecture-hud{
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  color: rgba(var(--atmosphere-ink), 0.55);
  text-transform: uppercase;
}
.architecture-hud span:first-child{ display: inline-flex; align-items: center; gap: 6px; color: rgba(var(--atmosphere-ink), 0.75); }
.architecture-hud span:first-child i{
  width: 6px; height: 6px; border-radius: 50%;
  background: #6FBB8A;
  box-shadow: 0 0 0 3px rgba(111,187,138,0.2);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%, 100%{ opacity: 1; } 50%{ opacity: 0.35; }
}

.login-atmosphere > p{
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(var(--atmosphere-ink), 0.4);
}

/* ---- Setup aside grid ------------------------------------------------------ */
.setup-aside-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(160deg, black 20%, transparent 85%);
}

/* ---- Entrance -------------------------------------------------------------- */
.login-content,
.setup-content{
  animation: rise-in var(--dur-slow) var(--ease-plan) both;
}
@keyframes rise-in{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ---- Corner marks — drafting selection handles ---------------------------- */
.setup-identity,
.command-panel{ position: relative; }

.setup-identity::before,
.setup-identity::after{
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border-color: var(--blue-700);
  border-style: solid;
  opacity: 0.7;
}
.setup-identity::before{ top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; }
.setup-identity::after{ bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; }

/* ---- Dark-mode wash on the app shell --------------------------------------
   login-visual.js paints the canvas itself light (#f7f5f3) when the app is
   in dark mode, so the underlying div matches that instead of staying navy —
   it only shows briefly before the canvas paints, or if it fails to load.
   setup-aside has no canvas fighting it, so its navy panel stays constant. */
[data-theme="dark"] .login-atmosphere{ background: #f7f5f3; }
[data-theme="dark"] .setup-aside{ background: #0B1F33; }

/* ---- Small print polish ---------------------------------------------------- */
.setup-owner-card > span i,
.setup-owner-card i{ line-height: 1; }


/* ===== Single-file demo integration ===================================== */
[hidden]{display:none!important}
.demo-login{position:fixed;inset:0;z-index:9999;background:var(--paper);display:grid;place-items:center;padding:24px}
.demo-login-card{width:min(520px,100%);background:var(--paper-raised);border:1px solid var(--line);border-radius:24px;padding:38px;box-shadow:var(--shadow-lg)}
.demo-login-mark{width:58px;height:58px;border-radius:16px;background:var(--blue-700);color:white;display:grid;place-items:center;font-size:24px;margin-bottom:22px}
.demo-login h1{font-size:var(--text-2xl);margin-bottom:8px}.demo-login p{color:var(--ink-500)}
.demo-login-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}.demo-login-note{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-500)}
.demo-ribbon{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-500);padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:var(--paper-raised)}
.page{display:flex;flex-direction:column;gap:24px}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}.page-header h1{font-size:var(--text-xl);margin:0}.page-header p{margin-top:6px;color:var(--ink-500)}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.filters .field{min-width:180px;flex:1}.field-search{position:relative;min-width:240px}.field-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-500)}.field-search input{padding-left:36px!important}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.kpi-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:16px;padding:18px}.kpi-label{font-size:12px;color:var(--ink-500);text-transform:uppercase;letter-spacing:.08em}.kpi-value{display:block;font-family:var(--font-display);font-size:28px;margin-top:8px}.kpi-meta{display:block;font-size:12px;color:var(--ink-500);margin-top:4px}
.content-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.8fr);gap:18px}.panel{background:var(--paper-raised);border:1px solid var(--line);border-radius:16px;overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}.panel-head h2{font-size:16px}.panel-body{padding:16px 18px}.panel-list{display:flex;flex-direction:column}.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line)}.list-row:last-child{border-bottom:0}.list-main{min-width:0}.list-main strong{display:block}.list-main small{display:block;color:var(--ink-500);margin-top:3px}.list-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.data-table-wrap{overflow:auto;background:var(--paper-raised);border:1px solid var(--line);border-radius:16px}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}.data-table th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-500);background:var(--paper-sunken)}.data-table tr:last-child td{border-bottom:0}.data-table tbody tr:hover{background:color-mix(in srgb,var(--blue-100) 35%,transparent)}.cell-title{font-weight:600}.cell-sub{display:block;font-size:12px;color:var(--ink-500);margin-top:2px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid transparent}.badge-success{background:var(--green-100);color:var(--green-600)}.badge-warning{background:var(--amber-100);color:var(--amber-600)}.badge-danger{background:var(--red-100);color:var(--red-600)}.badge-info{background:var(--blue-100);color:var(--blue-700)}.badge-neutral{background:var(--paper-sunken);color:var(--ink-700);border-color:var(--line)}
.project-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}.project-card{display:flex;flex-direction:column;gap:14px;background:var(--paper-raised);border:1px solid var(--line);border-radius:16px;padding:18px;transition:.2s}.project-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.project-card-top{display:flex;justify-content:space-between;gap:12px}.project-code{font-family:var(--font-mono);font-size:11px;color:var(--ink-500)}.project-card h3{font-size:17px}.progress{height:6px;border-radius:999px;background:var(--paper-sunken);overflow:hidden}.progress>span{display:block;height:100%;background:var(--blue-700);border-radius:inherit}.project-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12px}.project-meta span{color:var(--ink-500)}.project-meta strong{display:block;color:var(--ink-900);margin-top:2px}
.chart{display:flex;align-items:flex-end;gap:12px;height:180px;padding:18px 4px 0}.bar-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%}.bar-stack{display:flex;align-items:flex-end;justify-content:center;gap:4px;flex:1;width:100%}.bar{width:min(18px,40%);border-radius:5px 5px 0 0;min-height:3px}.bar.invoice{background:var(--blue-700)}.bar.collect{background:var(--green-600)}.bar-label{font-size:10px;color:var(--ink-500);text-transform:capitalize}.legend{display:flex;gap:14px;font-size:11px;color:var(--ink-500)}.legend span:before{content:'';display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;background:var(--blue-700)}.legend span:last-child:before{background:var(--green-600)}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}.calendar-head{background:var(--paper-sunken);padding:9px;text-align:center;font-size:11px;text-transform:uppercase;color:var(--ink-500)}.calendar-day{background:var(--paper-raised);min-height:115px;padding:9px}.calendar-day.muted{opacity:.5}.calendar-num{font-family:var(--font-mono);font-size:11px;color:var(--ink-500)}.calendar-event{display:block;margin-top:6px;padding:5px 6px;border-radius:6px;background:var(--blue-100);color:var(--blue-700);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-event.visit{background:var(--amber-100);color:var(--amber-600)}
.detail-hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;background:var(--paper-raised);border:1px solid var(--line);border-radius:18px;padding:22px;flex-wrap:wrap}.detail-title h1{font-size:28px}.detail-title p{margin-top:6px}.detail-stats{display:flex;gap:24px;flex-wrap:wrap}.detail-stat span{display:block;font-size:11px;color:var(--ink-500);text-transform:uppercase}.detail-stat strong{display:block;margin-top:4px}.tabs{display:flex;gap:4px;overflow:auto;border-bottom:1px solid var(--line)}.tab{padding:10px 13px;border-bottom:2px solid transparent;color:var(--ink-500);white-space:nowrap}.tab.active{color:var(--blue-700);border-color:var(--blue-700)}
.form-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.field label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:10px 11px;outline:none}.field textarea{min-height:90px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-700);box-shadow:var(--shadow-focus)}
.modal-layer:not(:empty){position:fixed;inset:0;z-index:8000;display:grid;place-items:center;padding:18px}.modal-backdrop{position:absolute;inset:0;background:var(--overlay)}.modal{position:relative;width:min(640px,100%);max-height:min(88vh,900px);overflow:auto;background:var(--paper-raised);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg)}.modal-wide{width:min(900px,100%)}.modal-header,.modal-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;position:sticky;background:var(--paper-raised);z-index:2}.modal-header{top:0;border-bottom:1px solid var(--line)}.modal-footer{bottom:0;border-top:1px solid var(--line);justify-content:flex-end}.modal-body{padding:18px}.content-stack{display:flex;flex-direction:column;gap:12px}
.toast-region{position:fixed;right:18px;bottom:18px;z-index:9000;display:flex;flex-direction:column;gap:8px}.toast{display:flex;gap:10px;align-items:flex-start;width:min(380px,calc(100vw - 36px));padding:13px 14px;border:1px solid var(--line);background:var(--paper-raised);border-radius:12px;box-shadow:var(--shadow-md)}.toast i{margin-top:2px}.toast-success i{color:var(--green-600)}.toast-error i{color:var(--red-600)}.toast p{font-size:12px;margin-top:2px;color:var(--ink-500)}
.search-result{width:100%;display:flex;align-items:center;gap:12px;padding:12px 13px;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--paper-raised)}.search-result:hover{border-color:var(--blue-700)}.search-result>span:nth-child(2),.search-result>span:first-child:not(.search-result-icon){flex:1;min-width:0}.search-result small{display:block;color:var(--ink-500);margin-top:2px}.search-result-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:var(--blue-100);color:var(--blue-700)}
.command-dialog:not([hidden]){position:fixed;inset:0;z-index:7000;display:grid;place-items:start center;padding-top:10vh}.dialog-backdrop{position:absolute;inset:0;background:var(--overlay)}.command-panel{position:relative;width:min(680px,calc(100% - 30px));background:var(--paper-raised);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}.command-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}.command-input-wrap input{flex:1;outline:none}.command-results{padding:10px;max-height:55vh;overflow:auto;display:flex;flex-direction:column;gap:7px}
.money-pos{color:var(--green-600)}.money-neg{color:var(--red-600)}.mono{font-family:var(--font-mono)}.muted{color:var(--ink-500)}.clickable{cursor:pointer}.empty-box{text-align:center;padding:42px 20px;border:1px dashed var(--line-strong);border-radius:14px;color:var(--ink-500)}
.pdf-workspace{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px}.pdf-controls{background:var(--paper-raised);border:1px solid var(--line);border-radius:16px;padding:18px;height:max-content;position:sticky;top:80px}.pdf-sheet-wrap{overflow:auto;background:var(--paper-sunken);border:1px solid var(--line);border-radius:16px;padding:28px}.pdf-sheet{width:794px;min-height:1123px;margin:auto;background:white;color:#171717;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:55px;font-family:Arial,sans-serif}.pdf-sheet *{box-sizing:border-box}.pdf-head{display:flex;justify-content:space-between;border-bottom:2px solid #111;padding-bottom:22px}.pdf-brand{font-size:30px;font-weight:700;letter-spacing:.08em}.pdf-doc-title{text-align:right}.pdf-doc-title h2{font-size:28px}.pdf-section{margin-top:32px}.pdf-client{display:grid;grid-template-columns:1fr 1fr;gap:20px}.pdf-box{border:1px solid #ddd;padding:14px}.pdf-lines{width:100%;border-collapse:collapse;margin-top:24px}.pdf-lines th,.pdf-lines td{border-bottom:1px solid #ddd;padding:10px;text-align:left}.pdf-lines th{background:#f5f5f5;font-size:12px}.pdf-total{margin-left:auto;margin-top:24px;width:300px}.pdf-total div{display:flex;justify-content:space-between;padding:7px 0}.pdf-total .grand{border-top:2px solid #111;font-size:18px;font-weight:700;margin-top:6px;padding-top:12px}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.setting-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:16px;padding:18px}.setting-card h3{font-size:16px;margin-bottom:6px}.setting-card p{font-size:13px;color:var(--ink-500);margin-bottom:16px}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.pdf-workspace{grid-template-columns:1fr}.pdf-controls{position:static}.settings-grid{grid-template-columns:1fr}}
@media(max-width:700px){.kpi-grid{grid-template-columns:1fr}.form-grid-2,.form-grid-3{grid-template-columns:1fr}.calendar-grid{grid-template-columns:1fr}.calendar-head{display:none}.calendar-day{min-height:auto}.project-meta{grid-template-columns:1fr}.pdf-sheet-wrap{padding:10px}.page-header{align-items:stretch}.page-actions>.button{flex:1}}
@media print{body>*:not(.app-shell){display:none!important}.sidebar,.topbar{display:none!important}.workspace{margin:0!important}.route-view{padding:0!important}.pdf-controls,.page-header{display:none!important}.pdf-sheet-wrap{padding:0;border:0;background:white}.pdf-sheet{box-shadow:none;width:210mm;min-height:297mm;margin:0;padding:15mm}.app-shell{display:block!important}}

/* ===== Login reliability / one-file mode ===== */
.login-screen{position:fixed;inset:0;z-index:10000;background:var(--paper);overflow:auto}
.login-screen[hidden]{display:none!important}
.demo-login-account{display:flex;align-items:center;gap:10px;margin-top:20px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper-raised)}
.demo-login-account strong,.demo-login-account small{display:block}.demo-login-account small{font-size:12px;color:var(--ink-500);margin-top:2px}
.demo-reset-login{font-size:12px!important;color:var(--ink-500)!important;margin-top:-4px!important}
.login-actions .text-button i{margin-right:6px}
#loginStatus{min-height:20px;text-align:center}
#loginStatus.is-error{color:var(--red-600)}
#loginStatus.is-success{color:var(--green-600)}
.login-screen .login-layout{min-height:100svh}
@media(max-width:900px){.login-screen .login-panel{min-height:100svh}.login-screen .login-content{padding-top:56px;padding-bottom:28px}}


/* ===== Login motion + Google Identity Services ========================== */
.login-screen{
  opacity:1;
  visibility:visible;
  transition:opacity 260ms var(--ease-plan), visibility 260ms var(--ease-plan);
}
.login-screen.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.login-screen.is-entering .login-panel{animation:login-panel-in 420ms var(--ease-plan) both}
.login-screen.is-entering .login-atmosphere{animation:login-atmosphere-in 560ms var(--ease-plan) both}
@keyframes login-panel-in{from{opacity:.35;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes login-atmosphere-in{from{opacity:.4;transform:scale(1.012)}to{opacity:1;transform:scale(1)}}
.login-atmosphere{isolation:isolate}
.architecture-canvas{z-index:0;will-change:contents;transform:translateZ(0)}
.drawing-grid{z-index:1;pointer-events:none;animation:grid-breathe 12s ease-in-out infinite alternate}
.drawing-volume{z-index:2;pointer-events:none;will-change:transform;backface-visibility:hidden}
.architecture-hud,.login-atmosphere>p{z-index:3}
@keyframes grid-breathe{from{opacity:.72}to{opacity:1}}
.volume-one{animation:drift-one 14s ease-in-out infinite alternate}
.volume-two{animation:drift-two 17s ease-in-out infinite alternate}
.google-button-host{width:100%;min-height:44px;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:8px}
.google-button-host[hidden]{display:none!important}
#googleFallback[hidden]{display:none!important}
.login-actions{min-height:190px}
#loginStatus{transition:color 180ms ease,opacity 180ms ease}
@media (prefers-reduced-motion: reduce){
  .drawing-grid,.drawing-volume,.architecture-hud span:first-child i,.login-content{animation:none!important}
  .login-screen{transition:none!important}
}


/* ===== Dashboard polish: chart + status pills ========================== */
.badge{
  white-space:nowrap;
  flex:0 0 auto;
  width:max-content;
  min-width:max-content;
  line-height:1;
  justify-content:center;
}
.list-row>.badge,.list-actions>.badge{flex-shrink:0}
.finance-chart-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.chart-ratio{display:flex;align-items:baseline;gap:7px;font-size:11px;color:var(--ink-500)}
.chart-ratio strong{font-family:var(--font-mono);font-size:14px;color:var(--ink-900)}
.finance-chart{height:230px;display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;margin-top:6px}
.chart-y-axis{display:flex;flex-direction:column;justify-content:space-between;padding:4px 0 25px;text-align:right;color:var(--ink-500);font:10px/1 var(--font-mono)}
.chart-plot{position:relative;min-width:0}
.chart-grid{position:absolute;inset:0 0 25px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.chart-grid i{display:block;border-top:1px dashed color-mix(in srgb,var(--line-strong) 58%,transparent)}
.chart-bars{position:absolute;inset:0;display:flex;align-items:stretch;gap:12px;padding:0 3px}
.bar-group{flex:1;min-width:0;display:grid;grid-template-rows:minmax(0,1fr) 25px;align-items:end;height:100%;gap:0}
.bar-stack{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:100%;padding:5px 4px 0}
.bar{position:relative;width:min(26px,35%);border-radius:7px 7px 2px 2px;min-height:5px;border:0;outline:0;transition:transform 160ms var(--ease-plan),filter 160ms var(--ease-plan),box-shadow 160ms var(--ease-plan);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.bar:hover,.bar:focus-visible{transform:translateY(-3px);filter:brightness(1.08);box-shadow:0 5px 15px rgba(0,0,0,.16)}
.bar::after{content:attr(data-chart-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);padding:6px 8px;border-radius:7px;background:var(--ink-900);color:var(--paper-raised);font:10px/1.2 var(--font-mono);white-space:nowrap;opacity:0;pointer-events:none;transition:160ms var(--ease-plan);z-index:3}
.bar:hover::after,.bar:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.bar.invoice{background:linear-gradient(180deg,var(--blue-500),var(--blue-700))}
.bar.collect{background:linear-gradient(180deg,color-mix(in srgb,var(--green-600) 78%,white),var(--green-600))}
.bar-label{align-self:end;text-align:center;padding-top:7px;font-size:10px;color:var(--ink-500);text-transform:capitalize;white-space:nowrap}
.legend{display:flex;align-items:center;gap:16px;font-size:11px;color:var(--ink-500)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend span:before{content:'';display:inline-block;width:8px;height:8px;border-radius:3px;margin:0;background:var(--blue-700);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue-100) 70%,transparent)}
.legend span:last-child:before{background:var(--green-600);box-shadow:0 0 0 3px color-mix(in srgb,var(--green-100) 70%,transparent)}
.chart-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:12px;margin-top:2px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-500)}
.chart-footer span{display:flex;align-items:center;gap:7px}.chart-footer i{color:var(--green-600)}.chart-footer strong{font-weight:500;color:var(--ink-700)}

/* ===== Acrobat-inspired PDF workspace ================================== */
.pdf-editor-page{height:calc(100svh - 86px);min-height:650px;display:flex;flex-direction:column;margin:-20px -24px -24px;overflow:hidden;background:#272a2e;color:#eef0f2}
.pdf-editor-topbar{height:62px;flex:0 0 62px;display:grid;grid-template-columns:minmax(220px,.8fr) auto minmax(260px,.8fr);align-items:center;gap:14px;padding:8px 14px;background:#202327;border-bottom:1px solid #363a3f;box-shadow:0 2px 10px rgba(0,0,0,.18);z-index:5}
.pdf-editor-title{display:flex;align-items:center;gap:10px;min-width:0}.pdf-editor-title>div{min-width:0}.pdf-editor-title strong,.pdf-editor-title small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdf-editor-title strong{font-size:13px;color:#f6f7f8}.pdf-editor-title small{font-size:10px;color:#969da6;margin-top:2px}.pdf-file-icon{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:#d9342b;color:white;font-size:16px}
.pdf-toolbar-main,.pdf-editor-actions,.pdf-zoom-controls,.pdf-page-nav{display:flex;align-items:center;gap:4px}.pdf-toolbar-main{justify-content:center}.pdf-editor-actions{justify-content:flex-end}.pdf-editor-topbar .icon-button{color:#d8dde2;border-color:transparent}.pdf-editor-topbar .icon-button:hover{background:#33373c}.pdf-editor-topbar .button{height:36px;border-color:#41464d;background:#2c3035;color:#eef0f2}.pdf-editor-topbar .button-primary{background:#4f92ce;border-color:#4f92ce;color:white}
.pdf-tool-button{height:40px;min-width:52px;padding:5px 9px;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#aeb5bd;font-size:9px;line-height:1;border:1px solid transparent}.pdf-tool-button i{font-size:14px}.pdf-tool-button:hover{background:#303439;color:#fff}.pdf-tool-button.is-active{background:#343b43;color:#73b7f0;border-color:#46515d}
.pdf-editor-shell{flex:1;min-height:0;display:grid;grid-template-columns:48px 156px minmax(360px,1fr) 310px;background:#2c3035}
.pdf-left-rail{background:#24272b;border-right:1px solid #3a3e43;padding:8px 5px;display:flex;flex-direction:column;align-items:center;gap:5px}.pdf-rail-button{width:36px;height:36px;border-radius:6px;color:#9ea5ad;display:grid;place-items:center}.pdf-rail-button:hover,.pdf-rail-button.is-active{background:#353a40;color:#6eb0e8}
.pdf-thumbnails{background:#2b2e32;border-right:1px solid #3b3f44;padding:12px 10px;overflow:auto}.pdf-panel-label{font:9px/1 var(--font-mono);letter-spacing:.12em;color:#888f98;margin:3px 4px 12px}.pdf-thumb{width:100%;padding:8px;border-radius:7px;border:1px solid transparent;color:#cbd0d5;display:flex;flex-direction:column;align-items:center;gap:6px}.pdf-thumb:hover{background:#34383d}.pdf-thumb.is-active{background:#34383d;border-color:#5b95c5}.pdf-thumb strong{font:10px/1 var(--font-mono)}.pdf-thumb-page{width:102px;height:144px;overflow:hidden;background:white;box-shadow:0 2px 8px rgba(0,0,0,.35);display:block;position:relative}.pdf-thumb-page>.pdf-sheet{transform:scale(.1285);transform-origin:top left;box-shadow:none;margin:0}
.pdf-stage-wrap{min-width:0;min-height:0;display:flex;flex-direction:column;background:#383c41}.pdf-stage-toolbar{height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#303439;border-bottom:1px solid #42474d;color:#d9dde1}.pdf-stage-toolbar .icon-button{width:30px;height:30px;color:#c9ced4}.pdf-stage-toolbar .icon-button:hover:not(:disabled){background:#41464c}.pdf-stage-toolbar .icon-button:disabled{opacity:.3}.pdf-page-nav span{font:11px/1 var(--font-mono);color:#aeb4bc;padding:0 5px}.pdf-page-nav span strong{color:white}.pdf-zoom-value{height:29px;min-width:52px;border:1px solid #4b5057;border-radius:5px;color:#e4e7ea;font:10px/1 var(--font-mono);padding:0 7px}.pdf-zoom-value:hover{background:#41464b}.pdf-toolbar-separator{width:1px;height:20px;background:#4a4f55;margin:0 4px}
.pdf-stage{flex:1;min-height:0;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:42px 56px 90px;background-color:#3b3f44;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.035) 1px,transparent 0);background-size:18px 18px}.pdf-page-transform{width:calc(794px * var(--pdf-zoom));height:calc(1123px * var(--pdf-zoom));flex:0 0 auto;transition:width 180ms var(--ease-plan),height 180ms var(--ease-plan)}.pdf-page-transform>.pdf-sheet{transform:scale(var(--pdf-zoom)) rotate(var(--pdf-rotation));transform-origin:top left;transition:transform 180ms var(--ease-plan);margin:0}
.pdf-properties{min-width:0;background:#25282c;border-left:1px solid #3b3f44;overflow:auto;color:#e3e6e9;transition:width 180ms var(--ease-plan),opacity 180ms var(--ease-plan)}.pdf-properties.is-collapsed{width:0;overflow:hidden;opacity:0;border-left:0}.pdf-properties-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;background:#25282c;border-bottom:1px solid #393d42}.pdf-properties-head strong,.pdf-properties-head small{display:block}.pdf-properties-head strong{font-size:13px}.pdf-properties-head small{font-size:10px;color:#90979f;margin-top:2px}.pdf-properties-head .icon-button{color:#aeb5bc}
.pdf-properties-form details{border-bottom:1px solid #393d42}.pdf-properties-form summary{list-style:none;cursor:pointer;padding:12px 14px;font-size:11px;font-weight:600;color:#dce0e4;display:flex;align-items:center;justify-content:space-between}.pdf-properties-form summary::-webkit-details-marker{display:none}.pdf-properties-form summary:after{content:'›';font-size:16px;transform:rotate(90deg);color:#858d95;transition:transform .15s}.pdf-properties-form details:not([open]) summary:after{transform:rotate(0deg)}.pdf-property-section{padding:2px 14px 14px}.pdf-property-grid{display:grid;grid-template-columns:1.4fr .7fr;gap:8px}.pdf-properties .field{margin-bottom:10px}.pdf-properties .field label{color:#aeb5bd;font-size:10px;margin-bottom:4px}.pdf-properties .field input,.pdf-properties .field select,.pdf-properties .field textarea{background:#31353a;border-color:#484d53;color:#f2f4f6;padding:8px 9px;border-radius:5px;font-size:11px}.pdf-properties .field input:focus,.pdf-properties .field select:focus,.pdf-properties .field textarea:focus{border-color:#69a8dc;box-shadow:0 0 0 2px rgba(105,168,220,.14)}
.pdf-sheet{position:relative;width:794px;min-height:1123px;margin:auto;background:#fff;color:#171717;box-shadow:0 13px 38px rgba(0,0,0,.4);padding:58px 62px 44px;font-family:Arial,sans-serif}.pdf-sheet *{box-sizing:border-box}.pdf-page-crop{position:absolute;width:12px;height:12px;border-color:#aaa;border-style:solid}.crop-tl{top:18px;left:18px;border-width:1px 0 0 1px}.crop-tr{top:18px;right:18px;border-width:1px 1px 0 0}.crop-bl{bottom:18px;left:18px;border-width:0 0 1px 1px}.crop-br{bottom:18px;right:18px;border-width:0 1px 1px 0}.pdf-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #111;padding-bottom:22px}.pdf-brand{font-size:30px;font-weight:700;letter-spacing:.08em}.pdf-doc-title{text-align:right}.pdf-doc-title h2{font-size:28px;letter-spacing:.03em}.pdf-doc-title strong{font:600 13px/1.4 monospace}.pdf-doc-title div{font-size:11px;color:#666;margin-top:2px}.pdf-section{margin-top:32px}.pdf-client{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pdf-box{border:1px solid #ddd;padding:14px 16px;min-height:104px}.pdf-box small,.pdf-subject small{font-size:9px;letter-spacing:.12em;color:#888}.pdf-box strong{display:block;margin:8px 0 5px}.pdf-box span{display:block;font-size:11px;line-height:1.55;color:#555}.pdf-subject h3{font-size:18px;margin-top:7px}.pdf-lines{width:100%;border-collapse:collapse;margin-top:22px}.pdf-lines th,.pdf-lines td{border-bottom:1px solid #ddd;padding:10px;text-align:left}.pdf-lines th{background:#f5f5f5;font-size:10px;text-transform:uppercase;letter-spacing:.07em}.pdf-lines th:nth-child(2),.pdf-lines th:nth-child(3),.pdf-lines td:nth-child(2),.pdf-lines td:nth-child(3){text-align:right}.pdf-total{margin-left:auto;margin-top:24px;width:300px}.pdf-total div{display:flex;justify-content:space-between;padding:7px 0;font-size:12px}.pdf-total .grand{border-top:2px solid #111;font-size:17px;font-weight:700;margin-top:6px;padding-top:12px}.pdf-note{margin-top:35px;padding:13px 15px;background:#fafafa;border-left:3px solid #222}.pdf-note strong{font-size:10px;text-transform:uppercase;letter-spacing:.09em}.pdf-note p{font-size:11px;color:#555;margin-top:5px}.pdf-signature{width:230px;margin:42px 0 0 auto;padding-top:12px;border-top:1px solid #ccc}.pdf-signature small,.pdf-signature strong,.pdf-signature span{display:block}.pdf-signature small{font-size:9px;letter-spacing:.12em;color:#999}.pdf-signature strong{font-family:'Brush Script MT','Segoe Script',cursive;font-size:23px;font-weight:400;margin:10px 0 1px}.pdf-signature span{font-size:9px;color:#777;letter-spacing:.12em}.pdf-footer{position:absolute;left:62px;right:62px;bottom:34px;display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid #ddd;color:#888;font-size:9px}

@media(max-width:1350px){.pdf-editor-shell{grid-template-columns:46px 130px minmax(350px,1fr) 286px}.pdf-toolbar-main .pdf-tool-button span{display:none}.pdf-tool-button{min-width:38px}.pdf-editor-topbar{grid-template-columns:minmax(180px,.7fr) auto minmax(210px,.7fr)}}
@media(max-width:1100px){.pdf-properties{position:absolute;right:0;top:108px;bottom:0;width:min(310px,85vw);z-index:7;box-shadow:-12px 0 28px rgba(0,0,0,.3)}.pdf-editor-shell{grid-template-columns:46px 120px minmax(0,1fr)}.pdf-editor-topbar{grid-template-columns:1fr auto}.pdf-toolbar-main{display:none}.pdf-editor-page{margin:-20px -20px -20px}.pdf-stage{padding-left:28px;padding-right:28px}}
@media(max-width:760px){.pdf-thumbnails{display:none}.pdf-editor-shell{grid-template-columns:42px minmax(0,1fr)}.pdf-editor-title small{display:none}.pdf-editor-actions .button:not(.button-primary){display:none}.pdf-editor-topbar{padding:7px 9px}.pdf-stage{padding:26px 18px 70px}.chart-footer{align-items:flex-start;flex-direction:column}.finance-chart{grid-template-columns:34px minmax(0,1fr)}.chart-bars{gap:4px}.bar-stack{gap:3px}.bar{width:min(20px,40%)}}

@media print{.pdf-editor-page{height:auto!important;margin:0!important;background:white!important}.pdf-editor-topbar,.pdf-left-rail,.pdf-thumbnails,.pdf-stage-toolbar,.pdf-properties{display:none!important}.pdf-editor-shell{display:block!important}.pdf-stage-wrap,.pdf-stage{display:block!important;background:white!important;padding:0!important;overflow:visible!important}.pdf-page-transform{width:210mm!important;height:297mm!important}.pdf-page-transform>.pdf-sheet{transform:none!important}.pdf-sheet{box-shadow:none!important;width:210mm!important;min-height:297mm!important;margin:0!important;padding:15mm!important}.pdf-page-crop{display:none!important}}

/* Final UI refinements */
.badge{font-family:var(--font-body);font-weight:600;height:auto;min-height:22px;padding:5px 9px;letter-spacing:0}
.pdf-editor-shell.properties-collapsed{grid-template-columns:48px 156px minmax(360px,1fr) 0}
@media(max-width:1350px){.pdf-editor-shell.properties-collapsed{grid-template-columns:46px 130px minmax(350px,1fr) 0}}
@media(max-width:1100px){.pdf-editor-shell.properties-collapsed{grid-template-columns:46px 120px minmax(0,1fr)}}
@media(max-width:760px){.pdf-editor-shell.properties-collapsed{grid-template-columns:42px minmax(0,1fr)}}

/* ===== Improvements: architectural login animation ====================== */
.login-atmosphere,
[data-theme="dark"] .login-atmosphere{
  --atmosphere-ink:255,255,255;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.055), transparent 28%),
    radial-gradient(circle at 84% 72%, rgba(255,255,255,.035), transparent 26%),
    linear-gradient(160deg, #1A1A1A 0%, #1A1A1A 58%, #151515 100%);
}
.login-atmosphere::before,
.login-atmosphere::after{content:"";position:absolute;inset:0;pointer-events:none}
.login-atmosphere::before{background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 42%, rgba(255,255,255,.02));z-index:0}
.login-atmosphere::after{background:radial-gradient(circle at 50% 50%, transparent 54%, rgba(0,0,0,.18) 100%);opacity:.55;z-index:0}
[data-theme="dark"] .login-atmosphere::after{background:radial-gradient(circle at 50% 50%, transparent 54%, rgba(0,0,0,.06) 100%);opacity:.72}
.architecture-canvas{opacity:1;filter:drop-shadow(0 6px 32px rgba(0,0,0,.08))}
.drawing-grid{opacity:.85;animation:grid-breathe 16s ease-in-out infinite alternate}
.drawing-volume{border-color:rgba(var(--atmosphere-ink),.14);background:linear-gradient(180deg, rgba(var(--atmosphere-ink),.01), transparent)}
.volume-one{animation:drift-one 18s ease-in-out infinite alternate}
.volume-two{animation:drift-two 20s ease-in-out infinite alternate}
.architecture-hud{backdrop-filter:blur(10px);background:rgba(255,255,255,.04);padding:10px 12px;border:1px solid rgba(var(--atmosphere-ink),.08);border-radius:12px}
[data-theme="dark"] .architecture-hud{background:rgba(0,0,0,.025)}
.login-atmosphere>p{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
[data-theme="dark"] .login-atmosphere>p{background:rgba(0,0,0,.03)}

/* ===== Improvements: PDF editor interaction ============================ */
.pdf-help-chip{display:inline-flex;align-items:center;gap:7px;margin-left:12px;padding:6px 10px;border:1px solid #47505a;border-radius:999px;background:#2c3136;color:#b9c1c9;font-size:10px}
.pdf-help-chip i{color:#77b6ee}
.pdf-annotation-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pdf-annotation-row{width:100%;display:flex;align-items:center;gap:10px;padding:10px;border-radius:9px;border:1px solid #3b4046;background:#2e3237;color:#d8dde2;text-align:left}
.pdf-annotation-row:hover,.pdf-annotation-row.is-selected{border-color:#5e97c6;background:#353b42}
.pdf-annotation-row>span:nth-child(2){flex:1;min-width:0}
.pdf-annotation-row strong,.pdf-annotation-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdf-annotation-row small{font-size:10px;color:#9aa2ab;margin-top:2px}
.pdf-annotation-swatch{width:12px;height:12px;border-radius:4px;flex:0 0 12px}
.pdf-annotation-swatch.type-text{background:#7ebaf0}.pdf-annotation-swatch.type-comment{background:#f0c24f}.pdf-annotation-swatch.type-sign{background:#8dc7a1}
.pdf-overlay-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.pdf-annotation{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:move;min-width:80px;max-width:230px;padding:8px 10px;border-radius:8px;border:1px solid #cfd6de;background:rgba(255,255,255,.94);color:#1f252b;font-size:12px;line-height:1.35;box-shadow:0 6px 18px rgba(0,0,0,.14);transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease}
.pdf-annotation:hover{box-shadow:0 8px 22px rgba(0,0,0,.2)}
.pdf-annotation.is-selected{border-color:#5b96c8;box-shadow:0 0 0 2px rgba(91,150,200,.2),0 10px 22px rgba(0,0,0,.16)}
.pdf-annotation span{display:block;white-space:pre-wrap;word-break:break-word}
.pdf-annotation-text{background:rgba(255,255,255,.95)}
.pdf-annotation-comment{background:#fff3b6;border-color:#ebcc5e;color:#624b0e}
.pdf-annotation-sign{background:transparent;border:0;border-bottom:1px solid #8a8a8a;border-radius:0;padding:3px 2px 0;min-width:120px;box-shadow:none;font:26px/1 'Brush Script MT','Segoe Script',cursive}
.pdf-annotation-sign.is-selected{box-shadow:0 2px 0 0 #5b96c8,0 0 0 2px rgba(91,150,200,.18);border-bottom-color:#5b96c8}
.pdf-selected-card{display:flex;flex-direction:column;gap:10px}
.pdf-selected-actions{display:flex;gap:8px;flex-wrap:wrap}
.pdf-properties .button-danger{border-color:#7e3a3a;background:#522628;color:#fff}
.pdf-stage{user-select:none}
.pdf-stage .pdf-sheet{user-select:text}
.pdf-thumb-page>.pdf-sheet{pointer-events:none}
@media(max-width:1100px){.pdf-help-chip{display:none}}
@media(max-width:760px){.pdf-annotation-row{padding:8px}.pdf-annotation{max-width:180px;font-size:11px}.pdf-selected-actions .button{flex:1}}

/* ===== Acrobat-like PDF tools ========================================== */
.pdf-acrobat-tools{display:flex;flex-direction:column;gap:6px;padding:10px;border-bottom:1px solid #393d42;background:#222529}
.pdf-acrobat-tool{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:10px;padding:9px 8px;border-radius:7px;color:#e7eaed;text-align:left;border:1px solid transparent}
.pdf-acrobat-tool:hover{background:#30343a;border-color:#41474e}
.pdf-acrobat-tool>span:nth-child(2){min-width:0}.pdf-acrobat-tool strong,.pdf-acrobat-tool small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdf-acrobat-tool strong{font-size:11px}.pdf-acrobat-tool small{font-size:9px;color:#8f98a2;margin-top:2px}
.pdf-acrobat-tool>span:first-child{width:32px;height:32px;border-radius:7px;display:grid;place-items:center;color:#fff}.pdf-acrobat-tool .tool-red{background:#c83e35}.pdf-acrobat-tool .tool-amber{background:#c68a30}.pdf-acrobat-tool .tool-blue{background:#397fba}.pdf-acrobat-tool>i{font-size:10px;color:#69727b}
.pdf-editor-topbar{border-top:2px solid #c83e35}
.pdf-file-icon{box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 3px 10px rgba(217,52,43,.2)}
.pdf-stage-toolbar{box-shadow:0 1px 0 rgba(255,255,255,.025) inset}
.pdf-page-transform>.pdf-sheet{border:1px solid rgba(0,0,0,.08)}
.pdf-tool-button.is-active{box-shadow:inset 0 -2px 0 #69a8dc}


/* ===== Rotation geometry fix =========================================== */
.pdf-page-transform{position:relative!important;flex:0 0 auto;transition:width 180ms var(--ease-plan),height 180ms var(--ease-plan)}
.pdf-page-transform>.pdf-sheet{position:absolute!important;left:50%;top:50%;margin:0!important;transform:translate(-50%,-50%) rotate(var(--pdf-rotation)) scale(var(--pdf-zoom))!important;transform-origin:center center!important;transition:transform 180ms var(--ease-plan)}
.pdf-rotation-state{display:inline-flex;margin-left:7px;padding:2px 6px;border-radius:5px;background:#454b52;color:#dbe2e8;font:9px/1 var(--font-mono)}
.pdf-thumb-page{display:grid!important;place-items:center}.pdf-thumb-rotator{display:block;position:relative;width:100%;height:100%}.pdf-thumb-rotator>.pdf-sheet{position:absolute;left:50%;top:50%;margin:0!important;transform:translate(-50%,-50%) rotate(var(--thumb-rotation)) scale(.1285)!important;transform-origin:center!important;box-shadow:none!important}

/* ===== PDF tools workspace ============================================ */
.pdf-tools-page{padding-bottom:40px}.pdf-tools-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr);gap:24px;align-items:stretch;padding:28px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,var(--paper-raised),var(--paper-sunken));overflow:hidden;position:relative}.pdf-tools-hero:after{content:"PDF";position:absolute;right:32%;top:-34px;font:700 150px/1 var(--font-display);color:var(--ink-100);opacity:.25;pointer-events:none}.pdf-tools-hero h2{font-size:30px;margin:7px 0 10px;max-width:720px}.pdf-tools-hero p{max-width:780px;color:var(--ink-500)}.pdf-tools-drop{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;min-height:150px;border:1px dashed var(--blue-500);border-radius:16px;background:var(--paper-raised);cursor:pointer;transition:.18s}.pdf-tools-drop:hover{transform:translateY(-2px);border-color:var(--blue-700);box-shadow:var(--shadow-md)}.pdf-tools-drop i{font-size:30px;color:var(--blue-700)}.pdf-tools-drop span{font-size:12px;color:var(--ink-500)}
.pdf-tools-controls{position:sticky;top:64px;z-index:4;padding:12px 0;background:var(--paper);display:flex;gap:12px;align-items:center}.pdf-tools-search{display:flex;align-items:center;gap:9px;width:min(390px,100%);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper-raised)}.pdf-tools-search input{width:100%;outline:0}.pdf-tools-tabs{display:flex;gap:7px;overflow:auto;scrollbar-width:none}.pdf-tools-tabs button{display:flex;align-items:center;gap:6px;white-space:nowrap;padding:9px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink-500);font-size:12px}.pdf-tools-tabs button:hover,.pdf-tools-tabs button.is-active{background:var(--blue-100);color:var(--blue-700);border-color:var(--blue-500)}
.pdf-tool-section{padding-top:12px}.pdf-tool-section-head{display:flex;align-items:center;gap:12px;margin:17px 0 12px}.pdf-tool-section-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--blue-100);color:var(--blue-700)}.pdf-tool-section-head h2{font-size:18px}.pdf-tool-section-head p{font-size:11px;color:var(--ink-500);margin-top:2px}.pdf-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pdf-tool-card{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:104px;padding:15px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--paper-raised);transition:.16s}.pdf-tool-card:hover{transform:translateY(-2px);border-color:var(--blue-500);box-shadow:var(--shadow-sm)}.pdf-tool-card-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:10px;background:var(--paper-sunken);color:var(--blue-700)}.pdf-tool-card-copy{min-width:0;padding-right:46px}.pdf-tool-card-copy strong,.pdf-tool-card-copy small{display:block}.pdf-tool-card-copy strong{font-size:13px}.pdf-tool-card-copy small{margin-top:5px;color:var(--ink-500);font-size:11px;line-height:1.42}.pdf-tool-cap{position:absolute;right:10px;top:10px;padding:4px 6px;border-radius:999px;font:9px/1 var(--font-mono);background:var(--paper-sunken);color:var(--ink-500)}.capability-local{background:var(--green-100);color:var(--green-600)}.capability-ai{background:var(--amber-100);color:var(--amber-600)}.capability-editor{background:var(--blue-100);color:var(--blue-700)}
.pdf-tool-runner{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.pdf-runner-drop{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px;border:1px dashed var(--blue-500);border-radius:16px;background:var(--paper-sunken);text-align:center}.pdf-runner-drop>i{font-size:42px;color:var(--blue-700)}.pdf-runner-drop>span,.pdf-runner-drop>small{color:var(--ink-500);font-size:12px}.pdf-runner-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.pdf-runner-options{display:flex;flex-direction:column;gap:12px;padding:4px}.pdf-runner-local{display:flex;gap:10px;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--green-100);color:var(--green-600)}.pdf-runner-local strong,.pdf-runner-local small{display:block}.pdf-runner-local small{font-size:10px;margin-top:2px}.pdf-runner-progress{height:28px;position:relative;overflow:hidden;border-radius:8px;background:var(--paper-sunken)}.pdf-runner-progress span{display:block;height:100%;width:0;background:var(--blue-500);transition:width .25s}.pdf-runner-progress small{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;color:white}.pdf-service-message{text-align:center;padding:26px 18px}.pdf-tool-hero-icon{width:58px;height:58px;margin:0 auto 14px;display:grid;place-items:center;border-radius:15px;background:var(--blue-100);color:var(--blue-700);font-size:23px}.pdf-service-message h3{font-size:21px}.pdf-service-message p{max-width:560px;margin:8px auto 18px}.pdf-requirement{max-width:600px;margin:auto;padding:15px;border:1px solid var(--line);border-radius:12px;background:var(--paper-sunken);text-align:left}.pdf-requirement strong,.pdf-requirement span{display:block}.pdf-requirement span{font-size:12px;color:var(--ink-500);margin-top:5px;line-height:1.5}
@media(max-width:1250px){.pdf-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pdf-tools-controls{align-items:flex-start;flex-direction:column}.pdf-tools-tabs{width:100%}}
@media(max-width:800px){.pdf-tools-hero{grid-template-columns:1fr}.pdf-tools-hero:after{display:none}.pdf-tool-grid{grid-template-columns:1fr}.pdf-tool-runner{grid-template-columns:1fr}.pdf-tools-controls{top:55px}.pdf-tools-search{width:100%}}

/* ===== Editor objects: images, shapes, typography ======================= */
.pdf-thumb-rotator>.pdf-sheet{transform:translate(-50%,-50%) rotate(var(--thumb-rotation)) scale(var(--thumb-scale,.1285))!important}
.pdf-annotation-image{padding:0!important;background:transparent!important;border:1px solid transparent!important;overflow:hidden;box-shadow:none!important}
.pdf-annotation-image img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.pdf-annotation-image.is-selected{border-color:#5b96c8!important;box-shadow:0 0 0 2px rgba(91,150,200,.22)!important}
.pdf-annotation-rect{background:transparent!important;border:2px solid currentColor!important;box-shadow:none!important;border-radius:2px!important;padding:0!important}
.pdf-annotation-circle{background:transparent!important;border:2px solid currentColor!important;box-shadow:none!important;border-radius:999px!important;padding:0!important}
.pdf-annotation-line{height:0!important;min-width:60px;background:transparent!important;border:0!important;border-top:2px solid currentColor!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
.pdf-annotation-line.is-selected{box-shadow:0 0 0 2px rgba(91,150,200,.18)!important}
.pdf-annotation-swatch.type-image{background:#a98ed7}.pdf-annotation-swatch.type-rect{background:#7196cc}.pdf-annotation-swatch.type-circle{background:#79bca1}.pdf-annotation-swatch.type-line{background:#c78282}
.pdf-properties input[type="color"]{padding:3px;height:36px}
.pdf-selected-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.pdf-selected-actions .button{justify-content:center;font-size:10px;padding:8px}

/* =========================================================================
   Real PDF Editor — imported PDF + real local edits
   ========================================================================= */
.real-pdf-editor{height:calc(100svh - 86px);min-height:660px;margin:-20px -24px -24px;display:flex;flex-direction:column;background:#2f3338;color:#edf0f3;overflow:hidden;border-top:2px solid #d74235}
.real-pdf-topbar{height:70px;flex:0 0 70px;display:grid;grid-template-columns:minmax(230px,.75fr) auto minmax(310px,.75fr);align-items:center;gap:14px;padding:8px 14px;background:#202327;border-bottom:1px solid #3a3e43;box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:5}
.real-pdf-file{display:flex;align-items:center;gap:10px;min-width:0}.real-pdf-icon{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:#d63d33;color:#fff;font-size:17px}.real-pdf-file>div{min-width:0}.real-pdf-file strong,.real-pdf-file small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.real-pdf-file strong{font-size:13px}.real-pdf-file small{font-size:10px;color:#9ca3aa;margin-top:3px}
.real-pdf-tools{display:flex;align-items:center;justify-content:center;gap:3px}.real-pdf-tool{height:48px;min-width:48px;padding:5px 8px;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#aeb5bc;font-size:9px;border:1px solid transparent}.real-pdf-tool i{font-size:14px}.real-pdf-tool:hover:not(:disabled){background:#30353a;color:#fff}.real-pdf-tool.is-active{background:#333b43;border-color:#4f6b82;color:#78b7ed}.real-pdf-tool:disabled{opacity:.3;cursor:not-allowed}
.real-pdf-actions{display:flex;justify-content:flex-end;align-items:center;gap:6px}.real-pdf-topbar .icon-button{color:#d6dbe0}.real-pdf-topbar .button{height:36px;background:#2d3136;border-color:#444a50;color:#edf0f3}.real-pdf-topbar .button-primary{background:#5b9dd5;border-color:#5b9dd5;color:#fff}
.real-pdf-shell{flex:1;min-height:0;display:grid;grid-template-columns:178px minmax(380px,1fr) 292px}.real-pdf-pages{min-width:0;background:#292d31;border-right:1px solid #3c4146;padding:12px 10px;overflow:auto}.real-pdf-panel-title{font:9px/1 var(--font-mono);letter-spacing:.16em;color:#8f969e;margin:3px 5px 12px}.real-pdf-thumbs{display:flex;flex-direction:column;gap:10px}.real-pdf-thumb{width:100%;padding:8px 7px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid transparent;border-radius:8px;color:#cbd1d7}.real-pdf-thumb canvas{max-width:116px;max-height:154px;background:white;box-shadow:0 3px 10px rgba(0,0,0,.38)}.real-pdf-thumb strong{font:10px/1 var(--font-mono)}.real-pdf-thumb:hover{background:#34393e}.real-pdf-thumb.is-active{background:#353b41;border-color:#68a7da}.real-pdf-empty-small{padding:20px 6px;text-align:center;color:#8d949b;font-size:11px}
.real-pdf-center{min-width:0;min-height:0;display:flex;flex-direction:column;background:#373b40}.real-pdf-stagebar{height:48px;flex:0 0 48px;display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:12px;padding:0 12px;background:#303439;border-bottom:1px solid #44494f;color:#dce0e4}.real-pdf-page-nav,.real-pdf-zoom{display:flex;align-items:center;gap:4px}.real-pdf-page-nav span{font:11px/1 var(--font-mono);color:#adb5bd;padding:0 4px}.real-pdf-page-nav strong{color:white}.real-pdf-stagebar .icon-button{width:31px;height:31px;color:#d0d5da}.real-pdf-stagebar .icon-button:hover:not(:disabled){background:#41474d}.real-pdf-stagebar .icon-button:disabled{opacity:.28}.real-pdf-hint{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#aeb6be;font-size:10px}.real-pdf-hint i{color:#79b9ef;margin-right:5px}.real-pdf-zoom-value{height:29px;min-width:55px;padding:0 8px;border:1px solid #4b5157;border-radius:5px;color:#e4e7ea;font:10px/1 var(--font-mono)}
.real-pdf-stage{flex:1;min-height:0;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:48px 56px 100px;background-color:#3b3f44;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.035) 1px,transparent 0);background-size:18px 18px}.real-pdf-import-empty{margin:auto;max-width:450px;text-align:center;color:#dce1e5}.real-pdf-import-empty>span{width:68px;height:68px;margin:0 auto 18px;border-radius:18px;display:grid;place-items:center;background:#30363c;border:1px solid #4b535b;color:#73b5ec;font-size:28px}.real-pdf-import-empty h2{font-size:22px}.real-pdf-import-empty p{color:#a8afb6;margin:8px 0 22px;line-height:1.65}.real-pdf-paper-wrap{position:relative;flex:0 0 auto;background:#fff;box-shadow:0 14px 42px rgba(0,0,0,.42)}#realPdfCanvas{display:block;background:white}.real-pdf-overlay{position:absolute;inset:0;z-index:2;touch-action:none}
.real-pdf-object{position:absolute;box-sizing:border-box;cursor:move;border:1px dashed transparent;color:var(--object-color);font-size:var(--object-font);user-select:none}.real-pdf-object.is-selected{border-color:#318ed2;box-shadow:0 0 0 1px rgba(49,142,210,.25)}.real-pdf-object>span{display:block;width:100%;height:100%;overflow:hidden;white-space:pre-wrap}.real-pdf-object.object-text>span{padding:3px;line-height:1.25;background:rgba(255,255,255,.18)}.real-pdf-object.object-note{padding:7px;background:#fff2ad;border:1px solid #e1c452;color:#644d00;box-shadow:0 3px 10px rgba(0,0,0,.12);border-radius:3px}.real-pdf-object.object-sign>span{font-family:'Brush Script MT','Segoe Script',cursive;font-style:italic;line-height:1.05}.real-pdf-object.object-image img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none}.real-pdf-object.object-rect{border:2px solid var(--object-color)}.real-pdf-object.object-circle{border:2px solid var(--object-color);border-radius:50%}.real-pdf-object.object-line{height:2px!important;border:0;background:var(--object-color);transform-origin:left center}.real-pdf-resize{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border:2px solid #fff;background:#318ed2;border-radius:2px;box-shadow:0 0 0 1px #226b9f;cursor:nwse-resize}.real-pdf-object:not(.is-selected) .real-pdf-resize{display:none}
.real-pdf-properties{min-width:0;background:#25282c;border-left:1px solid #3b4045;overflow:auto}.real-pdf-properties-head{position:sticky;top:0;z-index:2;padding:14px;background:#25282c;border-bottom:1px solid #3a3f44}.real-pdf-properties-head strong,.real-pdf-properties-head small{display:block}.real-pdf-properties-head strong{font-size:13px}.real-pdf-properties-head small{font-size:10px;color:#9299a0;margin-top:3px}.real-pdf-properties-body{padding:14px}.real-pdf-empty-props{text-align:center;padding:35px 12px;color:#939ba3}.real-pdf-empty-props i{font-size:25px;margin-bottom:10px}.real-pdf-empty-props p{font-size:11px;line-height:1.5}.real-pdf-prop-card{display:flex;flex-direction:column;gap:12px}.real-pdf-properties .field label{font-size:10px;color:#b3bac1}.real-pdf-properties .field input,.real-pdf-properties .field textarea{background:#31353a;border-color:#484e54;color:#f1f3f5;font-size:11px;border-radius:6px}.real-pdf-properties input[type="color"]{height:38px;padding:5px}.real-pdf-properties input[type="range"]{padding:0;border:0}.real-pdf-properties .field small{color:#9299a0}.real-pdf-prop-actions{display:flex;gap:8px;flex-wrap:wrap}.real-pdf-properties .button-danger{background:#51282a;border-color:#7a3d3f;color:white}

/* =========================================================================
   Working local PDF tools only
   ========================================================================= */
.working-pdf-tools{max-width:1480px;margin:0 auto}.working-tools-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,var(--paper-raised),var(--paper-sunken));flex-wrap:wrap}.working-tools-hero h2{font-size:26px;margin-top:5px}.working-tools-hero p{margin-top:7px;color:var(--ink-500)}.working-tools-search{min-width:min(380px,100%);display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface)}.working-tools-search input{flex:1;outline:none}.working-tool-section{margin-top:28px}.working-tool-section-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}.working-tool-section-head>span{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--blue-100);color:var(--blue-700)}.working-tool-section-head h2{font-size:17px}.working-tool-section-head p{font-size:11px;color:var(--ink-500);margin-top:2px}.working-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.working-tool-card{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:16px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--paper-raised);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.working-tool-card:hover{transform:translateY(-2px);border-color:var(--blue-500);box-shadow:var(--shadow-md)}.working-tool-card>span:nth-child(2){min-width:0}.working-tool-card strong,.working-tool-card small{display:block}.working-tool-card strong{font-size:13px}.working-tool-card small{font-size:11px;color:var(--ink-500);line-height:1.45;margin-top:4px}.working-tool-card em{font-style:normal;font:9px/1 var(--font-mono);padding:5px 7px;border-radius:999px;background:var(--green-100);color:var(--green-600)}.working-tool-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--blue-100);color:var(--blue-700)}
.working-pdf-runner{display:grid;grid-template-columns:1fr 1fr;gap:18px}.working-pdf-drop{min-height:310px;padding:24px;border:1.5px dashed var(--line-strong);border-radius:16px;background:var(--paper-sunken);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px}.working-pdf-drop>i{font-size:36px;color:var(--blue-700)}.working-pdf-drop>strong{font-size:18px}.working-pdf-drop>span{font-size:12px;color:var(--ink-500);max-width:330px}.working-pdf-drop input{width:100%;margin-top:10px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:8px}.working-pdf-drop small{font-size:10px;color:var(--ink-500);word-break:break-word}.working-pdf-options{display:flex;flex-direction:column;gap:12px}.working-local-badge{display:flex;gap:10px;align-items:center;padding:12px;border-radius:10px;background:var(--green-100);color:var(--green-600)}.working-local-badge strong,.working-local-badge small{display:block}.working-local-badge small{font-size:10px;margin-top:2px}.working-progress{height:30px;border-radius:8px;background:var(--paper-sunken);overflow:hidden;position:relative}.working-progress span{position:absolute;inset:0 auto 0 0;width:0;background:var(--blue-700);transition:width .2s}.working-progress small{position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:10px}
@media(max-width:1320px){.real-pdf-shell{grid-template-columns:150px minmax(360px,1fr) 270px}.real-pdf-topbar{grid-template-columns:minmax(190px,.6fr) auto minmax(250px,.6fr)}.real-pdf-tool span{display:none}.real-pdf-tool{min-width:38px}.working-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1050px){.real-pdf-properties{position:absolute;right:0;top:70px;bottom:0;width:290px;z-index:9;box-shadow:-10px 0 24px rgba(0,0,0,.3)}.real-pdf-shell{grid-template-columns:125px minmax(0,1fr)}.real-pdf-topbar{grid-template-columns:1fr auto}.real-pdf-tools{display:none}.real-pdf-file small{display:none}.real-pdf-stage{padding-left:28px;padding-right:28px}.working-pdf-runner{grid-template-columns:1fr}}
@media(max-width:760px){.real-pdf-editor{margin:-20px -20px -20px}.real-pdf-shell{grid-template-columns:minmax(0,1fr)}.real-pdf-pages{display:none}.real-pdf-properties{display:none}.real-pdf-actions .button:not(.button-primary){display:none}.real-pdf-stagebar{grid-template-columns:auto 1fr}.real-pdf-hint{display:none}.real-pdf-stage{padding:28px 15px 70px}.working-tool-grid{grid-template-columns:1fr}.working-tools-search{min-width:100%}}

/* ===== LSTUDIO reusable PDF templates ================================== */
.pdf-template-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pdf-template-card{min-height:170px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--paper-raised);display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.pdf-template-card:hover{border-color:var(--blue-700);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pdf-template-card>span{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--blue-100);color:var(--blue-700);font-size:18px;margin-bottom:5px}
.pdf-template-card strong{font-size:15px}.pdf-template-card small{font-size:12px;line-height:1.55;color:var(--ink-500)}
.template-empty-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.real-pdf-actions .button[data-editor-template]{border-color:#515960;background:#34393e}
.real-pdf-actions .button[data-editor-template]:hover{border-color:#6daadd;background:#3b4249}
@media(max-width:700px){.pdf-template-picker{grid-template-columns:1fr}.template-empty-actions{flex-direction:column}.template-empty-actions .button{width:100%}}

/* ===== LSTUDIO invoice/devis editor — reference-document layout ===== */
.invoice-editor-loading{min-height:420px;display:grid;place-items:center;align-content:center;gap:12px;color:var(--ink-500)}
.invoice-editor-app{height:calc(100svh - 86px);margin:-20px -24px -24px;display:flex;flex-direction:column;background:#272b30;overflow:hidden}
.invoice-editor-toolbar{height:64px;flex:0 0 64px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:9px 16px;background:#1f2327;border-bottom:1px solid #3a3f45;color:#eef1f4}
.invoice-editor-toolbar>div:first-child{display:flex;align-items:center;gap:10px}.invoice-editor-toolbar strong,.invoice-editor-toolbar small{display:block}.invoice-editor-toolbar small{font-size:10px;color:#9098a1;margin-top:2px}.invoice-editor-icon{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:#e5483f;color:white}.invoice-editor-toolbar-actions{display:flex;gap:8px}.invoice-editor-toolbar .button{height:38px;background:#2c3136;color:#eef1f4;border-color:#454b52}.invoice-editor-toolbar .button-primary{background:#579ad4;border-color:#579ad4;color:#fff}
.invoice-editor-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(500px,1fr) 390px}.invoice-preview-stage{min-width:0;min-height:0;overflow:auto;padding:38px;background:#383d43;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.035) 1px,transparent 0);background-size:18px 18px}.invoice-preview-wrap{width:max-content;min-width:100%;display:flex;justify-content:center}.invoice-control-panel{min-height:0;overflow:auto;background:#22262a;border-left:1px solid #3b4045;color:#e7eaed;padding-bottom:40px}.invoice-control-section{padding:16px;border-bottom:1px solid #383d42}.invoice-control-section h3{font-size:13px;margin:0;color:#f0f2f4}.invoice-control-section .field{margin-top:8px}.invoice-control-section .field label{color:#aeb5bc;font-size:10px}.invoice-control-section .field input,.invoice-control-section .field select,.invoice-control-section .field textarea{background:#30353a;border-color:#4a5056;color:#f4f6f7;padding:8px 9px;border-radius:6px;font-size:11px}.invoice-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.switch-row{display:flex;align-items:center;gap:7px;font-size:10px;color:#b7bec5}.switch-row input{accent-color:#5aa0dc}.invoice-upload-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.invoice-control-section .button{height:34px;background:#30353a;color:#e8ebee;border-color:#4b5158;font-size:11px}.invoice-line-editor{display:grid;grid-template-columns:minmax(0,1fr) 76px 92px 34px;gap:7px;align-items:end;padding:10px 0;border-bottom:1px solid #353a40}.invoice-line-editor .field{margin:0}.invoice-line-remove{color:#f18b80}.invoice-line-desc{min-width:0}
.invoice-paper{position:relative;width:794px;min-height:1123px;background:#fff;color:#111;box-shadow:0 18px 48px rgba(0,0,0,.35);padding:48px 42px 34px;font-family:Arial,Helvetica,sans-serif;display:flex;flex-direction:column}
.invoice-head-clean{height:120px;display:flex;align-items:flex-start}.invoice-logo-zone{width:260px;min-height:72px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.invoice-logo-zone img{max-width:210px;max-height:72px;object-fit:contain;object-position:left top}.invoice-text-logo{font-size:35px;font-weight:800;letter-spacing:-.04em;color:#164ecb}.invoice-logo-zone small{font-size:9px;color:#555;letter-spacing:.12em;margin-top:3px;text-transform:uppercase}
.invoice-top-info{display:grid;grid-template-columns:1.35fr .9fr;gap:60px;margin-top:12px;min-height:120px}.invoice-document-info h1{font-size:20px;margin:0 0 7px}.invoice-document-info h1 span{color:#164ecb}.invoice-document-info p,.invoice-client-info p{font-size:11px;line-height:1.35;margin:2px 0;color:#303238}.invoice-document-info strong{color:#164ecb}.invoice-client-info h2{font-size:16px;margin:0 0 4px;text-transform:uppercase}.invoice-client-info p{color:#4d5156}
.invoice-table-clean{margin-top:20px}.invoice-table-head,.invoice-table-row{display:grid;grid-template-columns:minmax(0,1fr) 62px 100px 100px;align-items:start}.invoice-table-head{background:#164ecb;color:#fff;border-radius:4px 4px 0 0;padding:8px 12px;font-size:10px;font-weight:700}.invoice-table-head span:nth-child(n+2){text-align:right}.invoice-table-row{padding:12px;border-bottom:1px solid #dadde0;font-size:11px;line-height:1.35}.invoice-table-row span:nth-child(n+2),.invoice-table-row strong{text-align:right}.invoice-table-row strong{font-weight:700}
.invoice-middle-clean{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:38px;margin-top:28px}.invoice-words{font-size:11px;line-height:1.45}.invoice-words p{color:#24272a;margin:2px 0}.invoice-blue-label{color:#164ecb!important;font-weight:700;margin-top:0!important}.invoice-reglement-title{margin-top:22px!important}.invoice-totals-clean{padding-top:4px}.invoice-totals-clean>div{display:flex;justify-content:space-between;gap:24px;padding:7px 0;font-size:11px}.invoice-totals-clean span{font-weight:700}.invoice-total-ttc{border-top:2px solid #164ecb;margin-top:4px;padding-top:10px!important;font-size:12px!important}
.invoice-sign-zone{display:flex;justify-content:flex-end;align-items:flex-end;min-height:120px;margin-top:22px}.invoice-qr-placeholder canvas,.invoice-qr-placeholder img{width:88px!important;height:88px!important}.invoice-qr-fallback{width:88px;height:88px;border:1px solid #222;display:grid;place-items:center}.invoice-qr-fallback i{font-size:50px}.invoice-qr-fallback small{font-size:8px}.invoice-stamp-zone{width:190px;height:120px;display:flex;align-items:center;justify-content:center}.invoice-stamp-zone img{max-width:180px;max-height:110px;object-fit:contain}.invoice-default-stamp{width:118px;height:74px;border:3px double #164ecb;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-7deg);color:#164ecb}.invoice-default-stamp strong{font-size:13px}.invoice-default-stamp span{font-size:10px;letter-spacing:.18em}
.invoice-footer-clean{margin-top:auto;border-top:1px solid #d9dcdf;padding:14px 4px 0;display:grid;grid-template-columns:96px minmax(180px,1fr) 150px;column-gap:12px;align-items:end;font-size:9px;color:#4c5055}.invoice-footer-qr{display:flex;align-items:flex-end;justify-content:flex-start;min-height:92px}.invoice-footer-contact{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;border-left:1px solid #aeb3b8;padding-left:12px;min-height:78px;justify-content:center}.invoice-footer-legal{display:flex;flex-direction:column;gap:2px;align-items:stretch}.invoice-footer-legal span{display:grid;grid-template-columns:42px 1fr;gap:8px}.invoice-footer-legal strong{font-size:9px;color:#4c5055}.invoice-footer-legal em{font-style:normal;text-align:left}.invoice-footer-clean strong{color:#111;font-size:10px}.invoice-form-note{margin-top:10px;font-size:12px;color:#6d7278}@media(max-width:1200px){.invoice-footer-clean{grid-template-columns:96px minmax(180px,1fr) 140px;column-gap:10px}}
@media(max-width:1200px){.invoice-editor-layout{grid-template-columns:minmax(0,1fr) 340px}.invoice-preview-stage{padding:24px}.invoice-paper{transform:scale(.86);transform-origin:top center;margin-bottom:-150px}.invoice-line-editor{grid-template-columns:minmax(0,1fr) 65px 82px 32px}}
@media(max-width:900px){.invoice-editor-app{height:auto;min-height:calc(100svh - 70px);margin:-20px}.invoice-editor-layout{grid-template-columns:1fr}.invoice-control-panel{order:-1;max-height:none}.invoice-preview-stage{min-height:800px}.invoice-paper{transform:scale(.76);margin-bottom:-270px}.invoice-editor-toolbar{position:sticky;top:0;z-index:5}.invoice-editor-toolbar-actions .button:first-child{display:none}}

/* ===== Invoice editor — uniform professional form grid ================== */
.invoice-editor-layout{
  grid-template-columns:minmax(520px,1fr) 460px;
}
.invoice-control-section{
  padding:22px 20px;
}
.invoice-control-section .form-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 16px;
  align-items:start;
}
.invoice-control-section .form-grid-2 > *,
.invoice-control-section .field{
  min-width:0;
  width:100%;
}
.invoice-control-section .field{
  margin-top:0;
}
.invoice-control-section .field label{
  display:flex;
  align-items:flex-end;
  min-height:18px;
  margin:0 0 6px;
  font-size:11px;
  line-height:1.2;
  font-weight:600;
  color:#aeb5bc;
}
.invoice-control-section .field input,
.invoice-control-section .field select{
  display:block;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  padding:0 12px !important;
  margin:0 !important;
  box-sizing:border-box;
  border:1px solid #4a5056;
  border-radius:9px;
  background:#30353a;
  color:#f4f6f7;
  font-size:12px;
  line-height:40px;
}
.invoice-control-section .field select{
  appearance:auto;
}
.invoice-control-section .field input[type="date"]{
  line-height:normal;
}
.invoice-control-section .field textarea{
  width:100% !important;
  min-width:0 !important;
  min-height:96px;
  padding:12px 14px !important;
  box-sizing:border-box;
  border-radius:9px;
  font-size:12px;
}
.invoice-control-section .field input:focus,
.invoice-control-section .field select:focus,
.invoice-control-section .field textarea:focus{
  border-color:#5da6df;
  box-shadow:0 0 0 3px rgba(93,166,223,.14);
}
.invoice-control-section .invoice-section-title{
  margin-bottom:14px;
}
.invoice-upload-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.invoice-upload-row .button{
  width:100%;
  height:44px;
  justify-content:center;
}
@media(max-width:1250px){
  .invoice-editor-layout{grid-template-columns:minmax(480px,1fr) 420px}
}
@media(max-width:1050px){
  .invoice-editor-layout{grid-template-columns:1fr}
  .invoice-control-panel{order:-1}
}
@media(max-width:620px){
  .invoice-control-section .form-grid-2,
  .invoice-upload-row{grid-template-columns:1fr}
}

/* ===== Invoice editor — resizable right panel ========================== */
.invoice-editor-layout{
  --invoice-panel-width:460px;
  grid-template-columns:minmax(420px,1fr) 8px var(--invoice-panel-width) !important;
}
.invoice-panel-resizer{
  position:relative;
  width:8px;
  min-width:8px;
  height:100%;
  cursor:col-resize;
  background:#292e33;
  border-left:1px solid #3a4046;
  border-right:1px solid #3a4046;
  z-index:8;
  touch-action:none;
  user-select:none;
}
.invoice-panel-resizer span{
  position:absolute;
  top:50%;
  left:50%;
  width:3px;
  height:54px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:#68717a;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);
  transition:height .16s ease,background .16s ease,box-shadow .16s ease;
}
.invoice-panel-resizer:hover span,
.invoice-panel-resizer.is-dragging span{
  height:78px;
  background:#61a8e0;
  box-shadow:0 0 0 3px rgba(97,168,224,.14);
}
.invoice-panel-resizer:hover,
.invoice-panel-resizer.is-dragging{background:#30383f}
.invoice-panel-resizing,
.invoice-panel-resizing *{cursor:col-resize!important;user-select:none!important}
.invoice-control-panel{min-width:0}
@media(max-width:1050px){
  .invoice-editor-layout{grid-template-columns:1fr!important}
  .invoice-panel-resizer{display:none!important}
}


/* ===== User menu positioning fix ======================================= */
.user-menu{position:relative!important}
.user-menu-popover{
  position:absolute!important;
  top:calc(100% + 10px)!important;
  right:0!important;
  width:268px;
  max-width:calc(100vw - 24px);
  padding:10px;
  z-index:120;
  transform-origin:top right;
}
.user-menu-identity{
  gap:10px;
  padding:8px 8px 10px;
  margin-bottom:6px;
}
.user-menu-links{display:flex;flex-direction:column;gap:3px}
.user-menu-links a{padding:9px 8px;gap:10px}
.user-menu-links a>span:nth-child(2){flex:1;min-width:0}
.user-menu-links strong{font-size:13px}
.user-menu-links small{font-size:10px;color:var(--ink-500);margin-top:2px;display:block}
.user-menu-signout{margin-top:7px;padding-top:10px}

@media(max-width:1200px){
  .topbar{gap:10px;padding-left:18px;padding-right:18px}
  .topbar-actions{gap:8px}
  .search-trigger{width:180px}
  .demo-ribbon{padding:5px 8px}
  .button-primary.topbar-create{padding-left:12px;padding-right:12px}
  .user-menu-popover{width:244px;padding:8px}
  .user-menu-links small{display:none}
  .user-menu-links a{min-height:42px}
  .user-menu-identity{padding:7px 7px 9px}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .user-menu-popover{right:-4px!important;width:min(244px,calc(100vw - 20px))}
  .kpi-grid{grid-template-columns:1fr}
}


/* ===== Invoice editor — responsive panel density ======================= */
.invoice-control-panel.is-single-col .form-grid-2,
.invoice-control-panel.is-single-col .invoice-upload-row{
  grid-template-columns:1fr !important;
}
.invoice-control-panel.is-single-col .switch-row{
  justify-content:flex-start;
}
.invoice-control-panel.is-two-col .form-grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}


/* ===== Fast quick-create menu =========================================== */
.quick-create-popover{
  position:fixed;
  z-index:10050;
  width:330px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper-raised);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  contain:layout paint;
  transform:translateZ(0);
}
.quick-create-popover[hidden]{display:none!important}
.quick-create-head{display:flex;align-items:center;justify-content:space-between;padding:5px 6px 8px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.quick-create-head strong{font-size:13px}
.quick-create-head .icon-button{width:30px;height:30px}
.quick-create-list{display:flex;flex-direction:column;gap:3px}
.quick-create-item{width:100%;display:flex;align-items:center;gap:11px;padding:10px;border-radius:10px;text-align:left;color:var(--ink-700);background:transparent;border:0;transition:background .08s ease}
.quick-create-item:hover,.quick-create-item:focus-visible{background:var(--paper-sunken);outline:none}
.quick-create-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:9px;background:var(--blue-100);color:var(--blue-700)}
.quick-create-item>span:nth-child(2){min-width:0;flex:1}
.quick-create-item strong,.quick-create-item small{display:block}
.quick-create-item strong{font-size:12px;font-weight:600}
.quick-create-item small{margin-top:2px;font-size:10px;color:var(--ink-500)}
@media(max-width:600px){.quick-create-popover{width:calc(100vw - 24px)!important;left:12px!important}.quick-create-item{padding:9px}}

/* Blur on the whole dashboard is expensive on some browsers. */
.modal-backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* ===== Invoice resizable panel — safe prestation layout ================ */
.invoice-line-editor,
.invoice-line-editor .field,
.invoice-line-editor .field input{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.invoice-line-editor .field label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Wide/right panel: keep the compact horizontal row. */
.invoice-control-panel.is-two-col .invoice-line-editor{
  display:grid;
  grid-template-columns:minmax(120px,1fr) 72px 96px 36px;
  gap:8px;
  align-items:end;
}

/* Narrow/right panel: true single-column editor, no crushed fields. */
.invoice-control-panel.is-single-col .invoice-line-editor{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:9px !important;
  align-items:stretch;
  padding:12px 0 14px;
}
.invoice-control-panel.is-single-col .invoice-line-editor .field,
.invoice-control-panel.is-single-col .invoice-line-editor .invoice-line-desc{
  grid-column:1 !important;
  width:100%;
}
.invoice-control-panel.is-single-col .invoice-line-editor .invoice-line-remove{
  grid-column:1 !important;
  justify-self:end;
  width:40px;
  height:40px;
  margin-top:1px;
}
.invoice-control-panel.is-single-col .invoice-line-editor .field label{
  min-height:auto;
  margin-bottom:5px;
  overflow:visible;
  text-overflow:clip;
}
.invoice-control-panel.is-single-col .invoice-control-section{
  padding-left:16px;
  padding-right:16px;
}
.invoice-control-panel.is-single-col .invoice-section-title{
  align-items:center;
}

/* Prevent legacy viewport breakpoints from squeezing prestation columns. */
@media(max-width:1200px){
  .invoice-control-panel.is-two-col .invoice-line-editor{
    grid-template-columns:minmax(110px,1fr) 68px 90px 34px !important;
  }
  .invoice-control-panel.is-single-col .invoice-line-editor{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* ===== Login — architectural mathematics / physics motion ============== */
.architecture-equations{position:absolute;inset:0;z-index:3;pointer-events:none;font:500 10px/1.2 var(--font-mono);letter-spacing:.035em;color:rgba(var(--atmosphere-ink),.58)}
.architecture-equations .eq{position:absolute;padding:6px 9px;border:1px solid rgba(var(--atmosphere-ink),.09);border-radius:7px;background:rgba(255,255,255,.035);backdrop-filter:blur(5px);white-space:nowrap;will-change:transform,opacity}
[data-theme="dark"] .architecture-equations .eq{background:rgba(0,0,0,.025)}
.eq-a{left:9%;top:40%;animation:eq-float-a 12s ease-in-out infinite alternate}
.eq-b{right:10%;top:36%;animation:eq-float-b 15s ease-in-out infinite alternate}
.eq-c{left:13%;bottom:22%;animation:eq-float-c 13s ease-in-out infinite alternate}
.eq-d{right:8%;bottom:30%;animation:eq-float-d 17s ease-in-out infinite alternate}
.eq-e{left:42%;top:12%;animation:eq-float-e 14s ease-in-out infinite alternate}
@keyframes eq-float-a{from{transform:translate(0,0) rotate(-1deg);opacity:.42}to{transform:translate(18px,-14px) rotate(1deg);opacity:.82}}
@keyframes eq-float-b{from{transform:translate(0,0);opacity:.35}to{transform:translate(-14px,18px);opacity:.75}}
@keyframes eq-float-c{from{transform:translate(0,0) rotate(1deg);opacity:.4}to{transform:translate(16px,10px) rotate(-1deg);opacity:.78}}
@keyframes eq-float-d{from{transform:translate(0,0);opacity:.32}to{transform:translate(-18px,-12px);opacity:.72}}
@keyframes eq-float-e{from{transform:translateY(0);opacity:.38}to{transform:translateY(14px);opacity:.74}}
@media(prefers-reduced-motion:reduce){.architecture-equations .eq{animation:none!important}}


/* ===== Login live data + extra motion ================================= */
.login-live-panel{position:absolute;right:var(--space-6);top:var(--space-6);z-index:3;display:grid;gap:10px;width:min(250px,38%)}
.live-card{display:grid;gap:4px;padding:12px 14px;border:1px solid rgba(var(--atmosphere-ink),.09);border-radius:14px;background:rgba(255,255,255,.045);backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(0,0,0,.10)}
[data-theme="dark"] .live-card{background:rgba(0,0,0,.03);box-shadow:0 8px 22px rgba(0,0,0,.05)}
.live-card small{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--atmosphere-ink),.55)}
.live-card strong{font-family:var(--font-display);font-size:clamp(20px,2.4vw,28px);line-height:1.05;color:rgba(var(--atmosphere-ink),.92)}
.live-card span{font-size:12px;line-height:1.35;color:rgba(var(--atmosphere-ink),.66)}
.live-clock-card{animation:live-card-float-a 8s ease-in-out infinite alternate}
.live-weather-card{animation:live-card-float-b 10s ease-in-out infinite alternate}
.live-weather-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.login-weather-city-switch{--weather-pill-x:3px;--weather-pill-w:42px;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:3px;padding:3px;border:1px solid rgba(var(--atmosphere-ink),.12);border-radius:999px;background:rgba(0,0,0,.08);backdrop-filter:blur(8px);overflow:hidden}
.login-weather-city-switch::before{content:"";position:absolute;z-index:0;left:0;top:3px;bottom:3px;width:var(--weather-pill-w);border-radius:999px;background:rgba(255,255,255,.15);box-shadow:0 1px 10px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.06);transform:translate3d(var(--weather-pill-x),0,0);transition:transform .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1),background .22s ease;will-change:transform,width}
.login-weather-city-switch.is-positioning::before{transition:none!important}
.login-weather-city-switch button{position:relative;z-index:1;appearance:none;border:0;min-height:24px;padding:4px 8px;border-radius:999px;background:transparent;color:rgba(var(--atmosphere-ink),.62);font:600 9px/1 var(--font-mono);letter-spacing:.02em;cursor:pointer;transition:color .24s ease,transform .18s ease;white-space:nowrap}
.login-weather-city-switch button:hover{color:rgba(var(--atmosphere-ink),.92)}
.login-weather-city-switch button:focus-visible{outline:2px solid rgba(101,168,221,.9);outline-offset:2px}
.login-weather-city-switch button[aria-pressed="true"]{color:rgba(var(--atmosphere-ink),.98)}
.login-weather-city-switch button:active{transform:scale(.96)}
[data-theme="dark"] .login-weather-city-switch{background:rgba(255,255,255,.035)}
[data-theme="dark"] .login-weather-city-switch::before{background:rgba(255,255,255,.12)}
.live-weather-card #loginWeatherTemp,.live-weather-card #loginWeatherText{transition:opacity .18s ease,transform .26s cubic-bezier(.22,1,.36,1),filter .18s ease}
.live-weather-card.weather-data-out #loginWeatherTemp,.live-weather-card.weather-data-out #loginWeatherText{opacity:.18;transform:translateY(5px);filter:blur(1.5px)}
.live-weather-card.weather-data-in #loginWeatherTemp,.live-weather-card.weather-data-in #loginWeatherText{animation:weather-data-enter .34s cubic-bezier(.22,1,.36,1) both}
@keyframes weather-data-enter{from{opacity:.15;transform:translateY(-5px);filter:blur(1px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(max-width:1120px){.live-weather-head{align-items:flex-start;flex-direction:column}.login-weather-city-switch{width:100%;justify-content:space-between}.login-weather-city-switch button{flex:1;padding-inline:5px}}
@keyframes live-card-float-a{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes live-card-float-b{from{transform:translateY(0)}to{transform:translateY(7px)}}
.eq-f{right:17%;top:17%;animation:eq-float-f 16s ease-in-out infinite alternate}
.eq-g{left:21%;bottom:12%;animation:eq-float-g 18s ease-in-out infinite alternate}
@keyframes eq-float-f{from{transform:translate(0,0);opacity:.34}to{transform:translate(16px,11px);opacity:.78}}
@keyframes eq-float-g{from{transform:translate(0,0) rotate(.5deg);opacity:.3}to{transform:translate(-12px,-10px) rotate(-.5deg);opacity:.72}}
@media(max-width:980px){.login-live-panel{right:16px;top:16px;width:min(220px,42%)}}
@media(max-width:900px){.login-live-panel{position:static;width:100%;grid-template-columns:1fr 1fr;margin:18px 0 0}.login-panel .login-copy{margin-top:10px}}
@media(max-width:640px){.login-live-panel{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.live-clock-card,.live-weather-card{animation:none!important}.login-weather-city-switch::before,.live-weather-card #loginWeatherTemp,.live-weather-card #loginWeatherText{transition:none!important;animation:none!important}}

/* ===== Compact filter dropdowns ======================================== */
.filters{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.filters .field{
  flex:0 0 auto !important;
  min-width:0 !important;
  width:auto !important;
}
.filters .field select,
.filters select{
  width:190px !important;
  min-width:160px !important;
  max-width:220px !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  padding:0 36px 0 12px !important;
  line-height:40px;
  box-sizing:border-box;
}
.filters .field-search{
  flex:1 1 280px;
  min-width:220px;
  max-width:520px;
}
.filters .field-search input{
  width:100%;
  height:40px;
  min-height:40px;
  max-height:40px;
  box-sizing:border-box;
}
@media(max-width:620px){
  .filters .field-search{flex:1 1 100%;max-width:none}
  .filters .field,
  .filters .field select,
  .filters select{width:100% !important;max-width:none !important}
}

/* ===== Filter alignment — search left, dropdowns right ================= */
.filters .field:first-of-type{
  margin-left:auto;
}
@media(max-width:620px){
  .filters .field:first-of-type{margin-left:0}
}

/* ===== Project contract / architecture offer model ===================== */
.project-form-sections{display:flex;flex-direction:column;gap:18px}
.project-form-section{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--paper-raised)}
.project-form-title{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.project-form-title>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--blue-100);color:var(--blue-700);font:600 11px/1 var(--font-mono);flex:0 0 30px}
.project-form-title h3{font-size:15px;margin:0}.project-form-title p{font-size:12px;color:var(--ink-500);margin-top:3px}
.project-form-text{margin-top:14px}.project-form-triple{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.project-form-triple textarea{min-height:135px}
.project-fee-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--line)}.project-fee-head span{font-size:11px;color:var(--ink-500)}
.project-fee-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 14px}.project-fee-row{display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:8px;align-items:end}.project-fee-row .field{margin:0}
.project-contract-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.project-contract-kpis article{background:var(--paper-raised);border:1px solid var(--line);border-radius:15px;padding:16px}.project-contract-kpis span,.project-contract-kpis small{display:block;color:var(--ink-500);font-size:11px}.project-contract-kpis strong{display:block;font-family:var(--font-display);font-size:21px;margin:7px 0 3px}
.project-contract-grid{grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr)}
.project-fee-schedule{display:flex;flex-direction:column}.project-fee-schedule-head,.project-fee-schedule-row,.project-fee-schedule-total{display:grid;grid-template-columns:minmax(0,1fr) 70px 130px;gap:12px;align-items:center}.project-fee-schedule-head{padding:0 10px 9px;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-500)}.project-fee-schedule-head span:nth-child(n+2),.project-fee-schedule-row>span:nth-child(n+2),.project-fee-schedule-total>span,.project-fee-schedule-total>strong:last-child{text-align:right}.project-fee-schedule-row{padding:11px 10px;border-top:1px solid var(--line);font-size:12px}.project-fee-schedule-row>span:first-child{display:flex;align-items:center;gap:10px;min-width:0}.project-fee-schedule-row i{width:24px;height:24px;display:grid;place-items:center;background:var(--paper-sunken);border-radius:7px;font:500 9px/1 var(--font-mono);color:var(--ink-500);font-style:normal;flex:0 0 24px}.project-fee-schedule-row strong{overflow:hidden;text-overflow:ellipsis}.project-fee-schedule-total{padding:12px 10px;border-top:2px solid var(--blue-700);font-size:12px}
.project-contract-info{display:grid;gap:15px}.project-contract-info small,.project-contract-info strong{display:block}.project-contract-info small{color:var(--ink-500);font-size:11px}.project-contract-info strong{margin-top:3px}
.project-mission-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:18px}.project-mission-list{list-style:none;display:flex;flex-direction:column;gap:0}.project-mission-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.project-mission-list li:last-child{border-bottom:0}.project-mission-list li span{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;font:500 9px/1 var(--font-mono);color:var(--blue-700)}.project-mission-list li strong{font-size:12px}.project-bullet-list{padding-left:18px;display:flex;flex-direction:column;gap:9px;font-size:12px;line-height:1.45}
@media(max-width:1100px){.project-contract-kpis{grid-template-columns:repeat(2,1fr)}.project-contract-grid,.project-mission-grid{grid-template-columns:1fr}.project-form-triple{grid-template-columns:1fr}.project-fee-grid{grid-template-columns:1fr}}
@media(max-width:700px){.project-contract-kpis{grid-template-columns:1fr}.project-fee-schedule-head,.project-fee-schedule-row,.project-fee-schedule-total{grid-template-columns:minmax(0,1fr) 52px 105px;gap:7px}.project-form-section{padding:14px}}

/* ===== Project create/edit — dedicated page ============================= */
.project-editor-page{max-width:1320px;margin:0 auto;width:100%}
.project-editor-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.project-editor-top h1{font-size:clamp(26px,3vw,38px);margin:8px 0 5px}.project-editor-top>div:first-child>p:last-child{color:var(--ink-500)}
.project-editor-actions,.project-editor-bottom{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.project-page-form{display:flex;flex-direction:column;gap:18px}
.project-page-form .project-form-section{padding:24px;border-radius:18px;box-shadow:var(--shadow-xs)}
.project-page-form .field input,.project-page-form .field select{min-height:42px}
.project-page-form .field textarea{min-height:118px}
.project-budget-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.project-budget-summary>div{padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper-sunken)}
.project-budget-summary span,.project-budget-summary strong{display:block}.project-budget-summary span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500)}.project-budget-summary strong{font-size:17px;margin-top:5px}
.project-page-form .project-fee-row{grid-template-columns:minmax(0,1fr) 86px 118px;align-items:end}
.project-fee-preview{height:42px;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--paper-sunken);font-size:11px;font-weight:600;white-space:nowrap}
.project-editor-bottom{justify-content:flex-end;padding:18px 0 4px;border-top:1px solid var(--line)}
@media(max-width:900px){.project-editor-top{align-items:flex-start;flex-direction:column}.project-editor-actions{width:100%}.project-editor-actions .button{flex:1}.project-budget-summary{grid-template-columns:1fr}.project-page-form .project-fee-row{grid-template-columns:minmax(0,1fr) 78px 110px}}
@media(max-width:620px){.project-page-form .project-form-section{padding:16px}.project-page-form .project-fee-row{grid-template-columns:1fr 82px}.project-fee-preview{grid-column:1/-1;justify-content:flex-start}.project-editor-bottom .button{flex:1}}


/* ===== Reliable clickable navigation + prominent login live info ===== */
.nav-link,a[href^="#/"]{pointer-events:auto!important;cursor:pointer}
.login-live-panel{z-index:6!important;width:min(280px,42%)!important}
.live-card{background:rgba(7,20,32,.56)!important;border-color:rgba(255,255,255,.14)!important;box-shadow:0 14px 38px rgba(0,0,0,.2)!important}
.live-card small{color:rgba(255,255,255,.62)!important}
.live-card strong{color:#fff!important}
.live-card span{color:rgba(255,255,255,.82)!important}
[data-theme="dark"] .live-card{background:rgba(255,255,255,.72)!important;border-color:rgba(20,28,34,.12)!important}
[data-theme="dark"] .live-card small{color:rgba(20,28,34,.55)!important}
[data-theme="dark"] .live-card strong{color:#172027!important}
[data-theme="dark"] .live-card span{color:rgba(20,28,34,.72)!important}
@media(max-width:900px){.login-live-panel{width:100%!important}}

/* ===== Project cards — uniform status pills ============================= */
.project-card-top{align-items:flex-start}
.project-card-top>div:first-child{min-width:0;flex:1}
.project-status-badge{
  width:112px !important;
  min-width:112px !important;
  max-width:112px !important;
  height:28px !important;
  min-height:28px !important;
  max-height:28px !important;
  padding:0 10px !important;
  justify-content:center !important;
  align-self:flex-start !important;
  line-height:1 !important;
  white-space:nowrap !important;
  border-radius:999px !important;
  font-size:10px !important;
}
.project-status-badge::before{flex:0 0 6px}

/* ===== Project fee schedule — dynamic steps ============================= */
.project-fee-head-actions{align-items:center}
.project-fee-head-actions>div{display:flex;flex-direction:column;gap:3px}
.project-fee-head-actions .button{flex:0 0 auto}
.project-page-form .project-fee-grid{display:flex;flex-direction:column;gap:8px}
.project-page-form .project-fee-row{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 90px 130px 112px;
  gap:9px;
  align-items:end;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper-raised);
}
.project-fee-preview{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper-sunken);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
}
.project-fee-row-actions{height:40px;display:flex;align-items:center;justify-content:flex-end;gap:5px}
.project-fee-row-actions .icon-button{width:32px;height:32px;min-width:32px}
.project-fee-row-actions .project-fee-delete{color:var(--red-600)}
.project-fee-row-actions button:disabled{opacity:.28;cursor:not-allowed}
.project-fee-live-total{
  margin-top:10px;
  min-height:44px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 150px;
  align-items:center;
  gap:14px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper-sunken);
  font-size:11px;
}
.project-fee-live-total strong{font-size:13px}
.project-fee-live-total>span:last-child{text-align:right;font-weight:600}
.project-fee-live-total.is-ok{border-color:color-mix(in srgb,var(--green-600) 35%,var(--line));background:color-mix(in srgb,var(--green-100) 42%,var(--paper-raised))}
.project-fee-live-total.is-warning{border-color:color-mix(in srgb,var(--amber-600) 30%,var(--line));background:color-mix(in srgb,var(--amber-100) 35%,var(--paper-raised))}
@media(max-width:900px){
  .project-page-form .project-fee-row{grid-template-columns:minmax(0,1fr) 82px 120px}
  .project-fee-row-actions{grid-column:1/-1;justify-content:flex-end;height:34px}
}
@media(max-width:620px){
  .project-fee-head-actions{align-items:stretch;flex-direction:column}
  .project-fee-head-actions .button{width:100%;justify-content:center}
  .project-page-form .project-fee-row{grid-template-columns:minmax(0,1fr) 82px}
  .project-fee-preview{grid-column:1/-1;justify-content:flex-start}
  .project-fee-live-total{grid-template-columns:1fr auto}
  .project-fee-live-total>span:last-child{grid-column:1/-1;text-align:left}
}

/* ===== Clients — dedicated CRM pages =================================== */
.clients-filterbar{align-items:center}
.clients-filterbar .field-search{flex:1 1 320px;max-width:560px}
.clients-filterbar .filter-select-field{margin-left:auto;flex:0 0 190px;min-width:190px}
.client-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:16px}
.client-card{display:flex;flex-direction:column;gap:16px;min-height:300px;padding:20px;background:var(--paper-raised);border:1px solid var(--line);border-radius:18px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.client-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.client-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.client-card-head>div{min-width:0}.client-card h3{font-size:19px;line-height:1.15;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}.client-code{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--ink-500)}
.client-type-pill{display:inline-flex;align-items:center;justify-content:center;min-width:92px;height:30px;padding:0 10px;border-radius:999px;background:var(--blue-100);color:var(--blue-700);font-size:11px;font-weight:600;white-space:nowrap}
.client-card-contact{font-size:12px;line-height:1.8;color:var(--ink-500)}.client-card-contact i{width:18px;color:var(--ink-400)}
.client-card-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:auto}.client-card-kpis span{padding:10px 11px;border-radius:11px;background:var(--paper-sunken);min-width:0}.client-card-kpis small,.client-card-kpis strong{display:block}.client-card-kpis small{font-size:10px;color:var(--ink-500);margin-bottom:3px}.client-card-kpis strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-card-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;padding-top:2px}.client-card-actions .button{margin-right:auto}
.client-editor-page .project-page-form{max-width:1180px}
.client-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.client-kpi-grid article{padding:18px;background:var(--paper-raised);border:1px solid var(--line);border-radius:16px}.client-kpi-grid span,.client-kpi-grid strong,.client-kpi-grid small{display:block}.client-kpi-grid span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}.client-kpi-grid strong{font-family:var(--font-display);font-size:22px;margin-top:8px}.client-kpi-grid small{font-size:11px;color:var(--ink-500);margin-top:4px}
.client-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px}.client-contact-grid small,.client-contact-grid strong{display:block}.client-contact-grid small{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500);margin-bottom:4px}.client-contact-grid strong{font-size:13px;word-break:break-word}.client-notes{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.client-notes small{font-size:10px;text-transform:uppercase;color:var(--ink-500)}.client-notes p{margin-top:6px;font-size:13px;line-height:1.55}
.client-activity-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.client-activity-list>div{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:var(--paper-sunken)}.client-activity-list i{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--blue-100);color:var(--blue-700)}.client-activity-list strong,.client-activity-list small{display:block}.client-activity-list strong{font-size:17px}.client-activity-list small{font-size:10px;color:var(--ink-500)}
.client-projects-list{display:flex;flex-direction:column}.client-project-row{display:grid;grid-template-columns:minmax(210px,1.4fr) auto minmax(120px,.6fr) minmax(120px,.6fr) 18px;gap:16px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line);transition:background .15s ease}.client-project-row:last-child{border-bottom:0}.client-project-row:hover{background:var(--paper-sunken)}.client-project-row>div:first-child strong,.client-project-row>div:first-child small{display:block}.client-project-row>div:first-child strong{font-size:14px;margin:2px 0}.client-project-row>div:first-child small,.client-project-row>div:nth-child(3) small,.client-project-row>div:nth-child(4) small{font-size:10px;color:var(--ink-500)}.client-project-row>div:nth-child(3) strong,.client-project-row>div:nth-child(4) strong{display:block;font-size:12px;margin-top:3px}.client-project-row>i{color:var(--ink-400)}
.client-invoice-money{margin-left:auto;text-align:right;min-width:120px}.client-invoice-money strong,.client-invoice-money small{display:block}.client-invoice-money small{font-size:10px;color:var(--ink-500);margin-top:2px}
@media(max-width:1150px){.client-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.client-project-row{grid-template-columns:minmax(200px,1fr) auto minmax(120px,.5fr) 18px}.client-project-row>div:nth-child(4){display:none}}
@media(max-width:760px){.clients-filterbar .filter-select-field{margin-left:0;flex:1 1 100%;min-width:0}.client-kpi-grid{grid-template-columns:1fr}.client-contact-grid,.client-activity-list{grid-template-columns:1fr}.client-project-row{grid-template-columns:1fr auto;gap:8px 12px}.client-project-row>div:nth-child(3),.client-project-row>div:nth-child(4){display:none}.client-project-row>i{display:none}.client-card-kpis{grid-template-columns:1fr 1fr}}
.inline-link{color:var(--blue-700);font-weight:600;text-decoration:none}.inline-link:hover{text-decoration:underline}


/* ===== Project / Client cards: same visual height ====================== */
:root{--entity-card-height:380px}
.project-cards,.client-cards{
  align-items:stretch;
  grid-auto-rows:var(--entity-card-height);
}
.project-card,.client-card{
  height:var(--entity-card-height);
  min-height:var(--entity-card-height);
  max-height:var(--entity-card-height);
  box-sizing:border-box;
  overflow:hidden;
}
.project-card{gap:12px}
.project-card>p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
  min-height:58px;
  max-height:58px;
  line-height:1.48;
}
.project-card .project-meta{min-height:96px}
.project-card .list-actions{margin-top:auto}
.client-card-contact{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
  min-height:64px;
  max-height:64px;
}
.client-card-kpis{margin-top:auto}
.client-projects-panel{margin-top:0}
.client-projects-panel .panel-head>div:first-child small{display:block;margin-top:4px;font-size:11px}
@media(max-width:760px){
  :root{--entity-card-height:auto}
  .project-cards,.client-cards{grid-auto-rows:auto}
  .project-card,.client-card{height:auto;min-height:340px;max-height:none}
}

/* ===== Colored CRUD actions ============================================ */
.action-view{
  background:color-mix(in srgb,var(--blue-700) 12%,var(--paper-raised))!important;
  border-color:color-mix(in srgb,var(--blue-700) 38%,var(--line))!important;
  color:var(--blue-700)!important;
}
.action-view:hover{
  background:var(--blue-700)!important;
  border-color:var(--blue-700)!important;
  color:#fff!important;
}
.action-edit{
  background:color-mix(in srgb,#d78a24 13%,var(--paper-raised))!important;
  border-color:color-mix(in srgb,#d78a24 45%,var(--line))!important;
  color:#b56c0d!important;
}
.action-edit:hover,.action-edit-text:hover{
  background:#c97a17!important;
  border-color:#c97a17!important;
  color:#fff!important;
}
.action-edit-text{
  background:color-mix(in srgb,#d78a24 13%,var(--paper-raised))!important;
  border-color:color-mix(in srgb,#d78a24 45%,var(--line))!important;
  color:#a86109!important;
}
.action-delete{
  background:color-mix(in srgb,#d94d45 11%,var(--paper-raised))!important;
  border-color:color-mix(in srgb,#d94d45 40%,var(--line))!important;
  color:#c43d36!important;
}
.action-delete:hover{
  background:#cf443d!important;
  border-color:#cf443d!important;
  color:#fff!important;
}

/* ===== Client → linked projects ======================================== */
.client-linked-projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  padding:16px;
}
.client-linked-project-card{
  min-width:0;
  min-height:310px;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--paper-raised);
}
.client-linked-project-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.client-linked-project-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.client-linked-project-head>div{min-width:0}
.client-linked-project-head h3{font-size:16px;line-height:1.2;margin-top:3px}
.client-linked-project-card>p{
  color:var(--ink-500);
  font-size:12px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.client-linked-project-actions{margin-top:auto;display:flex;align-items:center;gap:7px}
.client-linked-project-actions .action-view{margin-right:auto}

/* ===== Project files ==================================================== */
.project-files-panel{overflow:hidden}
.project-files-panel .panel-head>div small{display:block;margin-top:3px;font-size:11px}
.project-files-list{display:flex;flex-direction:column}
.project-file-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
}
.project-file-row:last-child{border-bottom:0}
.project-file-row:hover{background:var(--paper-sunken)}
.project-file-icon{
  width:40px;height:40px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--blue-100);color:var(--blue-700);font-size:17px;
}
.project-file-main{min-width:0}
.project-file-main strong,.project-file-main small,.project-file-main span{display:block}
.project-file-main strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-file-main small{margin-top:2px;font-size:10px;color:var(--ink-500)}
.project-file-main span{margin-top:3px;font-size:11px;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-file-drop{
  position:relative;
  min-height:180px;
  border:1.5px dashed var(--line-strong);
  border-radius:14px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:7px;
  text-align:center;
  background:var(--paper-sunken);
  overflow:hidden;
}
.project-file-drop>i{font-size:30px;color:var(--blue-700)}
.project-file-drop>span{font-size:11px;color:var(--ink-500)}
.project-file-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.project-file-selection{margin-top:12px;display:flex;flex-direction:column;gap:6px;color:var(--ink-500);font-size:11px}
.project-file-selection>span{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:7px;align-items:center;padding:7px 9px;border-radius:8px;background:var(--paper-sunken)}
.project-file-selection strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-file-selection small{color:var(--ink-500)}

@media(max-width:760px){
  .client-linked-projects-grid{grid-template-columns:1fr;padding:12px}
  .client-linked-project-card{min-height:auto}
  .project-file-row{grid-template-columns:36px minmax(0,1fr)}
  .project-file-row>.list-actions{grid-column:2;justify-content:flex-start}
}

/* ===== Project tasks — direct inline editing ========================== */
.project-task-inline-list{display:flex;flex-direction:column;gap:10px;padding:14px}
.project-task-inline{border:1px solid var(--line);border-radius:14px;background:var(--paper-raised);padding:12px;transition:border-color .16s ease,opacity .16s ease,background .16s ease}
.project-task-inline:focus-within{border-color:var(--blue-700);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue-700) 10%,transparent)}
.project-task-inline.is-done{opacity:.66;background:color-mix(in srgb,var(--green-100) 35%,var(--paper-raised))}
.project-task-inline.is-done [data-task-field="title"]{text-decoration:line-through}
.project-task-main-fields{display:grid;grid-template-columns:minmax(0,1.7fr) 150px;gap:10px}
.project-task-secondary-fields{display:grid;grid-template-columns:minmax(150px,1fr) 110px 130px 38px;gap:10px;align-items:end;margin-top:10px}
.project-task-inline label{display:flex;flex-direction:column;gap:5px;min-width:0}
.project-task-inline label>span{font-size:10px;font-weight:600;color:var(--ink-500);text-transform:uppercase;letter-spacing:.05em}
.project-task-inline input,.project-task-inline select{width:100%;height:38px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);padding:0 10px;color:var(--ink-900);outline:none;min-width:0}
.project-task-inline input:focus,.project-task-inline select:focus{border-color:var(--blue-700);box-shadow:var(--shadow-focus)}
.project-task-description{margin-top:10px}
.project-task-secondary-fields .action-delete{width:38px;height:38px}
.task-click-row{cursor:pointer}
.task-click-row:hover{background:color-mix(in srgb,var(--blue-100) 35%,transparent)!important}
@media(max-width:900px){.project-task-main-fields{grid-template-columns:1fr}.project-task-secondary-fields{grid-template-columns:1fr 1fr}.project-task-secondary-fields .action-delete{justify-self:end}}
@media(max-width:620px){.project-task-secondary-fields{grid-template-columns:1fr}.project-task-secondary-fields .action-delete{justify-self:start}}


/* ===== LSTUDIO signature logo ========================================== */
.brand-symbol.brand-signature{
  width:42px;
  height:38px;
  padding:2px;
  border-radius:8px;
  background:transparent;
  overflow:hidden;
}
.brand-signature img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.login-brand{
  flex-direction:row;
  align-items:center;
  gap:12px;
}
.login-signature-logo{
  width:74px;
  height:56px;
  object-fit:contain;
  flex:0 0 auto;
}
.login-brand-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.login-brand-copy strong{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--text-lg);
  letter-spacing:.02em;
}
[data-theme="dark"] .brand-signature img,
[data-theme="dark"] .login-signature-logo{
  filter:invert(1);
}
.invoice-logo-zone img{
  width:auto;
  max-width:190px;
  max-height:82px;
  object-fit:contain;
  object-position:left center;
}
@media(max-width:720px){
  .login-signature-logo{width:62px;height:48px}
}


/* Final brand override — login blueprint uses LSTUDIO black */
.login-atmosphere,[data-theme="dark"] .login-atmosphere{background-color:#1A1A1A!important;--atmosphere-ink:255,255,255!important}

/* ===== Project cards: clamp long content cleanly ======================= */
.project-card .project-code,
.client-linked-project-card .project-code{
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.project-card h3,
.project-card h3 a,
.client-linked-project-card h3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.22;
  max-height:2.44em;
}
.project-card>p,
.client-linked-project-card>p{
  display:-webkit-box !important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  overflow:hidden !important;
  text-overflow:ellipsis;
  line-height:1.48;
  min-height:2.96em !important;
  max-height:2.96em !important;
}


/* ===== Lots & consultations ============================================ */
.lot-click-row{cursor:pointer;transition:background .16s ease,border-color .16s ease}
.lot-click-row:hover{background:color-mix(in srgb,var(--blue-100) 25%,transparent)}
.lot-consult-summary{display:block;margin-top:6px;font-size:11px;color:var(--ink-500)}
.lot-consult-summary i{margin-right:5px}.lot-consult-summary b{color:var(--ink-900)}
.lot-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:0 0 16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.lot-editor-head h3{font-size:18px;margin-top:3px}
.lot-consultations{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.lot-consultations-title{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.lot-consultations-title h3{font-size:16px}.lot-consultations-title p{font-size:12px;color:var(--ink-500);margin-top:3px}
.lot-consultation-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(120px,.7fr) auto auto;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper-sunken);margin-bottom:8px}
.lot-consultation-row strong,.lot-consultation-row small{display:block}.lot-consultation-row small{font-size:11px;color:var(--ink-500);margin-top:2px}.lot-empty{padding:20px;margin-bottom:12px}
.lot-add-consultation{margin-top:14px;padding:14px;border:1px dashed var(--line-strong);border-radius:12px}.lot-add-consultation h4{font-size:14px;margin-bottom:10px}
@media(max-width:700px){.lot-consultation-row{grid-template-columns:1fr auto}.lot-consultation-row>div:nth-child(2){grid-column:1}.lot-consultation-row .badge{justify-self:start}}


/* ===== Topbar quick file upload ======================================= */
.topbar-file-add{height:40px;gap:8px;border-color:var(--line-strong);background:var(--paper-raised);color:var(--ink-900);white-space:nowrap}
.topbar-file-add:hover{border-color:#1A1A1A;background:var(--paper-sunken)}
.topbar-file-selected{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper-sunken)}
.topbar-file-selected-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#1A1A1A;color:#fff;flex:0 0 38px}
.topbar-file-selected strong,.topbar-file-selected small{display:block}.topbar-file-selected small{margin-top:3px;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:430px}
@media(max-width:1080px){.topbar-file-add span{display:none}.topbar-file-add{width:40px;padding:0;justify-content:center}}
@media(max-width:720px){.topbar-file-add{display:none}}

/* ===== Topbar profile button — clean single-layer avatar =============== */
.user-menu-trigger.icon-button{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  padding:0 !important;
  border:1px solid #1A1A1A !important;
  border-radius:50% !important;
  background:#1A1A1A !important;
  color:#fff !important;
  box-shadow:none !important;
  overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease !important;
}
.user-menu-trigger.icon-button:hover{
  transform:translateY(-1px);
  border-color:#1A1A1A !important;
  background:#1A1A1A !important;
  color:#fff !important;
  box-shadow:0 5px 14px rgba(26,26,26,.16) !important;
}
.user-menu-trigger.icon-button:active{
  transform:translateY(0) scale(.97);
}
.user-menu-trigger.icon-button:focus-visible{
  outline:3px solid rgba(26,26,26,.14);
  outline-offset:3px;
}
.user-menu-trigger .topbar-avatar{
  width:100% !important;
  height:100% !important;
  border-radius:inherit !important;
  background:transparent !important;
  color:#fff !important;
  border:0 !important;
  font-family:var(--font-mono);
  font-size:12px !important;
  font-weight:500;
  letter-spacing:.08em;
}
[data-theme="dark"] .user-menu-trigger.icon-button{
  border-color:#f2f2ef !important;
  background:#f2f2ef !important;
  color:#1A1A1A !important;
}
[data-theme="dark"] .user-menu-trigger .topbar-avatar{
  color:#1A1A1A !important;
}


/* ===== Compte & cabinet ===== */
.account-cabinet-grid{display:grid;grid-template-columns:minmax(320px,.75fr) minmax(520px,1.35fr);gap:18px;align-items:start}.account-cabinet-grid .panel{min-width:0}.cabinet-profile-panel .panel-head{align-items:flex-start}.cabinet-form-section{padding-top:18px;border-top:1px solid var(--line)}.cabinet-form-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.cabinet-form-section-head h3{font-size:15px;margin:0 0 4px}.cabinet-form-section-head p{font-size:12px;color:var(--ink-500);margin:0}.cabinet-form-section-head>span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-500);padding:5px 8px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}.account-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px}.account-cabinet-page .field input,.account-cabinet-page .field select{min-height:40px}@media(max-width:1050px){.account-cabinet-grid{grid-template-columns:1fr}}@media(max-width:650px){.account-cabinet-page .form-grid-2{grid-template-columns:1fr}.account-form-actions .button{width:100%;justify-content:center}}

/* ===== Filters final alignment: search left, select at far right ======= */
@media (min-width:621px){
  .filters{
    display:grid !important;
    grid-template-columns:minmax(260px,1fr) auto !important;
    align-items:center;
    width:100%;
    column-gap:20px;
  }
  .filters .field-search{
    justify-self:start;
    width:min(520px,100%);
    max-width:520px;
    min-width:260px;
  }
  .filters .field{
    justify-self:end;
    margin-left:0 !important;
  }
  .filters .field select,
  .filters select{
    width:210px !important;
    min-width:180px !important;
    max-width:210px !important;
  }
}

/* ===== Planning — working visits + hover detail ======================== */
.calendar-event-button{
  width:100%;
  border:0;
  font:inherit;
  text-align:left;
  cursor:pointer;
  appearance:none;
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;
}
.calendar-event-button:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  filter:brightness(.98);
}
.planning-hover-card{
  position:fixed;
  z-index:12000;
  width:min(320px,calc(100vw - 28px));
  padding:14px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:var(--paper-raised);
  color:var(--ink-900);
  box-shadow:0 16px 44px rgba(0,0,0,.18);
  pointer-events:none;
}
.planning-hover-card[hidden]{display:none!important}
.planning-hover-card>.planning-hover-type{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue-700);
}
.planning-hover-card>.planning-hover-type.visit{color:var(--amber-600)}
.planning-hover-card>strong{display:block;font-size:15px;line-height:1.3;margin-bottom:10px}
.planning-hover-card dl{display:grid;gap:5px;margin:0}
.planning-hover-card dl>div{display:grid;grid-template-columns:84px 1fr;gap:10px;font-size:11px}
.planning-hover-card dt{color:var(--ink-500)}
.planning-hover-card dd{margin:0;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.planning-hover-card p{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line);font-size:11px;line-height:1.45;color:var(--ink-700)}
.planning-hover-card>small{display:block;margin-top:9px;color:var(--ink-500);font-size:10px}
@media(max-width:700px){.planning-hover-card{display:none!important}}


/* ===== Mobile topbar polish ============================================ */
@media (max-width: 760px){
  .topbar{
    height:auto;
    min-height:unset;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    padding:10px 12px;
  }
  .topbar-left{
    flex:1 1 100%;
    min-width:0;
    gap:10px;
  }
  .breadcrumbs{
    display:flex;
    min-width:0;
    flex:1 1 auto;
  }
  .topbar-actions{
    flex:1 1 100%;
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto auto auto auto;
    align-items:center;
    gap:8px;
  }
  .demo-ribbon,
  .theme-toggle,
  .topbar-file-add,
  .button-primary.topbar-create,
  .user-menu-trigger.icon-button,
  .search-trigger{
    height:42px;
    min-height:42px;
  }
  .demo-ribbon{
    margin:0;
    padding:0 12px;
    border-radius:14px;
    white-space:nowrap;
    justify-content:center;
  }
  .search-trigger{
    width:100%;
    min-width:0;
    padding:0 12px;
    justify-content:flex-start;
    gap:10px;
  }
  .search-trigger span,
  .search-trigger kbd,
  .topbar-file-add span,
  .button-primary.topbar-create span{
    display:none !important;
  }
  .theme-toggle,
  .topbar-file-add,
  .button-primary.topbar-create{
    width:42px;
    min-width:42px;
    padding:0;
    justify-content:center;
  }
  .button-primary.topbar-create i,
  .topbar-file-add i,
  .theme-toggle i,
  .search-trigger i{
    margin:0;
  }
  .user-menu{
    justify-self:end;
  }
}

@media (max-width: 560px){
  .topbar{
    padding:10px;
    gap:8px;
  }
  .topbar-actions{
    grid-template-columns:auto minmax(0,1fr) auto auto auto;
  }
  .demo-ribbon{
    width:42px;
    min-width:42px;
    padding:0;
    font-size:0;
  }
  .demo-ribbon i{
    margin:0;
    font-size:14px;
  }
  .breadcrumbs strong{
    font-size:13px;
  }
  .topbar-eyebrow{
    font-size:10px;
  }
  .route-view{
    padding:14px;
  }
}


/* ===== Global CRUD polish + compact HR cards =========================== */
.employee-card{
  height:auto!important;
  min-height:300px!important;
  max-height:none!important;
  align-self:start;
}
.employee-card>p{
  min-height:0!important;
  max-height:none!important;
  display:block!important;
  overflow:visible!important;
  margin-bottom:4px;
}
.employee-card .content-stack{gap:8px;margin-top:6px}
.employee-card .list-actions{margin-top:auto;padding-top:18px}

/* Same compact action geometry everywhere */
.action-view,
.action-edit,
.action-delete,
[data-edit-company],
[data-delete-company],
[data-edit-employee],
[data-delete-employee],
[data-edit-invoice],
[data-delete-invoice],
[data-delete-payment]{
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  padding:0!important;
  display:inline-grid!important;
  place-items:center!important;
  border-radius:10px!important;
  flex:0 0 40px!important;
}
.action-view{
  background:color-mix(in srgb,#1A1A1A 7%,var(--paper-raised))!important;
  border-color:color-mix(in srgb,#1A1A1A 28%,var(--line))!important;
  color:#1A1A1A!important;
}
.action-view:hover{
  background:#1A1A1A!important;
  border-color:#1A1A1A!important;
  color:#fff!important;
}
.action-edit{
  background:#fff7ea!important;
  border-color:#e8b965!important;
  color:#b96b00!important;
}
.action-edit:hover{
  background:#c97700!important;
  border-color:#c97700!important;
  color:#fff!important;
}
.action-delete{
  background:#fff0ee!important;
  border-color:#efa39d!important;
  color:#d23f36!important;
}
.action-delete:hover{
  background:#d6453d!important;
  border-color:#d6453d!important;
  color:#fff!important;
}
[data-theme="dark"] .action-view{color:#f2f2ef!important;border-color:#5a5a58!important;background:#252525!important}
[data-theme="dark"] .action-view:hover{background:#f2f2ef!important;color:#1A1A1A!important;border-color:#f2f2ef!important}
[data-theme="dark"] .action-edit{background:#342817!important;border-color:#7e5b24!important;color:#f0b759!important}
[data-theme="dark"] .action-delete{background:#351d1b!important;border-color:#7f3934!important;color:#f28b83!important}

@media(max-width:760px){
  .employee-card{min-height:260px!important}
}


/* ===== Files actions + Roles & access ================================= */
.action-download{background:color-mix(in srgb,#2c8c62 12%,var(--paper-raised))!important;border-color:color-mix(in srgb,#2c8c62 40%,var(--line))!important;color:#257451!important}.action-download:hover{background:#2c8c62!important;border-color:#2c8c62!important;color:#fff!important}.action-create{background:#1A1A1A!important;border-color:#1A1A1A!important;color:#fff!important}.employee-login-switch{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:12px}.employee-login-switch span{display:flex;flex-direction:column;gap:3px}.employee-login-switch small{color:var(--ink-500);font-size:11px}.employee-access-chip{display:flex;align-items:center;gap:7px;width:max-content;max-width:100%;padding:7px 9px;border-radius:9px;background:var(--paper-sunken);font-size:11px}.employee-access-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.employee-access-chip small{color:var(--red-600)}.employee-admin-note{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--paper-raised)}.employee-admin-note>i{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#1A1A1A;color:#fff}.employee-admin-note>div{flex:1}.employee-admin-note strong,.employee-admin-note span{display:block}.employee-admin-note span{font-size:11px;color:var(--ink-500);margin-top:2px}.roles-workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}.roles-list-panel,.roles-editor-panel{background:var(--paper-raised);border:1px solid var(--line);border-radius:16px;overflow:hidden}.roles-list-head{display:flex;align-items:center;justify-content:space-between;padding:15px;border-bottom:1px solid var(--line)}.roles-list-head strong,.roles-list-head small{display:block}.roles-list-head small{font-size:10px;color:var(--ink-500);margin-top:2px}.roles-list{display:flex;flex-direction:column;padding:7px}.role-list-item{display:flex;align-items:center;gap:10px;padding:12px;text-align:left;border-radius:10px}.role-list-item>span{flex:1;min-width:0}.role-list-item strong,.role-list-item small{display:block}.role-list-item small{font-size:10px;color:var(--ink-500);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.role-list-item.is-active{background:var(--paper-sunken)}.role-list-item.is-active strong{color:#1A1A1A}.roles-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--line)}.roles-editor-head h2{font-size:22px;margin:4px 0}.roles-editor-head p{font-size:12px;color:var(--ink-500)}.roles-editor-actions{display:flex;gap:8px}.admin-access-banner{display:flex;align-items:center;gap:14px;margin:20px;padding:18px;border-radius:14px;background:var(--paper-sunken)}.admin-access-banner>i{font-size:24px}.admin-access-banner strong,.admin-access-banner span{display:block}.admin-access-banner span{margin-top:4px;color:var(--ink-500);font-size:12px}.permission-matrix{padding:14px 20px 22px}.permission-row{display:grid;grid-template-columns:minmax(150px,1.2fr) repeat(5,minmax(70px,.7fr));align-items:center;gap:8px;min-height:48px;border-bottom:1px solid var(--line)}.permission-row>strong{font-size:12px}.permission-row>span{text-align:center;font-size:10px;color:var(--ink-500)}.permission-row label{display:grid;place-items:center}.permission-row input{width:17px;height:17px;accent-color:#1A1A1A}.permission-head{position:sticky;top:0;background:var(--paper-raised);z-index:1}.permission-special{grid-template-columns:minmax(150px,1.2fr) 1fr;border-bottom:0;padding-top:10px}.permission-wide{display:flex!important;justify-content:flex-start!important;gap:9px;font-size:12px}.access-denied i{font-size:32px;margin-bottom:12px}.access-denied h2{margin-bottom:6px}.access-denied .button{margin-top:16px}@media(max-width:900px){.roles-workspace{grid-template-columns:1fr}.roles-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.permission-matrix{overflow:auto}.permission-row{min-width:720px}}@media(max-width:600px){.roles-list{grid-template-columns:1fr}.roles-editor-head{flex-direction:column}.roles-editor-actions{width:100%}.roles-editor-actions .button{flex:1}.employee-admin-note{align-items:flex-start;flex-wrap:wrap}.employee-admin-note .button{width:100%}}


/* ===== First owner onboarding — uses existing app visual language ===== */
.onboarding-panel{border-style:dashed}.onboarding-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.onboarding-steps>div{display:flex;align-items:flex-start;gap:11px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--paper-sunken)}.onboarding-steps>div>i{width:20px;margin-top:2px;color:var(--ink-500)}.onboarding-steps span{min-width:0}.onboarding-steps strong,.onboarding-steps small{display:block}.onboarding-steps small{margin-top:3px;color:var(--ink-500);font-size:11px;line-height:1.45}.onboarding-steps .is-done{border-color:color-mix(in srgb,var(--green-600) 32%,var(--line));background:color-mix(in srgb,var(--green-100) 35%,var(--paper-raised))}.onboarding-steps .is-done>i{color:var(--green-600)}.owner-activation-wrap{margin-bottom:12px}.owner-activation-wrap .field{margin-bottom:5px}@media(max-width:760px){.onboarding-steps{grid-template-columns:1fr}}


/* ===== First CEO registration mode — same LSTUDIO style ============== */
.first-register-wrap{display:flex;flex-direction:column;gap:7px;padding:14px 15px;margin-bottom:12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--paper-sunken)}
.first-register-wrap[hidden]{display:none!important}.first-register-badge{display:inline-flex;align-items:center;gap:7px;width:max-content;font:500 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.first-register-wrap>strong{font-size:15px;color:var(--ink-900)}.first-register-wrap>p{font-size:12px;line-height:1.5;color:var(--ink-500);margin:0}
.first-registration-mode #googleFallback{background:#1A1A1A;border-color:#1A1A1A;color:#fff}


/* ===== First-use CEO onboarding ======================================= */
.first-use-shell{max-width:1180px;margin:0 auto;padding-bottom:36px}
.first-use-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:4px 0 6px}.first-use-hero h1{font-size:clamp(26px,3vw,38px);margin:5px 0 7px}.first-use-hero p{max-width:680px;color:var(--ink-500);line-height:1.55}
.first-use-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.first-use-step{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:82px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper-raised)}.first-use-step>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-strong);font:600 11px var(--font-mono)}.first-use-step strong,.first-use-step small{display:block}.first-use-step small{margin-top:3px;font-size:11px;color:var(--ink-500);line-height:1.35}.first-use-step>i{color:var(--ink-400)}.first-use-step.is-current{border-color:#1A1A1A;box-shadow:0 0 0 2px rgba(26,26,26,.06)}.first-use-step.is-current>span{background:#1A1A1A;color:#fff;border-color:#1A1A1A}.first-use-step.is-done{border-color:color-mix(in srgb,var(--green-600) 28%,var(--line));background:color-mix(in srgb,var(--green-100) 28%,var(--paper-raised))}.first-use-step.is-done>span{background:var(--green-600);border-color:var(--green-600);color:#fff}.first-use-step.is-done>i{color:var(--green-600)}
.first-use-grid{display:grid;grid-template-columns:minmax(280px,.62fr) minmax(540px,1.38fr);gap:16px;align-items:start}.first-use-user{display:flex;gap:14px;align-items:flex-start}.first-use-user .avatar{width:52px;height:52px;flex:0 0 52px}.first-use-user strong,.first-use-user small{display:block}.first-use-user small{margin-top:3px;color:var(--ink-500)}.first-use-user p{margin-top:14px;font-size:12px;line-height:1.55;color:var(--ink-500)}
.first-use-drive-card.is-locked{opacity:.58}.first-use-drive-content{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:15px;align-items:center}.first-use-drive-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:13px;background:var(--paper-sunken);border:1px solid var(--line);font-size:22px}.first-use-drive-content p{margin-top:5px;color:var(--ink-500);font-size:12px;line-height:1.5}.first-use-drive-content .is-disabled{pointer-events:none;opacity:.45}
.first-use-finish{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--green-600) 32%,var(--line));border-radius:15px;background:color-mix(in srgb,var(--green-100) 32%,var(--paper-raised))}.first-use-finish>i{font-size:28px;color:var(--green-600)}.first-use-finish strong,.first-use-finish span{display:block}.first-use-finish span{margin-top:3px;font-size:12px;color:var(--ink-500)}
body.first-use-page .sidebar,body.first-use-page .topbar{display:none!important}body.first-use-page .app-shell{grid-template-columns:1fr!important}body.first-use-page .workspace{min-width:0}body.first-use-page .route-view{padding-top:34px}
@media(max-width:900px){.first-use-grid{grid-template-columns:1fr}.first-use-steps{grid-template-columns:1fr}.first-use-drive-content{grid-template-columns:48px 1fr}.first-use-drive-content>.button{grid-column:1/-1;width:100%;justify-content:center}.first-use-finish{grid-template-columns:36px 1fr}.first-use-finish>.button{grid-column:1/-1;width:100%;justify-content:center}}
@media(max-width:620px){body.first-use-page .route-view{padding:18px 14px}.first-use-hero{flex-direction:column}.first-use-cabinet-card .form-grid-2{grid-template-columns:1fr}.first-use-step{min-height:72px}}



/* ===== First registration form — preserved original login style ===== */
.first-registration-form{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.first-registration-section{display:flex;flex-direction:column;gap:8px}
.first-registration-section-title{font:600 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.first-registration-grid{display:grid;grid-template-columns:1fr;gap:8px}
.first-registration-grid label{display:flex;flex-direction:column;gap:5px;min-width:0}
.first-registration-grid label>span{font-size:10px;color:var(--ink-500)}
.first-registration-grid input{width:100%;min-width:0;height:40px;border:1px solid var(--line);border-radius:9px;background:var(--paper-raised);color:var(--ink-900);padding:0 10px;font:400 12px var(--font-sans);outline:none}
.first-registration-grid input:focus{border-color:#1A1A1A;box-shadow:0 0 0 2px rgba(26,26,26,.07)}
.first-register-wrap{max-height:56svh;overflow:auto;scrollbar-width:thin}
.first-registration-google{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.first-registration-google[hidden],.standard-google-login[hidden]{display:none!important}
.first-registration-google-head{display:flex;align-items:center;gap:10px}
.first-registration-google-head>i{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--paper-raised)}
.first-registration-google-head strong,.first-registration-google-head small{display:block}
.first-registration-google-head small{margin-top:2px;font-size:10px;line-height:1.4;color:var(--ink-500)}
.standard-google-login{display:flex;flex-direction:column;gap:10px}
.first-use-steps-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.first-use-drive-only{max-width:920px}
@media(max-width:620px){.first-register-wrap{max-height:none}.first-use-steps-two{grid-template-columns:1fr}}

/* ===== 2026-08-13 — First registration inside ORIGINAL login layout =====
   Keep the existing LSTUDIO login composition. The CEO form is content,
   not a second card/panel. Demo remains an independent login action. */
body.first-registration-mode .login-panel{
  align-items:flex-start;
  overflow:visible;
  padding-top:clamp(34px,5vh,64px);
  padding-bottom:40px;
}
body.first-registration-mode .login-content{
  max-width:380px;
}
body.first-registration-mode .login-brand{
  margin-bottom:var(--space-7);
}
body.first-registration-mode .login-copy h1{
  font-size:var(--text-2xl);
}
body.first-registration-mode .login-copy p{
  margin-bottom:var(--space-5);
}
body.first-registration-mode .login-actions{
  min-height:0;
  gap:var(--space-3);
}
body.first-registration-mode .first-register-wrap{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:none;
  overflow:visible;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
body.first-registration-mode .first-register-wrap>strong{
  font-size:14px;
  margin-top:1px;
}
body.first-registration-mode .first-register-wrap>p{
  font-size:11px;
  line-height:1.45;
  margin:0 0 2px;
}
body.first-registration-mode .first-registration-form{
  gap:14px;
  margin-top:0;
}
body.first-registration-mode .first-registration-section{
  gap:8px;
}
body.first-registration-mode .first-registration-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 10px;
}
body.first-registration-mode .first-registration-grid .is-wide{
  grid-column:1/-1;
}
body.first-registration-mode .first-registration-grid input{
  height:38px;
  border-radius:8px;
  background:var(--paper);
}
body.first-registration-mode .first-registration-form>.button{
  width:100%;
  justify-content:center;
  margin-top:2px;
}
body.first-registration-mode .first-registration-google{
  padding-top:12px;
}
body.first-registration-mode #demoLogin{
  display:inline-flex!important;
  align-self:center;
  margin-top:5px;
}
body.first-registration-mode #loginStatus{
  text-align:center;
  font-size:10px;
  margin-top:-4px;
}
body.first-registration-mode .demo-login-account{
  margin-top:16px;
}
body.first-registration-mode .login-footer{
  margin-top:var(--space-6);
}
@media(max-width:900px){
  body.first-registration-mode .login-panel{padding-top:54px}
}
@media(max-width:520px){
  body.first-registration-mode .first-registration-grid{grid-template-columns:1fr}
  body.first-registration-mode .first-registration-grid .is-wide{grid-column:auto}
}


/* ===== 2026-08-13 — First registration spacing + stepper ============== */
body.first-registration-mode .login-panel{
  padding:34px clamp(34px,4vw,64px) 38px;
}
body.first-registration-mode .login-content{
  max-width:560px;
}
body.first-registration-mode .login-brand{
  margin-bottom:22px;
}
body.first-registration-mode .login-copy h1{
  font-size:clamp(34px,3vw,43px);
  line-height:1.03;
  margin-bottom:12px;
}
body.first-registration-mode .login-copy p{
  max-width:500px;
  margin-bottom:16px;
  line-height:1.45;
}
body.first-registration-mode .login-actions{
  gap:12px;
}
body.first-registration-mode .first-register-wrap{
  gap:10px;
}
.first-registration-stepper{
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);
  align-items:center;
  gap:8px;
  margin:0 0 4px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb,var(--paper-raised) 70%,transparent);
}
.first-registration-step{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:9px;
  min-width:0;
  color:var(--ink-400);
}
.first-registration-step>span{
  width:30px;height:30px;
  display:grid;place-items:center;
  border:1px solid var(--line-strong);
  border-radius:50%;
  font:700 10px var(--font-mono);
  background:var(--paper);
}
.first-registration-step strong,
.first-registration-step small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.first-registration-step strong{font-size:11px;color:var(--ink-500)}
.first-registration-step small{font-size:9px;margin-top:2px;color:var(--ink-400)}
.first-registration-step.is-current{color:var(--ink-900)}
.first-registration-step.is-current>span{background:#1A1A1A;border-color:#1A1A1A;color:#fff}
.first-registration-step.is-current strong{color:var(--ink-900)}
.first-registration-step-line{height:1px;background:var(--line-strong);position:relative}
.first-registration-step-line:after{content:"";position:absolute;right:-1px;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--line-strong)}
body.first-registration-mode .first-register-badge{margin-top:2px}
body.first-registration-mode .first-register-wrap>strong{font-size:15px}
body.first-registration-mode .first-register-wrap>p{max-width:520px}
body.first-registration-mode .first-registration-form{gap:12px}
body.first-registration-mode .first-registration-section{gap:7px}
body.first-registration-mode .first-registration-grid{gap:8px 12px}
body.first-registration-mode .first-registration-grid input{height:39px;background:var(--paper-raised)}
body.first-registration-mode #demoLogin{
  order:-1;
  align-self:flex-start;
  margin:0 0 2px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper-raised);
  font-size:11px;
}
body.first-registration-mode #demoLogin:hover{border-color:var(--line-strong);background:var(--paper-sunken)}
body.first-registration-mode #loginStatus{margin-top:0}
body.first-registration-mode .demo-login-account{margin-top:12px}
body.first-registration-mode .login-footer{margin-top:20px}
@media(max-width:1100px){
  body.first-registration-mode .login-content{max-width:500px}
}
@media(max-width:900px){
  body.first-registration-mode .login-content{max-width:560px}
  body.first-registration-mode .login-panel{padding:42px 28px}
}
@media(max-width:620px){
  body.first-registration-mode .login-panel{padding:28px 18px}
  .first-registration-stepper{grid-template-columns:1fr;gap:9px}
  .first-registration-step-line{display:none}
  .first-registration-step small{white-space:normal}
  body.first-registration-mode .login-copy h1{font-size:34px}
}

/* ===== 2026-08-13 — Multi-step first registration ==================== */
body.first-registration-mode .first-register-wrap{max-width:100%}
.first-registration-stepper-multi{
  grid-template-columns:repeat(9,auto);
  gap:6px;
  padding:10px 12px;
}
.first-registration-stepper-multi .first-registration-step{
  appearance:none;border:0;background:transparent;padding:0;margin:0;
  grid-template-columns:26px auto;gap:6px;cursor:pointer;text-align:left;
  font:inherit;min-width:0;
}
.first-registration-stepper-multi .first-registration-step>span{width:26px;height:26px;font-size:9px}
.first-registration-stepper-multi .first-registration-step strong{font-size:9px;letter-spacing:.045em;text-transform:uppercase}
.first-registration-stepper-multi .first-registration-step-line{width:18px}
.first-registration-stepper-multi .first-registration-step.is-done>span{background:#1A1A1A;border-color:#1A1A1A;color:#fff}
.first-registration-stepper-multi .first-registration-step.is-done strong{color:var(--ink-700)}
.first-registration-stepper-multi .first-registration-step:disabled{cursor:default;opacity:.5}
.first-registration-pane{display:none;animation:firstRegPaneIn .18s ease}
.first-registration-pane.is-active{display:block}
.first-registration-section-headline{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.first-registration-section-headline small{font-size:10px;line-height:1.4;color:var(--ink-500)}
.first-registration-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.first-registration-nav-end{justify-content:flex-end}
.first-registration-nav .button{min-height:38px}
body.first-registration-mode .first-registration-form{min-height:220px}
body.first-registration-mode .first-registration-google{margin-top:8px}
@keyframes firstRegPaneIn{from{opacity:0;transform:translateX(5px)}to{opacity:1;transform:none}}
@media(max-width:620px){
 .first-registration-stepper-multi{grid-template-columns:repeat(5,1fr);gap:5px}
 .first-registration-stepper-multi .first-registration-step-line{display:none}
 .first-registration-stepper-multi .first-registration-step{grid-template-columns:1fr;justify-items:center;text-align:center;gap:4px}
 .first-registration-stepper-multi .first-registration-step strong{font-size:8px}
 .first-registration-nav{align-items:stretch}.first-registration-nav .button{flex:1}
}


/* ===== 2026-08-13 — Smooth first-registration interactions =========== */
body.first-registration-mode .first-register-wrap{
  --first-reg-ease:cubic-bezier(.22,.61,.36,1);
}
.first-registration-stepper-multi{
  transition:border-color .22s ease,background-color .22s ease,box-shadow .22s ease;
}
.first-registration-stepper-multi .first-registration-step,
.first-registration-stepper-multi .first-registration-step>span,
.first-registration-stepper-multi .first-registration-step strong,
.first-registration-stepper-multi .first-registration-step-line,
.first-registration-stepper-multi .first-registration-step-line::after{
  transition:color .24s var(--first-reg-ease),background-color .24s var(--first-reg-ease),border-color .24s var(--first-reg-ease),opacity .24s var(--first-reg-ease),transform .24s var(--first-reg-ease),box-shadow .24s var(--first-reg-ease);
}
.first-registration-stepper-multi .first-registration-step:hover:not(:disabled)>span{
  transform:translateY(-1px);
  border-color:#1A1A1A;
}
.first-registration-stepper-multi .first-registration-step.is-current>span{
  transform:scale(1.04);
  box-shadow:0 4px 12px rgba(26,26,26,.12);
}
.first-registration-stepper-multi .first-registration-step.is-done>span{
  transform:scale(.96);
}
.first-registration-stepper-multi .first-registration-step-line{
  overflow:hidden;
}
.first-registration-stepper-multi .first-registration-step-line::before{
  content:"";
  position:absolute;
  inset:0;
  background:#1A1A1A;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .32s var(--first-reg-ease);
}
.first-registration-stepper-multi .first-registration-step-line.is-done::before{
  transform:scaleX(1);
}
.first-registration-form{
  position:relative;
  transition:min-height .28s var(--first-reg-ease);
}
.first-registration-pane{
  display:none;
  opacity:0;
  transform:translateX(14px);
  will-change:opacity,transform;
}
.first-registration-pane.is-active{
  display:block;
  animation:firstRegSlideForward .28s var(--first-reg-ease) both;
}
.first-registration-form.is-backward .first-registration-pane.is-active{
  animation-name:firstRegSlideBackward;
}
@keyframes firstRegSlideForward{
  from{opacity:0;transform:translateX(14px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes firstRegSlideBackward{
  from{opacity:0;transform:translateX(-14px)}
  to{opacity:1;transform:translateX(0)}
}
body.first-registration-mode .first-registration-grid input{
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,transform .18s ease;
}
body.first-registration-mode .first-registration-grid input:focus{
  transform:translateY(-1px);
}
body.first-registration-mode .first-registration-grid input.is-invalid{
  border-color:#b42318;
  box-shadow:0 0 0 3px rgba(180,35,24,.08);
  animation:firstRegInvalid .28s ease;
}
@keyframes firstRegInvalid{
  0%,100%{transform:translateX(0)}
  35%{transform:translateX(-3px)}
  70%{transform:translateX(3px)}
}
.first-registration-nav .button{
  transition:transform .18s var(--first-reg-ease),box-shadow .18s ease,background-color .18s ease,border-color .18s ease;
}
.first-registration-nav .button:hover{transform:translateY(-1px)}
.first-registration-nav .button:active{transform:translateY(0) scale(.985)}
.first-registration-nav .button i{
  transition:transform .2s var(--first-reg-ease);
}
.first-registration-nav .button[data-register-next]:hover i,
.first-registration-nav .button[type="submit"]:hover i{transform:translateX(2px)}
.first-registration-nav .button[data-register-prev]:hover i{transform:translateX(-2px)}
#firstRegistrationIntro,#loginStatus{
  transition:opacity .18s ease,color .18s ease;
}
.first-registration-google{
  animation:firstRegGoogleIn .32s var(--first-reg-ease) both;
}
@keyframes firstRegGoogleIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .first-registration-stepper-multi *,
  .first-registration-pane.is-active,
  .first-registration-form.is-backward .first-registration-pane.is-active,
  .first-registration-google,
  body.first-registration-mode .first-registration-grid input.is-invalid{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
}

/* Local account authentication — keeps the existing login visual language. */
.login-password-form{display:grid;gap:12px;margin-top:2px}.login-password-form label{display:grid;gap:6px}.login-password-form label>span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.72}.login-password-form input{width:100%}.login-password-field{position:relative;display:block!important;opacity:1!important;letter-spacing:normal!important;text-transform:none!important}.login-password-field input{padding-right:46px!important}.login-password-toggle{position:absolute;top:50%;right:7px;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--ink-500);cursor:pointer;transition:background .16s ease,color .16s ease}.login-password-toggle:hover{background:var(--paper-sunken);color:var(--ink-900)}.login-password-toggle:focus-visible{outline:2px solid var(--ink-700);outline-offset:1px}.login-password-toggle i{font-size:14px}.login-remember{display:flex!important;align-items:center;gap:9px!important;width:max-content;max-width:100%;cursor:pointer;user-select:none}.login-remember input{width:16px!important;height:16px!important;margin:0;accent-color:var(--ink-900);cursor:pointer}.login-remember>span{font-size:11px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;opacity:.82!important}.legal-field-hint{display:block;margin-top:4px;font-size:10px;opacity:.62}.first-use-google-account{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12px;opacity:.78}
.first-use-five-stepper{margin:0 0 8px}.first-use-five-stepper .first-registration-step{cursor:default}.first-use-five-stepper span.first-registration-step{appearance:none}

/* ===== 2026-08-13 — First registration theme toggle visibility ===== */
body.first-registration-mode #loginThemeToggle{
  position:absolute;
  top:20px;
  right:20px;
  z-index:1200;
  margin:0;
}
@media(max-width:900px){
  body.first-registration-mode #loginThemeToggle{top:14px;right:14px}
}


/* ===== Sidebar open / close control ===================================== */
.sidebar-close{
  align-items:center;
  justify-content:center;
  color:var(--ink-700);
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.sidebar-close .desktop-expand-icon{display:none}
.sidebar-close .mobile-close-icon{display:none}
@media (min-width:1101px){
  .sidebar-close{display:inline-flex!important}
  html[data-sidebar="collapsed"] .sidebar-close .desktop-collapse-icon{display:none}
  html[data-sidebar="collapsed"] .sidebar-close .desktop-expand-icon{display:inline}
}
@media (min-width:721px) and (max-width:1100px){
  .sidebar-close{display:none!important}
}
@media (max-width:720px){
  .sidebar-close{
    display:inline-flex!important;
    position:absolute;
    top:14px;
    right:14px;
    width:38px;
    height:38px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--paper-raised);
    z-index:20;
  }
  .sidebar-close .desktop-collapse-icon,.sidebar-close .desktop-expand-icon{display:none!important}
  .sidebar-close .mobile-close-icon{display:inline}
}

/* ===== 2026-08-14 — Global panel / border-radius clipping fix ===========
   Prevent empty/dashed states from sitting directly on a rounded panel
   border. This keeps the panel radius clean on Contacts, Dashboard,
   Projects, Finance, Tasks, Documents and every other panel-list view. */
#routeView .panel{
  background-clip:padding-box;
  isolation:isolate;
}

/* A bordered empty state must be inset from the panel border. Without this
   spacing its own rounded dashed border overlaps the panel's left/right
   edge and visually breaks the parent's border-radius. */
#routeView .panel > .panel-list > .empty-box,
#routeView .panel > .project-files-list > .empty-box{
  width:auto;
  margin:16px 18px;
  box-sizing:border-box;
}

/* Keep nested empty states consistently rounded and clipped inside all
   application surfaces. */
#routeView .empty-box{
  background-clip:padding-box;
  overflow:hidden;
}

/* Make the first/last panel sections respect the panel's rounded corners
   even when their background changes on hover or in an empty state. */
#routeView .panel > .panel-head:first-child{
  border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
#routeView .panel > .panel-list:last-child,
#routeView .panel > .project-files-list:last-child{
  border-radius:0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
}

@media(max-width:760px){
  #routeView .panel > .panel-list > .empty-box,
  #routeView .panel > .project-files-list > .empty-box{
    margin:12px;
  }
}

/* ==========================================================================\n   Security authentication flow — 2026-08 hardening\n   ========================================================================== */
.security-owner-claim{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper-sunken)}
.security-hint{display:block;margin-top:5px;color:var(--ink-500);font-size:9px;line-height:1.45}
.security-hint code{font-family:'JetBrains Mono',monospace;font-size:9px}
.security-login-card{margin-top:12px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--paper-raised);box-shadow:0 8px 28px rgba(20,20,20,.05)}
.security-login-card[hidden]{display:none!important}
.security-login-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:var(--paper-sunken);margin-bottom:10px}
.security-login-copy{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.security-login-copy strong{font-size:13px;color:var(--ink-900)}
.security-login-copy small,.security-mfa-instruction{font-size:10px;line-height:1.5;color:var(--ink-500)}
.security-login-form{display:grid;gap:10px}
.security-login-form label{display:flex;flex-direction:column;gap:6px}
.security-login-form label>span{font-size:10px;font-weight:600;color:var(--ink-700)}
.security-login-form input{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink-900);padding:0 12px;outline:none}
.security-login-form input:focus{border-color:var(--ink-700);box-shadow:0 0 0 3px rgba(90,90,90,.08)}
.security-mfa-qr{display:flex;align-items:center;justify-content:center;width:190px;min-height:190px;margin:12px auto;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.security-mfa-qr img,.security-mfa-qr canvas{max-width:100%;height:auto!important}
.security-secret-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px 10px;margin:10px 0;border:1px dashed var(--line-strong);border-radius:10px;background:var(--paper-sunken)}
.security-secret-row span{font-size:9px;color:var(--ink-500)}
.security-secret-row code{max-width:72%;overflow-wrap:anywhere;text-align:right;font:500 9px/1.5 'JetBrains Mono',monospace;color:var(--ink-800);user-select:all}
.security-recovery{padding-top:4px}
.security-recovery>strong{font-size:12px;color:var(--ink-900)}
.security-recovery>p{font-size:10px;line-height:1.5;color:var(--ink-500)}
.security-recovery pre{max-height:205px;overflow:auto;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper-sunken);font:600 12px/1.9 'JetBrains Mono',monospace;letter-spacing:.04em;user-select:all}
.security-recovery .button{margin-top:8px;margin-right:6px}
@media(max-width:560px){.security-login-card{padding:14px}.security-mfa-qr{width:170px;min-height:170px}.security-secret-row{flex-direction:column}.security-secret-row code{max-width:100%;text-align:left}}

.account-security-panel{overflow:hidden}
.account-security-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.account-security-summary>div{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--paper-sunken)}
.account-security-summary>div>span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.account-security-summary strong{font-size:11px;color:var(--ink-900)}
.account-security-summary small{font-size:9px;line-height:1.45;color:var(--ink-500)}
.security-state-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:11px;border:1px solid var(--line);background:var(--paper)}
.security-state-icon.is-secure{color:#237a4b}.security-state-icon.is-warning{color:#a36a17}
.security-account-actions{flex-wrap:wrap}.security-account-note{margin-top:12px;font-size:9px}
.security-recovery-modal pre{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--paper-sunken);font:600 12px/1.9 'JetBrains Mono',monospace;letter-spacing:.04em;user-select:all;white-space:pre-wrap}
.profile-mfa-setup>p{font-size:10px;line-height:1.55;color:var(--ink-500)}
@media(max-width:620px){.account-security-summary{grid-template-columns:1fr}}


/* ===== RH / employee account dialogs — polished 2026 UI ===== */
.modal.employee-editor-modal{width:min(780px,calc(100vw - 32px));border-radius:24px;overflow:hidden}
.modal.employee-success-modal{width:min(620px,calc(100vw - 32px));border-radius:24px;overflow:hidden}
.modal.employee-delete-modal{width:min(560px,calc(100vw - 32px));border-radius:24px;overflow:hidden}
.employee-editor-modal .modal-header,.employee-success-modal .modal-header,.employee-delete-modal .modal-header{padding:22px 24px;background:var(--paper-raised)}
.employee-editor-modal .modal-header h2,.employee-success-modal .modal-header h2,.employee-delete-modal .modal-header h2{font-size:20px;letter-spacing:-.02em}
.employee-editor-modal .modal-body,.employee-success-modal .modal-body,.employee-delete-modal .modal-body{padding:24px}
.employee-editor-modal .modal-footer,.employee-success-modal .modal-footer,.employee-delete-modal .modal-footer{padding:16px 24px;background:var(--paper-raised)}
.modal-close-button{width:40px;height:40px;border-radius:12px}
.employee-editor-modal .field input,.employee-editor-modal .field select{min-height:46px;border-radius:12px;background:var(--paper-raised);padding:11px 13px}
.employee-editor-modal .field label{font-size:11px;text-transform:uppercase;letter-spacing:.055em;color:var(--ink-500);margin-bottom:7px}
.employee-form-intro{display:flex;align-items:center;gap:14px;padding:15px 16px;margin-bottom:20px;border:1px solid var(--line);border-radius:16px;background:var(--paper-sunken)}
.employee-form-intro-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:#1a1a1a;color:#fff}
.employee-form-intro strong{display:block;font-size:14px}.employee-form-intro p{margin:3px 0 0;color:var(--ink-500);font-size:12px;line-height:1.45}
.employee-form-section{padding:18px 0;border-top:1px solid var(--line)}.employee-form-section:first-of-type{border-top:0;padding-top:0}
.employee-form-section-title{display:flex;align-items:center;gap:10px;margin-bottom:14px}.employee-form-section-title>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#1a1a1a;color:#fff;font:700 10px var(--font-mono)}
.employee-form-section-title strong,.employee-form-section-title small{display:block}.employee-form-section-title strong{font-size:14px}.employee-form-section-title small{margin-top:2px;color:var(--ink-500);font-size:11px}
.employee-editor-modal .employee-login-switch{margin-top:14px;padding:14px 15px;border-radius:14px;background:var(--paper-sunken)}
.employee-editor-modal .employee-login-switch input{width:19px;height:19px;accent-color:#1a1a1a}
.employee-success{text-align:left}.employee-success-icon{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 16px;border-radius:18px;background:#1a1a1a;color:#fff;font-size:22px}
.employee-success-copy{text-align:center}.employee-success-copy>span{font:700 10px var(--font-mono);letter-spacing:.15em;color:var(--ink-500)}.employee-success-copy h3{font-size:25px;margin:6px 0 5px;letter-spacing:-.03em}.employee-success-copy p{margin:0;color:var(--ink-500);font-size:13px}
.employee-credentials{display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px}.employee-credentials>div{padding:14px 15px;border:1px solid var(--line);border-radius:14px;background:var(--paper-sunken)}.employee-credentials small,.employee-credentials strong{display:block}.employee-credentials small{margin-bottom:5px;color:var(--ink-500);font-size:10px;text-transform:uppercase;letter-spacing:.07em}.employee-credentials strong{font-size:14px;overflow-wrap:anywhere}
.employee-success-note{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:13px 14px;border-radius:13px;background:color-mix(in srgb,#2c8c62 8%,var(--paper-raised));border:1px solid color-mix(in srgb,#2c8c62 24%,var(--line));color:var(--ink-700)}.employee-success-note i{color:#257451;margin-top:2px}.employee-success-note p{margin:0;font-size:12px;line-height:1.55}
.employee-success-modal .modal-footer .button{min-width:120px}
.employee-delete-warning{display:flex;align-items:center;gap:14px}.employee-delete-icon{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border-radius:14px;background:color-mix(in srgb,var(--red-600) 10%,var(--paper-raised));color:var(--red-600);font-size:18px}.employee-delete-warning h3{font-size:18px;margin:0}.employee-delete-warning p{font-size:12px;color:var(--ink-500);line-height:1.5;margin:4px 0 0}
.employee-delete-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.employee-delete-facts>div{padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:var(--paper-sunken);min-width:0}.employee-delete-facts small,.employee-delete-facts strong{display:block}.employee-delete-facts small{font-size:10px;color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em}.employee-delete-facts strong{margin-top:4px;font-size:12px;overflow-wrap:anywhere}
.employee-delete-note{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:12px 13px;border-radius:12px;background:var(--paper-sunken);color:var(--ink-500);font-size:11px;line-height:1.5}
.employee-delete-modal .modal-footer .button-primary{background:var(--red-600);border-color:var(--red-600);color:#fff}
.employee-delete-modal .modal-footer .button-primary:hover{filter:brightness(.94)}
@media(max-width:620px){.employee-editor-modal .modal-body,.employee-success-modal .modal-body,.employee-delete-modal .modal-body{padding:18px}.employee-editor-modal .modal-header,.employee-success-modal .modal-header,.employee-delete-modal .modal-header{padding:17px 18px}.employee-editor-modal .modal-footer,.employee-success-modal .modal-footer,.employee-delete-modal .modal-footer{padding:14px 18px}.employee-delete-facts{grid-template-columns:1fr}.employee-editor-modal .form-grid-2{grid-template-columns:1fr}}


/* CEO employee login ON/OFF control */
.employee-card{position:relative}
.employee-login-card-toggle{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 11px;border:1px solid var(--line);border-radius:13px;background:var(--paper-sunken);cursor:pointer;user-select:none;transition:border-color .18s ease,background .18s ease,opacity .18s ease}
.employee-login-card-toggle:hover{border-color:color-mix(in srgb,var(--ink-900) 24%,var(--line))}
.employee-login-card-copy{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.employee-login-card-copy>i{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:var(--paper-raised);border:1px solid var(--line);font-size:11px}
.employee-login-card-copy>span{min-width:0}.employee-login-card-copy strong,.employee-login-card-copy small{display:block}.employee-login-card-copy strong{font-size:11px}.employee-login-card-copy small{margin-top:2px;color:var(--ink-500);font-size:10px}
.employee-login-toggle-status{font:800 9px var(--font-mono);letter-spacing:.08em;color:var(--ink-500);min-width:24px;text-align:right}
.employee-login-toggle-input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.employee-login-toggle-track{position:relative;width:40px;height:22px;flex:0 0 auto;border-radius:999px;background:color-mix(in srgb,var(--ink-500) 28%,var(--paper-raised));border:1px solid var(--line);transition:background .18s ease,border-color .18s ease}
.employee-login-toggle-track>span{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .18s ease}
.employee-login-toggle-input:checked + .employee-login-toggle-track{background:#2c8c62;border-color:#2c8c62}
.employee-login-toggle-input:checked + .employee-login-toggle-track>span{transform:translateX(18px)}
.employee-login-card-toggle.is-on .employee-login-toggle-status{color:#257451}
.employee-login-card-toggle.is-off{background:color-mix(in srgb,var(--red-600) 4%,var(--paper-sunken))}
.employee-login-card-toggle.is-off .employee-login-toggle-status{color:var(--red-600)}
.employee-login-card-toggle.is-loading{opacity:.62;cursor:progress;pointer-events:none}
.employee-login-disabled{opacity:.92}
@media(max-width:600px){.employee-login-card-toggle{padding:10px}.employee-login-card-copy strong{font-size:10px}}

/* ===== Invoice editor — open / close settings panel ==================== */
.invoice-panel-toggle-button{
  min-width:150px;
  justify-content:center;
  gap:8px;
}
.invoice-panel-toggle-button i{
  transition:transform .16s ease;
}
.invoice-editor-layout.is-panel-collapsed{
  grid-template-columns:minmax(0,1fr) 0 0 !important;
}
.invoice-editor-layout.is-panel-collapsed .invoice-panel-resizer,
.invoice-editor-layout.is-panel-collapsed .invoice-control-panel{
  display:none !important;
}
.invoice-editor-layout.is-panel-collapsed .invoice-preview-stage{
  width:100%;
}
@media(max-width:1050px){
  .invoice-editor-layout.is-panel-collapsed{grid-template-columns:1fr !important}
}
@media(max-width:700px){
  .invoice-panel-toggle-button{min-width:42px;width:42px;padding:0!important}
  .invoice-panel-toggle-button span{display:none}
}

/* ===== Login live cards — coherent dark treatment ====================== */
/* Keep the blueprint side visually dark in both themes. In dark mode,
   these cards must not invert to pale/white surfaces. */
.login-atmosphere .live-card,
[data-theme="dark"] .login-atmosphere .live-card{
  background:rgba(18,24,29,.90)!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(14px) saturate(112%);
}
.login-atmosphere .live-card small,
[data-theme="dark"] .login-atmosphere .live-card small{
  color:rgba(226,231,234,.58)!important;
}
.login-atmosphere .live-card strong,
[data-theme="dark"] .login-atmosphere .live-card strong{
  color:#F4F5F3!important;
}
.login-atmosphere .live-card span,
[data-theme="dark"] .login-atmosphere .live-card span{
  color:rgba(235,238,239,.78)!important;
}
.login-atmosphere .login-weather-city-switch,
[data-theme="dark"] .login-atmosphere .login-weather-city-switch{
  background:rgba(7,11,14,.54)!important;
  border-color:rgba(255,255,255,.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.login-atmosphere .login-weather-city-switch::before,
[data-theme="dark"] .login-atmosphere .login-weather-city-switch::before{
  background:rgba(73,88,99,.58)!important;
  box-shadow:0 2px 10px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.08)!important;
}
.login-atmosphere .login-weather-city-switch button,
[data-theme="dark"] .login-atmosphere .login-weather-city-switch button{
  color:rgba(228,232,234,.58)!important;
}
.login-atmosphere .login-weather-city-switch button:hover,
[data-theme="dark"] .login-atmosphere .login-weather-city-switch button:hover{
  color:rgba(246,247,247,.88)!important;
}
.login-atmosphere .login-weather-city-switch button[aria-pressed="true"],
[data-theme="dark"] .login-atmosphere .login-weather-city-switch button[aria-pressed="true"]{
  color:#FFFFFF!important;
}

/* Login recovery controls */
.login-auth-options{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.login-forgot-button{appearance:none;border:0;background:transparent;color:var(--ink-600);font:inherit;font-size:11px;font-weight:650;padding:4px 0;cursor:pointer;text-decoration:none;transition:color .16s ease,opacity .16s ease}
.login-forgot-button:hover{color:var(--ink-900)}
.login-forgot-button:focus-visible{outline:2px solid var(--ink-700);outline-offset:4px;border-radius:4px}
.security-login-form .security-hint{display:block;color:var(--ink-500);font-size:11px;line-height:1.55;margin-top:-2px}
@media(max-width:520px){.login-auth-options{align-items:flex-start}.login-forgot-button{margin-left:auto}}

/* ===== HR employee cards — premium compact redesign ===================== */
.employee-cards-grid{
  grid-template-columns:repeat(auto-fill,minmax(320px,390px));
  align-items:start;
  justify-content:start;
  gap:18px;
}
.employee-card-v2{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0!important;
  padding:0;
  overflow:hidden;
  background:var(--paper-raised);
  border:1px solid color-mix(in srgb,var(--line) 86%,transparent);
  border-radius:20px;
  box-shadow:0 10px 28px rgba(18,24,29,.045);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.employee-card-v2:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--ink-900) 18%,var(--line));
  box-shadow:0 16px 38px rgba(18,24,29,.075);
}
.employee-card-v2-head{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:start;
  gap:14px;
  padding:20px 20px 17px;
}
.employee-avatar{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(145deg,#1f2428,#101315);
  color:#fff;
  font:800 14px/1 var(--font-mono);
  letter-spacing:.08em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.employee-card-v2-identity{min-width:0;padding-top:1px}
.employee-profile-label{
  display:block;
  margin-bottom:4px;
  color:var(--ink-500);
  font:700 10px/1.2 var(--font-mono);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.employee-card-v2-identity h3{
  margin:0;
  font-size:19px;
  line-height:1.18;
  letter-spacing:-.025em;
  color:var(--ink-900);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.employee-card-v2-identity p{
  margin:6px 0 0!important;
  color:var(--ink-500);
  font-size:12px;
  line-height:1.35;
  min-height:0!important;
}
.employee-card-v2-status .badge{white-space:nowrap}
.employee-card-v2-role{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 20px;
  padding:12px 0 15px;
  border-top:1px solid var(--line);
}
.employee-role-icon,
.employee-contact-icon,
.employee-login-state-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.employee-role-icon{
  width:34px;
  height:34px;
  border-radius:11px;
  background:var(--paper-sunken);
  color:var(--ink-700);
  font-size:12px;
}
.employee-card-v2-role>span:last-child,
.employee-contact-row>span:last-child{min-width:0}
.employee-card-v2-role small,
.employee-card-v2-role strong,
.employee-contact-row small,
.employee-contact-row strong{display:block}
.employee-card-v2-role small,
.employee-contact-row small{
  color:var(--ink-500);
  font-size:9px;
  line-height:1.15;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.employee-card-v2-role strong{
  margin-top:3px;
  color:var(--ink-900);
  font-size:12px;
  font-weight:650;
}
.employee-contact-list-v2{
  display:grid;
  gap:4px;
  padding:0 20px 15px;
}
.employee-contact-row{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  padding:7px 0;
}
.employee-contact-icon{
  width:34px;
  height:34px;
  border-radius:11px;
  color:var(--ink-500);
  font-size:12px;
  background:transparent;
  border:1px solid var(--line);
}
.employee-contact-row strong{
  max-width:100%;
  margin-top:3px;
  color:var(--ink-900);
  font-size:12px;
  font-weight:550;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.employee-login-card-toggle-v2{
  margin:0 14px 14px;
  padding:12px 13px;
  border-radius:15px;
  background:color-mix(in srgb,var(--paper-sunken) 74%,var(--paper-raised));
  border-color:var(--line);
}
.employee-login-card-toggle-v2:hover{
  background:var(--paper-sunken);
  border-color:color-mix(in srgb,var(--ink-900) 18%,var(--line));
}
.employee-login-card-toggle-v2 .employee-login-card-copy{gap:10px}
.employee-login-state-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  color:var(--ink-700);
  font-size:12px;
}
.employee-login-card-toggle-v2.is-on .employee-login-state-icon{
  color:#257451;
  background:color-mix(in srgb,#2c8c62 8%,var(--paper-raised));
  border-color:color-mix(in srgb,#2c8c62 18%,var(--line));
}
.employee-login-card-toggle-v2.is-off .employee-login-state-icon{
  color:var(--red-600);
  background:color-mix(in srgb,var(--red-600) 7%,var(--paper-raised));
  border-color:color-mix(in srgb,var(--red-600) 18%,var(--line));
}
.employee-login-card-toggle-v2 .employee-login-card-copy strong{
  color:var(--ink-900);
  font-size:11px;
  font-weight:650;
}
.employee-login-card-toggle-v2 .employee-login-card-copy small{font-size:9px}
.employee-login-card-toggle-v2 .employee-login-toggle-status{
  min-width:auto;
  padding:4px 6px;
  border-radius:999px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  font-size:8px;
}
.employee-login-card-toggle-v2 .employee-login-toggle-track{
  width:38px;
  height:22px;
}
.employee-login-card-toggle-v2 .employee-login-toggle-track>span{
  width:16px;
  height:16px;
}
.employee-login-card-toggle-v2 .employee-login-toggle-input:checked + .employee-login-toggle-track>span{
  transform:translateX(16px);
}
.employee-card-v2-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 14px;
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--paper-sunken) 42%,var(--paper-raised));
}
.employee-action{
  appearance:none;
  border:0;
  cursor:pointer;
  font:650 11px/1 var(--font-sans);
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.employee-action-edit{
  width:auto!important;
  min-width:0!important;
  height:36px!important;
  padding:0 12px!important;
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  border-radius:11px!important;
  background:var(--paper-raised)!important;
  border:1px solid var(--line)!important;
  color:var(--ink-700)!important;
  flex:0 0 auto!important;
}
.employee-action-edit:hover{
  background:var(--ink-900)!important;
  border-color:var(--ink-900)!important;
  color:var(--paper-raised)!important;
  transform:translateY(-1px);
}
.employee-action-delete{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  margin-left:auto;
  border-radius:11px!important;
  background:transparent!important;
  border:1px solid transparent!important;
  color:var(--ink-500)!important;
  flex:0 0 36px!important;
}
.employee-action-delete:hover{
  background:color-mix(in srgb,var(--red-600) 8%,var(--paper-raised))!important;
  border-color:color-mix(in srgb,var(--red-600) 18%,var(--line))!important;
  color:var(--red-600)!important;
  transform:none;
}
.employee-login-disabled.employee-card-v2{opacity:1}
.employee-login-disabled.employee-card-v2 .employee-avatar{filter:saturate(.65);opacity:.86}

[data-theme="dark"] .employee-card-v2{
  box-shadow:0 14px 32px rgba(0,0,0,.16);
}
[data-theme="dark"] .employee-avatar{
  background:linear-gradient(145deg,#30363b,#141719);
}
[data-theme="dark"] .employee-action-edit:hover{
  color:#15181a!important;
  background:#f0f0ec!important;
  border-color:#f0f0ec!important;
}

@media(max-width:760px){
  .employee-cards-grid{grid-template-columns:1fr}
  .employee-card-v2{width:100%}
}
@media(max-width:420px){
  .employee-card-v2-head{grid-template-columns:46px minmax(0,1fr);padding:17px 16px 14px}
  .employee-avatar{width:46px;height:46px;border-radius:14px}
  .employee-card-v2-status{grid-column:2;margin-top:2px}
  .employee-card-v2-role{margin-inline:16px}
  .employee-contact-list-v2{padding-inline:16px}
  .employee-login-card-toggle-v2{margin-inline:10px}
}