/* ==========================================================================
   SunriseCloud Panel - one stylesheet
   1  Tokens            5  Auth (login / registration)
   2  Icons             6  App shell (sidebar, header, dropdowns)
   3  Base elements     7  Components carried over from earlier versions
   4  Components        8  Polish (status colours, motion, print)
   ========================================================================== */

/* ---------- 1  Tokens ---------- */
:root {
  color-scheme: light;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .14s;
  --t-med: .26s;

  --sidebar-w: 252px;
  --header-h: 60px;

  /* surfaces */
  --bg: #f4f6fa;
  --card: #fff;
  --surface-2: #f7f8fb;
  --surface-hover: #f0f2f7;
  --field: #fff;

  /* text */
  --ink: #141a26;
  --ink-2: #394358;
  --muted: #5c677b;
  --faint: #677185;

  /* lines */
  --line: #e2e6ee;
  --line-strong: #c9d0dc;
  --border: var(--line);

  /* accent: --accent is a fill (white text on it passes AA), --accent-ink is for text and icons */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-ink: #4338ca;
  --accent-soft: rgba(79, 70, 229, .1);
  --blue: var(--accent);
  --brand: #f4602f;

  /* status */
  --good: #12805c;
  --good-bg: #e5f6ee;
  --good-line: #b6e3cf;
  --warn: #8f5600;
  --warn-bg: #fdf1d9;
  --warn-line: #f1d79c;
  --danger: #c4283b;
  --danger-bg: #fdebed;
  --danger-line: #f3bcc3;
  --info: #1d5fb8;
  --info-bg: #e8f1fd;
  --info-line: #b9d4f6;

  /* depth */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .06);
  --shadow-lg: 0 2px 6px rgba(10, 14, 24, .08), 0 12px 30px rgba(10, 14, 24, .22);

  /* sidebar stays dark in both themes */
  --nav: #0d1118;
  --nav-ink: #d3d9e4;
  --nav-muted: #8791a4;
  --nav-line: #1b222e;
  --nav-hover: rgba(255, 255, 255, .06);
  --nav-active: rgba(255, 255, 255, .1);

  /* aliases used by older components */
  --card-2: var(--surface-2);
  --primary: var(--accent);
  --panel: var(--card);

  font: 15px/1.5 var(--font);
  color: var(--ink);
}

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

  --bg: #0b0f15;
  --card: #131821;
  --surface-2: #181e29;
  --surface-hover: #1c2330;
  --field: #0e131b;

  --ink: #edf0f6;
  --ink-2: #c8d0dd;
  --muted: #98a2b5;
  --faint: #8691a6;

  --line: #232b39;
  --line-strong: #323c4f;

  --accent: #5f59ee;
  --accent-hover: #6760f0;
  --accent-ink: #a9a5ff;
  --accent-soft: rgba(139, 134, 255, .15);
  --brand: #ff7348;

  --good: #4fd6a0;
  --good-bg: rgba(52, 211, 153, .12);
  --good-line: rgba(52, 211, 153, .3);
  --warn: #f3bf62;
  --warn-bg: rgba(245, 183, 70, .12);
  --warn-line: rgba(245, 183, 70, .3);
  --danger: #ff7d8c;
  --danger-bg: rgba(255, 99, 120, .12);
  --danger-line: rgba(255, 99, 120, .32);
  --info: #7fb6ff;
  --info-bg: rgba(96, 165, 250, .12);
  --info-line: rgba(96, 165, 250, .3);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .22);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 30px rgba(0, 0, 0, .5);

  --nav: #090c11;
  --nav-line: #171d28;
}

/* ==========================================================================
   ICONS - stroke icons as CSS masks (colour follows currentColor).
   Generated from one table; keyed by route (href) so JS-built markup gets icons too.
   ========================================================================== */
:root{
  --i-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  --i-idea:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
  --i-shop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1.2 12.1a1 1 0 0 1-1 .9H6.2a1 1 0 0 1-1-.9L4 7zM8 7V6a4 4 0 0 1 8 0v1'/%3E%3C/svg%3E");
  --i-flask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6l-5.5 9.5A1.5 1.5 0 0 0 5.8 21h12.4a1.5 1.5 0 0 0 1.3-2.5L14 9V3M7.5 15h9'/%3E%3C/svg%3E");
  --i-cart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a1 1 0 0 0 1 .8h8.2a1 1 0 0 0 1-.8L19 8H6.2M10 20.5h.01M17 20.5h.01'/%3E%3C/svg%3E");
  --i-orders:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6a1 1 0 0 1 1 1v1H8V5a1 1 0 0 1 1-1zM8 6H6a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-2M9 12h6M9 16h4'/%3E%3C/svg%3E");
  --i-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-1a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v1M9.5 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM21 20v-1a4 4 0 0 0-3-3.9M15.5 4.2a3.5 3.5 0 0 1 0 6.6'/%3E%3C/svg%3E");
  --i-tag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8zM7.5 7.5h.01'/%3E%3C/svg%3E");
  --i-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5h15A1.5 1.5 0 0 1 21 6.5v11a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5zM3 10h18M7 15h3'/%3E%3C/svg%3E");
  --i-gauge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19a9 9 0 1 1 14.2 0M12 14l3.5-4.5'/%3E%3C/svg%3E");
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
  --i-trend:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E");
  --i-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --i-server:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM4 13h16a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1zM7 7.5h.01M7 16.5h.01'/%3E%3C/svg%3E");
  --i-cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.5 4.5 0 0 1-.6-8.97A6 6 0 0 1 18 9.5a4.25 4.25 0 0 1-.5 8.5H7z'/%3E%3C/svg%3E");
  --i-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E");
  --i-route:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM18 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM8 17h5a3 3 0 0 0 0-6h-2a3 3 0 0 1 0-6h5'/%3E%3C/svg%3E");
  --i-idcard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM9 11.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM6 16.5c.4-1.7 1.6-2.5 3-2.5s2.6.8 3 2.5M15 9.5h3M15 13h3'/%3E%3C/svg%3E");
  --i-refresh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.9-3M4 4v4h4M4 13a8 8 0 0 0 14.9 3M20 20v-4h-4'/%3E%3C/svg%3E");
  --i-file:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7zM14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E");
  --i-banknote:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v10H3zM12 14.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM6.5 10v.01M17.5 14v.01'/%3E%3C/svg%3E");
  --i-receipt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14v18l-3-2-2 2-2-2-2 2-2-2-3 2zM9 8h6M9 12h6'/%3E%3C/svg%3E");
  --i-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5A1.5 1.5 0 0 1 6.5 3H19v16H6.5A1.5 1.5 0 0 0 5 20.5zM5 20.5A1.5 1.5 0 0 0 6.5 22H19v-3M9 7.5h6'/%3E%3C/svg%3E");
  --i-chart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");
  --i-message:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8.5 8.5 0 0 1-12.4 7.5L3 21l1.6-5.2A8.5 8.5 0 1 1 21 12z'/%3E%3C/svg%3E");
  --i-code:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16'/%3E%3C/svg%3E");
  --i-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4'/%3E%3C/svg%3E");
  --i-briefcase:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zM9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M3 13h18'/%3E%3C/svg%3E");
  --i-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-1a5 5 0 0 0-5-5H9a5 5 0 0 0-5 5v1M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/%3E%3C/svg%3E");
  --i-undo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E");
  --i-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.2 8 8 9 4.8-1 8-4.5 8-9V6z'/%3E%3C/svg%3E");
  --i-shieldcheck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.2 8 8 9 4.8-1 8-4.5 8-9V6zM9 12l2 2 4-4'/%3E%3C/svg%3E");
  --i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 11v5M12 8h.01'/%3E%3C/svg%3E");
  --i-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5zM3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E");
  --i-layers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 8l10 5 10-5zM2 12.5l10 5 10-5M2 17l10 5 10-5'/%3E%3C/svg%3E");
  --i-key:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 8a4 4 0 1 1-3.9 4.9L4 20H2v-2l7-7 .2-.2A4 4 0 0 1 15 8zM16 8.5h.01'/%3E%3C/svg%3E");
  --i-activity:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-8 4 16 3-8h4'/%3E%3C/svg%3E");
  --i-terminal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM7 10l3 2.5L7 15M12.5 15H17'/%3E%3C/svg%3E");
  --i-wifi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h.01M8.5 16.5a5 5 0 0 1 7 0M5 13a10 10 0 0 1 14 0M1.8 9.5a15 15 0 0 1 20.4 0'/%3E%3C/svg%3E");
  --i-scale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 21h10M5 7h14M5 7l-3 7a3.5 3.5 0 0 0 6 0zM19 7l-3 7a3.5 3.5 0 0 0 6 0z'/%3E%3C/svg%3E");
  --i-rss:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16M5 19h.01'/%3E%3C/svg%3E");
  --i-list:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E");
  --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --i-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM21 21l-4.3-4.3'/%3E%3C/svg%3E");
  --i-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --i-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  --i-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  --i-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z'/%3E%3C/svg%3E");
  --i-logout:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
  --i-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --i-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12h.01'/%3E%3C/svg%3E");
}

/* route -> icon */
[href="#dashboard"]{--ico:var(--i-home)}
[href="#feedback"]{--ico:var(--i-idea)}
[href="#shop"]{--ico:var(--i-shop)}
[href="#demos"]{--ico:var(--i-flask)}
[href="#cart"]{--ico:var(--i-cart)}
[href="#orders"]{--ico:var(--i-orders)}
[href="#customers"]{--ico:var(--i-users)}
[href="#customer-pricing"]{--ico:var(--i-tag)}
[href="#customer-payments"]{--ico:var(--i-card)}
[href="#customer-limits"]{--ico:var(--i-gauge)}
[href="#order-approvals"]{--ico:var(--i-check)}
[href="#price-changes"]{--ico:var(--i-trend)}
[href="#dunning"]{--ico:var(--i-alert)}
[href="#services"]{--ico:var(--i-server)}
[href="#cloud-servers"]{--ico:var(--i-cloud)}
[href="#domains"]{--ico:var(--i-globe)}
[href="#dns"]{--ico:var(--i-route)}
[href="#handles"]{--ico:var(--i-idcard)}
[href="#domain-actions"]{--ico:var(--i-refresh)}
[href="#contracts"]{--ico:var(--i-file)}
[href="#billing"]{--ico:var(--i-banknote)}
[href="#invoices"]{--ico:var(--i-receipt)}
[href="#ledger"]{--ico:var(--i-book)}
[href="#reports"]{--ico:var(--i-chart)}
[href="#tickets"]{--ico:var(--i-message)}
[href="#api-docs"]{--ico:var(--i-code)}
[href="#notifications"]{--ico:var(--i-bell)}
[href="#onboarding"]{--ico:var(--i-briefcase)}
[href="#account"]{--ico:var(--i-user)}
[href="#withdrawal"]{--ico:var(--i-undo)}
[href="#withdrawals"]{--ico:var(--i-undo)}
[href="#imprint"]{--ico:var(--i-info)}
[href="#terms"]{--ico:var(--i-file)}
[href="#privacy"]{--ico:var(--i-shield)}
[href="#user-management"]{--ico:var(--i-users)}
[href="#pricing"]{--ico:var(--i-tag)}
[href="#platform-fees"]{--ico:var(--i-banknote)}
[href="#package-builder"]{--ico:var(--i-box)}
[href="#bulk-domains"]{--ico:var(--i-layers)}
[href="#keyhelp"]{--ico:var(--i-key)}
[href="#operations"]{--ico:var(--i-activity)}
[href="#diagnostics"]{--ico:var(--i-terminal)}
[href="#status"]{--ico:var(--i-wifi)}
[href="#legal"]{--ico:var(--i-scale)}
[href="#developer"]{--ico:var(--i-code)}
[href="#event-feed"]{--ico:var(--i-rss)}
[href="#api-security"]{--ico:var(--i-shieldcheck)}
[href="#api-keys"]{--ico:var(--i-key)}
[href="#audit-log"]{--ico:var(--i-list)}
[href="#admin"]{--ico:var(--i-users)}


/* ---------- 3  Base elements ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--line-strong) transparent; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--accent-ink); text-underline-offset: .18em; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: .9em; }
small { font-size: .85em; }

::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); color: inherit; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid transparent; border-radius: 99px; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; border: 3px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

.muted { color: var(--muted); }
.tiny { font-size: 12px; color: var(--muted); }

/* ---------- forms ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

label {
  display: grid;
  gap: 6px;
  margin: 15px 0;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

input, select, textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--field);
  color: var(--ink);
  font-weight: 400;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--faint); }
input:focus, select:focus, textarea:focus { border-color: var(--accent-ink); outline: 2px solid color-mix(in srgb, var(--accent-ink) 45%, transparent); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; background: var(--surface-2); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
input[type="search"] { -webkit-appearance: none; appearance: none; }
fieldset { min-width: 0; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); }
legend { padding: 0 6px; font-size: 13px; font-weight: 700; }

/* ---------- buttons ---------- */
.primary, .secondary, .danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.primary:hover:not(:disabled) { background: var(--accent-hover); color: #fff; text-decoration: none; }
.secondary { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.secondary:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--faint); text-decoration: none; }
.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 18%, var(--card)); text-decoration: none; }
.primary:active:not(:disabled), .secondary:active:not(:disabled), .danger:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.primary:disabled, .secondary:disabled, .danger:disabled { opacity: .5; box-shadow: none; }
.primary.is-busy, .secondary.is-busy { pointer-events: none; opacity: .7; }
.link { padding: 0; border: 0; background: none; color: var(--accent-ink); font-weight: 600; }
.link:hover { text-decoration: underline; }

.toggle { position: relative; flex: none; width: 40px; height: 22px; padding: 0; border: 0; border-radius: 99px; background: var(--line-strong); transition: background var(--t-fast); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform var(--t-med) var(--ease); }
.toggle.on { background: var(--good); }
.toggle.on::after { transform: translateX(18px); }

.tabs { display: flex; gap: 4px; margin-bottom: 18px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tab { margin-bottom: -1px; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: color var(--t-fast), border-color var(--t-fast); }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }

/* ---------- 4  Components ---------- */
.content { width: 100%; max-width: 1400px; margin: 0 auto; padding: 28px 32px 72px; }

.heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; margin: 0 0 24px; }
.heading > div:first-child { min-width: 0; }
.heading h1 { margin: 0; font-size: 24px; font-weight: 650; line-height: 1.2; letter-spacing: -.02em; }
.heading p { max-width: 72ch; margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.heading > :not(div:first-child) { flex: none; }

.eyebrow { display: none; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.card, .panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card { padding: 18px 20px; min-width: 0; }
.card small { display: block; color: var(--muted); font-size: 13px; font-weight: 500; }
.card strong { display: block; margin-top: 6px; font-size: 28px; font-weight: 650; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metric-trend { margin-top: 6px; color: var(--good); font-size: 12px; }
.metric-trend.neutral { color: var(--muted); }

.panel { margin-top: 16px; padding: 22px; min-width: 0; }
.panel h2 { margin: 0 0 14px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.panel-title > div { min-width: 0; }
.panel-title h2 { margin: 0; }
.panel-title p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }

.empty { padding: 40px 20px; color: var(--muted); text-align: center; }
.loading-state {
  display: grid;
  gap: 16px;
  min-height: 62vh;
  padding: 4px 0 0;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-align: left;
  user-select: none;
}
.loading-state::before, .loading-state::after {
  content: "";
  display: block;
  border-radius: var(--r-lg);
  background: linear-gradient(100deg, var(--surface-2) 35%, var(--surface-hover) 50%, var(--surface-2) 65%) 0 0 / 300% 100%;
  animation: shimmer 1.5s linear infinite;
}
.loading-state::before { width: min(300px, 70%); height: 40px; border-radius: var(--r-md); }
.loading-state::after { height: 280px; border: 1px solid var(--line); }
@keyframes shimmer { to { background-position: -150% 0; } }

/* tables */
.table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
thead th { background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: var(--surface-hover); }
tbody tr:last-child td { border-bottom: 0; }
.panel > .table-wrap { margin: 0; }

/* status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* messages */
.notice, .callout, .sepa { padding: 12px 14px; border: 1px solid var(--warn-line); border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 14px; }
.notice { margin-bottom: 16px; }
.notice.success { border-color: var(--good-line); background: var(--good-bg); color: var(--good); }
.notice.error { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger); }
.callout { border-color: var(--info-line); background: var(--info-bg); color: var(--ink); }
.callout.warning { border-color: var(--warn-line); background: var(--warn-bg); }
.sepa { display: flex; align-items: center; gap: 10px; border-color: var(--info-line); background: var(--info-bg); color: var(--info); }
.notice code, .callout code, .sepa code { color: inherit; }

.progress { height: 8px; overflow: hidden; border-radius: 99px; background: var(--line); }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.secret { padding: 13px 14px; border: 1px solid #232b39; border-radius: var(--r-md); background: #0b1019; color: #e8ecf4; font-family: var(--mono); font-size: 13px; word-break: break-all; }

/* modals */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 9, 14, .64);
  animation: fade-in var(--t-med) ease-out both;
}
.modal-card {
  width: min(560px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  animation: rise-in var(--t-med) var(--ease) both;
}
.modal-card.wide { width: min(840px, 100%); }
.modal-card h2 { margin: 0 0 4px; font-size: 20px; font-weight: 650; letter-spacing: -.015em; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }

/* toast */
.toast {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  right: 24px;
  z-index: 400;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 90px);
  overflow: auto;
  padding: 13px 16px;
  border: 1px solid #2b3446;
  border-radius: var(--r-lg);
  background: #141a25;
  color: #eef1f7;
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  animation: toast-in var(--t-med) var(--ease) both;
}
.toast.error { border-color: #7a2a3a; background: #2b121a; color: #ffd6dc; }
.toast-message { flex: 1; min-width: 0; }
.toast-close { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: -4px -6px -4px 0; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; font-size: 20px; line-height: 1; }
.toast-close:hover { background: rgba(255, 255, 255, .12); }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } }

.tausio-guard { margin: 16px 0 4px; }


/* ---------- 5  Auth (login / registration) ---------- */
.logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(140deg, #f5693a, #dc3d5e);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.auth-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 480px);
  align-items: center;
  gap: clamp(32px, 7vw, 120px);
  min-height: 100dvh;
  padding: clamp(24px, 6vw, 96px);
  overflow: hidden;
  background:
    radial-gradient(55% 50% at 6% 100%, rgba(255, 107, 61, .17), transparent 70%),
    radial-gradient(50% 45% at 100% 0, rgba(95, 89, 238, .22), transparent 70%),
    #080b11;
  color: #e8ecf4;
}
.brand-card { justify-self: center; width: 100%; max-width: 520px; }
.brand-card .logo { width: 56px; height: 56px; border-radius: 16px; font-size: 24px; }
.brand-card h1 { margin: 24px 0 12px; font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; color: #fff; }
.brand-card p { max-width: 30ch; margin: 0; color: #9aa5b8; font-size: 18px; line-height: 1.6; }

.auth-card {
  position: relative;
  width: 100%;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  animation: rise-in .6s var(--ease) both;
}
.auth-card h2 { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -.025em; }
.auth-card .muted { margin: 6px 0 0; font-size: 14px; }
.auth-card input { min-height: 44px; }
.auth-card > .primary { width: 100%; min-height: 44px; margin-top: 8px; }
.auth-card p { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.auth-card .muted + label { margin-top: 22px; }

.auth-legal { position: fixed; left: 20px; bottom: 14px; z-index: 18; display: flex; gap: 2px; }
.auth-legal button { padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: #8f9aae; font-size: 13px; transition: color var(--t-fast); }
.auth-legal button:hover { color: #fff; text-decoration: underline; }
.withdrawal-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 19;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r-md);
  background: #c8381c;
  color: #fff;
  font-size: 13.5px;
  font-weight: 650;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  transition: background var(--t-fast), transform var(--t-fast);
}
.withdrawal-launcher:hover { background: #b02f16; }
.withdrawal-launcher:active { transform: translateY(1px); }

/* registration: wide multi-step card */
.auth-shell:has(#registerForm:not([hidden])) { grid-template-columns: minmax(220px, .5fr) minmax(0, 820px); align-items: start; gap: 4vw; padding-block: 28px 90px; }
.auth-shell:has(#registerForm:not([hidden])) .brand-card { position: sticky; top: 28px; }
.registration-card { width: min(820px, 100%); padding: 30px 36px; }
.register-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.register-heading h2 { margin: 0; }
.register-heading > span { flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 12px; font-weight: 600; }
.register-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0 22px; }
.register-progress i { height: 4px; border-radius: 99px; background: var(--line); transition: background var(--t-med); }
.register-progress i.active { background: var(--accent); }
.register-step[hidden] { display: none; }
.register-step { animation: fade-in var(--t-med) ease-out both; }
.register-step h3 { margin: 0 0 14px; font-size: 17px; }
.register-step textarea { min-height: 80px; }
.register-step .wide { grid-column: 1 / -1; }
.register-step fieldset { margin: 0 0 14px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.choice-grid label { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 500; cursor: pointer; }
.register-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.register-actions > span { flex: 1; }
.register-actions button { min-width: 110px; }

@media (max-width: 1000px) {
  .auth-shell, .auth-shell:has(#registerForm:not([hidden])) { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 28px; padding: 28px 18px 110px; }
  .auth-shell:has(#registerForm:not([hidden])) .brand-card { position: static; }
  .brand-card { display: flex; align-items: center; gap: 14px; max-width: 480px; margin: 0 auto; }
  .brand-card .logo { width: 44px; height: 44px; border-radius: 13px; font-size: 19px; }
  .brand-card h1 { margin: 0; font-size: 26px; letter-spacing: -.025em; }
  .brand-card p { display: none; }
  .auth-card { max-width: 480px; margin: 0 auto; padding: 28px 22px; }
  .registration-card { max-width: 820px; padding: 24px 20px; }
  .auth-legal { left: 0; right: 0; bottom: 0; justify-content: center; flex-wrap: wrap; padding: 6px 12px; background: rgba(8, 11, 17, .92); }
  .withdrawal-launcher { right: 14px; bottom: 54px; }
}
@media (max-width: 700px) {
  .registration-card .grid2, .choice-grid { grid-template-columns: 1fr; }
  .register-step .wide { grid-column: auto; }
  .register-heading { display: block; }
  .register-heading > span { display: inline-block; margin-top: 10px; }
}


/* ---------- 6  App shell ---------- */
.app { min-height: 100dvh; }
main { min-width: 0; }

/* mask icon helper: any element can draw a currentColor icon with --ico */
#navigation a::before,
.nav-group > summary::after,
.nav-search > span::before,
.header-search > span::before,
.theme-toggle::before,
.tools-dropdown > summary::before,
.user > i::before,
#menu::before,
.logout::before,
.quick-action > span::before,
.quick-action > i::before {
  content: "";
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--ico, var(--i-dot)) center / contain no-repeat;
  mask: var(--ico, var(--i-dot)) center / contain no-repeat;
}

/* sidebar */
aside {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: min(300px, 88vw);
  background: var(--nav);
  border-right: 1px solid var(--nav-line);
  color: var(--nav-ink);
  transform: translateX(-100%);
  transition: transform var(--t-med) var(--ease);
}
aside.open { transform: none; box-shadow: 30px 0 80px rgba(0, 0, 0, .5); }
aside.open::after { content: ""; position: absolute; top: 0; left: 100%; width: 100vw; height: 100dvh; background: rgba(4, 7, 12, .55); }

.sidebar-top { flex: none; padding: 18px 16px 10px; }
.wordmark { display: flex; align-items: center; gap: 11px; padding: 2px 4px 14px; color: #fff; text-decoration: none; }
.wordmark:hover { text-decoration: none; }
.wordmark > span:last-child { display: grid; line-height: 1.2; }
.wordmark b { color: #fff; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.wordmark small { margin-top: 2px; color: var(--nav-muted); font-size: 11.5px; }
.nav-search { position: relative; display: block; margin: 0; }
.nav-search > span, .header-search > span { position: absolute; left: 12px; top: 50%; display: grid; place-items: center; width: 18px; height: 18px; color: var(--nav-muted); font-size: 0; transform: translateY(-50%); pointer-events: none; }
.nav-search > span::before, .header-search > span::before { --ico: var(--i-search); width: 16px; height: 16px; }
.nav-search input { height: 38px; min-height: 0; padding: 0 12px 0 36px; border: 1px solid var(--nav-line); border-radius: var(--r-md); background: rgba(255, 255, 255, .04); color: #fff; font-size: 13.5px; }
.nav-search input::placeholder { color: var(--nav-muted); }
.nav-search input:focus { border-color: rgba(169, 165, 255, .7); outline: 2px solid rgba(169, 165, 255, .35); outline-offset: 0; }

.workspace-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; flex: none; margin: 4px 16px 6px; padding: 3px; border: 1px solid var(--nav-line); border-radius: var(--r-md); background: rgba(255, 255, 255, .03); }
.workspace-switch button { min-width: 0; padding: 7px 6px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--nav-muted); font-size: 12.5px; font-weight: 600; transition: background var(--t-fast), color var(--t-fast); }
.workspace-switch button:hover { color: #fff; }
.workspace-switch button[aria-pressed="true"] { background: var(--nav-active); color: #fff; }

#navigation { display: block; flex: 1; min-height: 0; padding: 6px 10px 16px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-color: #2a3342 transparent; }
#navigation a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: var(--r-md);
  color: var(--nav-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
#navigation a::before { opacity: .7; transition: opacity var(--t-fast), color var(--t-fast); }
#navigation a:hover { background: var(--nav-hover); color: #fff; }
#navigation a:hover::before { opacity: 1; }
#navigation a.active { background: var(--nav-active); color: #fff; }
#navigation a.active::before { color: var(--brand); opacity: 1; }
#navigation > a:first-child { margin-bottom: 4px; }

.nav-group { margin-top: 4px; padding: 4px 0 0; border-top: 1px solid var(--nav-line); }
.nav-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px 7px;
  border-radius: var(--r-md);
  color: var(--nav-muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: color var(--t-fast);
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { color: #fff; }
.nav-group > summary::after { --ico: var(--i-chevron); width: 14px; height: 14px; transform: rotate(-90deg); transition: transform var(--t-med) var(--ease); }
.nav-group[open] > summary::after { transform: none; }
.nav-group > div { display: grid; gap: 1px; padding: 2px 0 6px; }
@supports selector(::details-content) {
  .nav-group { interpolate-size: allow-keywords; }
  .nav-group::details-content { block-size: 0; overflow: clip; transition: block-size var(--t-med) var(--ease), content-visibility var(--t-med) allow-discrete; }
  .nav-group[open]::details-content { block-size: auto; }
}

.sidebar-footer { flex: none; padding: 12px; border-top: 1px solid var(--nav-line); }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-md); color: #fff; text-decoration: none; transition: background var(--t-fast); }
.sidebar-user:hover { background: var(--nav-hover); text-decoration: none; }
.sidebar-user > span:last-child { display: grid; min-width: 0; line-height: 1.25; }
.sidebar-user b { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user small { color: var(--nav-muted); font-size: 12px; }
.mini-avatar, .avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(145deg, #4338ca, #5f59ee); color: #fff; font-size: 13px; font-weight: 700; }
.logout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 8px; border: 1px solid var(--nav-line); border-radius: var(--r-md); background: transparent; color: var(--nav-ink); font-size: 13px; font-weight: 500; transition: background var(--t-fast), color var(--t-fast); }
.logout::before { --ico: var(--i-logout); width: 16px; height: 16px; }
.logout:hover { background: var(--nav-hover); color: #fff; }

/* header */
main > header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--header-h);
  padding: 0 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-title { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.25; }
.header-title strong { order: -1; overflow: hidden; font-size: 16px; font-weight: 650; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.header-title small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.header-search { position: relative; display: none; align-items: center; width: min(34vw, 380px); height: 38px; margin-left: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--field); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.header-search:focus-within { border-color: var(--accent-ink); outline: 2px solid color-mix(in srgb, var(--accent-ink) 45%, transparent); }
.header-search > span { color: var(--faint); }
.header-search input { height: 100%; min-height: 0; padding: 0 12px 0 36px; border: 0; background: transparent; box-shadow: none; font-size: 13.5px; }
.header-search input:focus { border: 0; outline: 0; }

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.header-search + .header-actions { margin-left: 0; }
.header-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--muted);
  font-size: 0;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.header-icon:hover { border-color: var(--line-strong); background: var(--surface-hover); color: var(--ink); text-decoration: none; }
.header-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle::before { --ico: var(--i-moon); }
[data-theme="dark"] .theme-toggle::before { --ico: var(--i-sun); }
.tools-dropdown > summary::before { --ico: var(--i-grid); }
#menu { display: grid; place-items: center; width: 38px; height: 38px; margin-left: -4px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink); font-size: 0; }
#menu::before { --ico: var(--i-menu); width: 22px; height: 22px; }
#menu:hover { background: var(--surface-hover); }

.header-dropdown { position: relative; }
.header-dropdown > summary { list-style: none; cursor: pointer; }
.header-dropdown > summary::-webkit-details-marker { display: none; }
.user { display: flex; align-items: center; gap: 10px; padding: 3px 8px 3px 12px; border: 1px solid transparent; border-radius: var(--r-md); font-size: 13.5px; font-weight: 600; transition: background var(--t-fast), border-color var(--t-fast); }
.user:hover, .account-dropdown[open] .user { background: var(--surface-hover); border-color: var(--line); }
#userCompany { max-width: 190px; overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.user > i { display: grid; place-items: center; width: 14px; height: 14px; color: var(--faint); font-size: 0; }
.user > i::before { --ico: var(--i-chevron); width: 14px; height: 14px; }
.user .avatar { width: 34px; height: 34px; }
.header-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 90;
  display: grid;
  width: 244px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  animation: pop-in .18s var(--ease) both;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.header-dropdown-menu > b { padding: 8px 10px 6px; color: var(--muted); font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.header-dropdown-menu a, .header-dropdown-menu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.header-dropdown-menu a:hover, .header-dropdown-menu button:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; }
.header-dropdown-menu button { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--danger); }

/* dashboard blocks */
.dashboard-heading { margin-bottom: 16px; }
.dashboard-hero { display: grid; grid-template-columns: minmax(220px, .7fr) 1.6fr; gap: 28px; align-items: center; margin-bottom: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm); }
.dashboard-hero h2 { margin: 0 0 6px; font-size: 20px; font-weight: 650; letter-spacing: -.015em; }
.dashboard-hero p { margin: 0; color: var(--muted); font-size: 14px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick-action { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); text-decoration: none; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); }
.quick-action:hover { border-color: color-mix(in srgb, var(--accent-ink) 45%, var(--line)); background: var(--surface-hover); text-decoration: none; }
.quick-action:active { transform: translateY(1px); }
.quick-action > span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); font-size: 0; }
.quick-action > div { display: grid; gap: 1px; min-width: 0; }
.quick-action b { font-size: 14px; font-weight: 600; }
.quick-action small { overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.quick-action > i { margin-left: auto; color: var(--faint); font-size: 0; }
.quick-action > i::before { --ico: var(--i-arrow); width: 16px; height: 16px; }
.quick-action:hover > i { color: var(--accent-ink); }

.admin-attention { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--warn-line); border-radius: var(--r-lg); background: var(--warn-bg); color: var(--ink); }
.admin-attention span { color: var(--muted); font-size: 13px; }
.admin-attention a { color: var(--accent-ink); font-size: 13px; font-weight: 650; text-decoration: none; }
.admin-attention a:hover { text-decoration: underline; }
.admin-attention.healthy { grid-template-columns: auto 1fr; border-color: var(--good-line); background: var(--good-bg); }

/* desktop frame */
@media (min-width: 901px) {
  .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  aside { width: var(--sidebar-w); z-index: 50; transform: none; transition: none; }
  aside.open { box-shadow: none; }
  aside.open::after { display: none; }
  main { grid-column: 2; }
  main > header { padding: 0 32px; }
  .nav-search, #menu { display: none; }
  .header-search { display: flex; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  :root { --sidebar-w: 232px; }
  main > header { padding: 0 20px; }
  .content { padding: 24px 22px 64px; }
  .dashboard-hero { grid-template-columns: 1fr; }
}

/* tablet / phone */
@media (max-width: 900px) {
  #userCompany, .user > i, .tools-dropdown { display: none; }
  .user { padding: 0; }
  .header-dropdown-menu { position: fixed; top: calc(var(--header-h) + 6px); right: 12px; }
  .content { padding: 20px 14px 56px; }
  .dashboard-hero { grid-template-columns: 1fr; padding: 18px; }
  .heading { margin-bottom: 18px; }
  .heading .primary, .heading .secondary { width: 100%; }
  .panel { padding: 16px; }
  input, select, textarea { font-size: 16px; }
  .primary, .secondary, .danger { min-height: 42px; }
}
@media (max-width: 700px) {
  .modal { padding: 12px; }
  .modal-card { padding: 20px; }
  .toast { right: 16px; }
}
@media (max-width: 560px) {
  .quick-grid { grid-template-columns: 1fr; }
  .admin-attention { grid-template-columns: 1fr; }
  .cards { gap: 10px; }
  .card { padding: 14px 16px; }
  .card strong { font-size: 24px; }
}

/* ---------- 7  Components carried over from earlier versions ---------- */

/* --- utilities, 2FA, legal, cloud servers --- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:700px){
  .grid2{grid-template-columns:1fr}
}
.diagnostic-row{cursor:pointer}
.diagnostic-row:hover{background:var(--surface-hover,#182235)}
.diagnostic-detail pre{max-height:42vh;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#080f1d;border:1px solid var(--border);border-radius:10px;padding:16px;color:#dce7f8;font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}
.domain-inventory-table{min-width:1180px}
.domain-inventory-table th{white-space:nowrap;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.domain-inventory-table td{vertical-align:middle}
.domain-inventory-table td:first-child{min-width:210px}
.domain-inventory-table td small{display:block;margin-top:.25rem;color:var(--muted)}
.domain-id:empty{display:none}
.provider-label{display:inline-flex;padding:.3rem .55rem;border:1px solid var(--border);border-radius:.45rem;text-transform:capitalize;background:var(--surface-2)}
.renewal-state{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.32rem .58rem;font-size:.78rem;font-weight:700}
.renewal-state:before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor}
.renewal-state.on{color:#5fdb9a;background:rgba(34,197,94,.12)}
.renewal-state.off{color:#aeb4bf;background:rgba(148,163,184,.12)}
.domain-manage{display:inline-flex;text-decoration:none;white-space:nowrap}
.recovery-codes-modal .modal-card{max-width:620px}
.recovery-code-list{margin:18px 0;padding:20px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2,#111827);font:700 17px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;white-space:pre-wrap;user-select:all}
.recovery-codes-modal .notice{margin-top:18px}
.authenticator-setup-modal .modal-card{max-width:600px}
.authenticator-qr{display:grid;place-items:center;margin:22px auto;padding:18px;width:min(300px,100%);aspect-ratio:1;background:#fff;border-radius:var(--r-lg)}
.authenticator-qr svg{display:block;width:100%;height:100%}
.authenticator-secret{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2,#111827)}
.authenticator-secret span{grid-column:1/-1;color:var(--muted);font-size:13px;font-weight:700}
.authenticator-secret code{overflow-wrap:anywhere;font-size:15px;letter-spacing:.05em;user-select:all}
.authenticator-confirm{margin-top:20px}
.authenticator-confirm input{font-size:22px;font-weight:800;letter-spacing:.3em;text-align:center}
@media(max-width:600px){
  .authenticator-secret{grid-template-columns:1fr}
  .authenticator-secret .secondary{width:100%}
}
.two-factor-method{display:flex;align-items:center;gap:14px;margin:18px 0;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2,#111827)}
.two-factor-method>div{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.two-factor-method span span{display:grid}
.two-factor-method small{display:block;color:var(--muted);font-weight:500}
.two-factor-method-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:rgba(99,102,241,.15);color:#8b8dff;font-size:21px;font-weight:800}
@media(max-width:600px){
  .two-factor-method{align-items:stretch;flex-wrap:wrap}
  .two-factor-method>div{flex-basis:100%}
  .two-factor-method button{flex:1}
}
.withdrawal-modal .modal-card{width:min(720px,100%)}
.withdrawal-review{display:grid;gap:10px;margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2,var(--surface-2))}
.withdrawal-review span{display:grid;grid-template-columns:170px 1fr;gap:12px}
.withdrawal-review b{overflow-wrap:anywhere}
.withdrawal-receipt{white-space:pre-wrap;max-height:38vh;overflow:auto;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2,var(--surface-2))}
@media(max-width:600px){
  .withdrawal-review span{grid-template-columns:1fr;gap:2px}
}
.legal-modal .modal-card{width:min(640px,100%)}
.legal-placeholder{margin-top:18px;padding:20px;border:1px dashed var(--line);border-radius:12px;background:var(--surface-2,var(--surface-2))}
.legal-placeholder p:last-child{margin-bottom:0}
.legal-content{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}
.legal-placeholder:not(.is-placeholder){border-style:solid}
.legal-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px}
.legal-editor{margin-top:0}
.legal-editor textarea{min-height:360px;resize:vertical;font-family:inherit;line-height:1.55}
#authView:not([hidden])~.modal .legal-placeholder,#authView:not([hidden])~.modal .withdrawal-review,#authView:not([hidden])~.modal .withdrawal-receipt{color:#edf1f5;background:#0d131b;border-color:#343d49}
.account-note{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.account-note:before{content:"Notiz: ";font-weight:700;color:var(--ink)}
.modal[data-form-title^="FTP-"] textarea[name="description"],.modal[data-form-title^="E-Mail-Konto"] textarea[name="description"]{min-height:92px}
.cloud-server-table{min-width:1080px}
.cloud-server-table td{vertical-align:middle}
.cloud-actions{position:relative}
.cloud-actions>summary{list-style:none;white-space:nowrap}
.cloud-actions>summary::-webkit-details-marker{display:none}
.cloud-actions>div{position:absolute;z-index:40;right:0;top:calc(100% + 7px);display:grid;min-width:210px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 18px 50px #0007}
.cloud-actions>div button{border:0;border-radius:8px;padding:10px 12px;text-align:left;background:transparent;color:var(--ink);font-weight:700}
.cloud-actions>div button:hover{background:var(--surface-2,#edf0f8)}
.cloud-actions>div .danger{color:var(--danger)}
.cloud-json{max-height:60vh;overflow:auto;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2,#101827);white-space:pre-wrap;overflow-wrap:anywhere}
.cloud-protection-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.cloud-protection-row small{display:block;color:var(--muted)}
@media(max-width:700px){
  .cloud-settings .grid2{grid-template-columns:1fr}
  .cloud-protection-row{grid-template-columns:1fr 1fr}
  .cloud-protection-row>div{grid-column:1/-1}
}

/* --- commerce building blocks --- */
.split{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
.subcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.subcard{border:1px solid var(--line);border-radius:12px;padding:15px}
.subcard strong{display:block;font-size:20px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.toolbar input,.toolbar select{width:auto;min-width:190px;margin:0}
.provider-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.provider{padding:18px;border:1px solid var(--line);border-radius:var(--r-lg)}
.provider-head{display:flex;align-items:center;justify-content:space-between}
.scope{display:inline-flex;padding:5px 8px;background:#eef1f7;border-radius:7px;font-size:12px}
.price{font-size:22px;font-weight:800}
.price small{font-size:12px;color:var(--muted);font-weight:500}
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.package h3{margin:8px 0 0}
.package ul{padding-left:18px;color:var(--muted);flex:1}
.periods{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.period{padding:10px;border:1px solid var(--line);border-radius:9px}
.period b,.period small{display:block}
.period small{color:var(--muted)}
.discount{color:var(--good);font-size:11px}
.form-section{margin:22px 0}
.form-section h3{font-size:16px;margin-bottom:5px}
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.check{display:flex;gap:8px;align-items:center;border:1px solid var(--line);padding:11px;border-radius:9px}
.check input{width:auto}
.instance{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:13px;padding:15px;border-bottom:1px solid var(--line)}
.instance:last-child{border:0}
.placeholder-chart{height:180px;display:flex;align-items:flex-end;gap:9px;padding-top:25px}
.bar{flex:1;background:linear-gradient(#5473ef,#314ec8);border-radius:7px 7px 2px 2px;min-height:10px}
@media(max-width:1100px){
  .package-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
}
@media(max-width:700px){
  .provider-grid,.package-grid,.subcards,.check-grid{grid-template-columns:1fr}
  .toolbar input,.toolbar select{width:100%}
}
.bulk-history-row{cursor:pointer}
.bulk-history-row:hover td{background:rgba(108,99,255,.07)}
.bulk-order-toolbar{align-items:end;display:grid;grid-template-columns:minmax(150px,220px) minmax(220px,1fr) auto auto auto;gap:12px;margin:18px 0}
.bulk-order-toolbar label{margin:0}
.bulk-message{max-width:520px;white-space:normal;word-break:break-word}
@media(max-width:1000px){
  .bulk-order-toolbar{grid-template-columns:1fr 1fr}
  .bulk-order-toolbar>a,.bulk-order-toolbar>button{width:100%}
}
@media(max-width:620px){
  .bulk-order-toolbar{grid-template-columns:1fr}
}

/* --- feature components --- */
.record-content{max-width: 34rem;
  white-space: pre-wrap;
  word-break: break-word;}
.zone-records .toolbar{margin: 1rem 0;}
.service-builder .builder-section{margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid var(--border, var(--line));
  border-radius: 16px;
  background: rgba(248, 250, 252, .72);}
.grid3,.grid4,.check-grid,.resource-grid{display: grid;
  gap: .9rem;}
.grid3{grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid4{grid-template-columns: repeat(4, minmax(0, 1fr));}
.check-grid{grid-template-columns: repeat(4, minmax(0, 1fr));}
.resource-grid{grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem;}
.resource-panel{padding: 1rem; border: 1px solid var(--border, var(--line)); border-radius: 16px;}
.resource-panel.full{grid-column: 1 / -1;}
.resource-filter{max-width: 32rem;}
@media (max-width: 900px){
  .grid3,.grid4,.check-grid,.resource-grid{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 620px){
  .grid3,.grid4,.check-grid,.resource-grid{grid-template-columns: 1fr;}
  .resource-panel.full{grid-column: auto;}
}
.domain-search{display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: .75rem;
  margin: 1rem 0;}
.domain-quote.success{border-color: rgba(22, 163, 74, .35);
  background: rgba(22, 163, 74, .08);
  color: var(--good);}
.choice-cards{display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;}
.choice{display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: 1rem;
  border: 1px solid var(--border, var(--line));
  border-radius: 14px;
  cursor: pointer;}
.choice span,.choice small{display: block;}
.choice small{margin-top: .25rem; color: var(--muted, #64748b);}
@media (max-width: 620px){
  .domain-search,.choice-cards{grid-template-columns: 1fr;}
}
.package h3{font-size:20px;letter-spacing:-.03em}
.price{font-size:25px;letter-spacing:-.04em}
.placeholder-chart .bar{background:linear-gradient(180deg,#818cf8,#4f46e5);opacity:.88}
.keyhelp-instance{margin-bottom:22px}
.keyhelp-instance .instance{padding:0 0 20px}
.keyhelp-metrics{margin:2px 0 20px}
.instance-actions{justify-content:flex-end;border-top:1px solid var(--line);padding-top:18px}
.instance-actions .tiny{margin-right:auto}
.keyhelp-instance .notice{margin:0 0 18px}
@keyframes spin{to{transform:rotate(360deg)}}
tbody tr.ticket-row,tbody tr[data-id]{cursor:pointer}
.analytics-toolbar{display:grid;grid-template-columns:minmax(320px,620px) 1fr;align-items:end;gap:24px;margin-bottom:22px}
.analytics-toolbar label{margin:0}
.live-indicator{justify-self:end;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.live-indicator span{width:9px;height:9px;border-radius:50%;background:#10b981;box-shadow:0 0 0 5px rgba(16,185,129,.12);animation:livePulse 1.8s infinite}
@keyframes livePulse{50%{box-shadow:0 0 0 9px rgba(16,185,129,0)}}
.analytics-area{margin:4px -4px -4px;padding:22px 4px 4px;border-top:1px solid var(--line)}
.analytics-warnings{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.analytics-warnings span{padding:7px 10px;border:1px solid var(--warn-line);border-radius:9px;background:var(--warn-bg);color:var(--warn);font-size:11px;font-weight:700}
.analytics-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.analytics-summary>div{display:grid;gap:4px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.analytics-summary small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.07em}
.analytics-summary b{font-size:14px}
.metric-charts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.metric-charts>div{padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.metric-charts>div>b{font-size:12px}
.metric-spark{display:block;width:100%;height:105px;margin-top:8px;overflow:visible}
.metric-spark path{fill:none;stroke:var(--line);stroke-width:.5}
.metric-spark polyline{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.chart-legend{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}
.chart-empty{display:grid;place-items:center;height:105px;color:var(--muted);font-size:11px}
.analytics-actions{display:flex;align-items:center;gap:12px;margin-top:14px}
.analytics-actions .tiny{margin-left:auto}
@media(max-width:950px){
  .analytics-toolbar{grid-template-columns:1fr}
  .live-indicator{justify-self:start}
  .analytics-summary{grid-template-columns:1fr 1fr}
  .metric-charts{grid-template-columns:1fr}
}
@media(max-width:520px){
  .analytics-summary{grid-template-columns:1fr}
  .analytics-toolbar .grid2{grid-template-columns:1fr}
  .analytics-actions{align-items:flex-start;flex-direction:column}
  .analytics-actions .tiny{margin-left:0}
}
.domain-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.domain-editor-head h2{margin-bottom:4px}
.domain-price-base{max-width:920px}
.domain-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.domain-action-price{border:1px solid var(--line);border-radius:var(--r-lg);padding:17px;background:color-mix(in srgb,var(--card) 96%,var(--accent) 4%)}
.domain-action-title,.domain-costs,.action-result{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.domain-action-title{font-size:17px}
.domain-costs{margin-top:13px;color:var(--muted);font-size:13px}
.action-result{border-top:1px solid var(--line);padding-top:12px}
.action-profit.fixed{color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger-line);border-radius:8px;padding:5px 9px;font-weight:700}
.action-profit.fixed.negative{color:var(--danger);background:var(--danger-bg)}
.domain-price-editor{scroll-margin-top:92px}
[data-theme="dark"] .domain-action-price{background:var(--surface-2)}
[data-theme="dark"] .action-profit.fixed{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-line)}
@media(max-width:900px){
  .domain-action-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .domain-editor-head{flex-direction:column}
  .domain-price-base{grid-template-columns:1fr}
}
.fee-rule-editor{scroll-margin-top:96px}
.fee-rule-form{width:100%;max-width:none;max-height:none;overflow:visible}
.fee-rule-scope{max-width:520px;margin:18px 0 22px}
.fee-rule-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.fee-rule-column{display:block;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.fee-rule-column .fee-rule-heading{padding-bottom:10px;border-bottom:1px solid var(--line)}
.fee-rule-column .fee-rule-heading h3{margin:0 0 4px}
.fee-rule-column .fee-rule-heading p{margin:0}
.fee-rule-column label.check{min-height:48px}
@media(max-width:980px){
  .fee-rule-grid{grid-template-columns:1fr}
}
.price-list-toolbar{display:grid;grid-template-columns:minmax(240px,1fr) 150px auto;align-items:end;gap:14px;margin-bottom:14px}
.price-list-toolbar label{margin:0}
.price-list-toolbar .price-count{color:var(--muted);padding:11px 0;text-align:right}
.price-pagination{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:16px}
.price-pagination span{color:var(--muted);font-size:13px}
.domain-public-price-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
.domain-public-price-head h2{margin-bottom:4px}
.domain-public-price-head label{margin:0;min-width:260px}
@media(max-width:720px){
  .price-list-toolbar{grid-template-columns:1fr 1fr}
  .price-list-toolbar .price-search{grid-column:1/-1}
  .price-list-toolbar .price-count{text-align:left}
  .domain-public-price-head{flex-direction:column}
  .domain-public-price-head label{width:100%;min-width:0}
  .price-pagination{justify-content:space-between}
}
.ticket-properties{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;margin:16px 0 20px}
.ticket-properties label{margin:5px 0}
.ticket-detail{width:min(900px,100%)}
.ticket-thread{display:grid;gap:10px;max-height:42vh;overflow:auto;padding-right:4px}
.ticket-thread .notice{margin:0}
.ticket-thread p{white-space:pre-wrap;margin-bottom:0}
.onboarding-profile h3{margin:28px 0 8px}
.onboarding-profile .progress{margin:14px 0 24px}
.field-title{font-weight:700;margin:20px 0 8px}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.check-card{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:9px;margin:0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.check-card input{width:auto;margin:0}
.industry-custom[hidden]{display:none}
.modal-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.modal-field-grid .check{grid-column:1/-1}
@media(max-width:700px){
  .modal-field-grid{grid-template-columns:1fr}
}
.modal-card.registration-review{width:min(1080px,100%)}
.review-section{padding:18px 0;border-top:1px solid var(--line)}
.review-section:first-of-type{border-top:0}
.review-section h3{margin:0 0 12px}
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.review-item{min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(127,140,170,.06)}
.review-item small,.review-item strong{display:block}
.review-item small{color:var(--muted);margin-bottom:4px}
.review-item strong{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:900px){
  .review-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .review-grid{grid-template-columns:1fr}
}
.account-timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.timeline-row{display:grid;grid-template-columns:12px 1fr;gap:10px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:12px}
.timeline-row>span{width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--muted)}
.timeline-row.done>span{background:var(--good);box-shadow:0 0 0 4px rgba(25,169,116,.15)}
.timeline-row b,.timeline-row small{display:block}
.timeline-row small{color:var(--muted);margin-top:3px}
@media(max-width:900px){
  .account-timeline{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .account-timeline{grid-template-columns:1fr}
}
.auth-shell:has(#registerForm:not([hidden])){grid-template-columns:minmax(260px,.65fr) minmax(680px,820px);gap:4vw;padding-block:28px}
.register-step .wide{grid-column:1/-1}
@media(max-width:1000px){
  .auth-shell:has(#registerForm:not([hidden])){grid-template-columns:1fr}
}
@media(max-width:700px){
  .registration-card .grid2{grid-template-columns:1fr}
  .register-step .wide{grid-column:auto}
}
.billing-price-editor{margin:8px 0 22px}
.billing-price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.billing-price{display:grid;grid-template-columns:minmax(120px,1fr) minmax(130px,.8fr);align-items:end;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:color-mix(in srgb,var(--card) 96%,var(--accent) 4%)}
.billing-price>div:first-child{align-self:center}
.billing-price b,.billing-price small{display:block}
.billing-price small{margin-top:3px;color:var(--muted)}
.billing-price>label{margin:0}
.billing-price>.check{grid-column:1/-1;align-items:center;padding-top:10px;border-top:1px solid var(--line)}
.money-input{position:relative}
.money-input input{padding-right:38px}
.money-input span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:750;pointer-events:none}
[data-theme="dark"] .billing-price{background:var(--surface-2)}
@media(max-width:760px){
  .billing-price-grid{grid-template-columns:1fr}
  .billing-price{grid-template-columns:1fr}
}
.billing-price>.billing-discount-toggle{padding-top:0;border-top:0;color:var(--ink)}
.billing-discount-info{grid-column:1/-1;padding:9px 11px;border-radius:9px;background:rgba(24,169,116,.1);color:var(--good);font-size:12px}
.billing-discount-info.invalid{background:rgba(224,65,83,.1);color:var(--danger)}
.bundle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.service-bundle{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:color-mix(in srgb,var(--card) 97%,var(--accent) 3%)}
.service-bundle b,.service-bundle small{display:block}
.service-bundle small{margin-top:4px;color:var(--muted)}
.service-bundle>span{padding:6px 9px;border-radius:99px;background:rgba(104,101,242,.12);color:var(--accent-ink);font-size:11px;font-weight:750}
.service-bundle .actions{grid-column:1/-1}
[data-theme="dark"] .service-bundle{background:var(--surface-2)}
@media(max-width:760px){
  .bundle-grid{grid-template-columns:1fr}
}
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.shop-product{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:19px;border:1px solid var(--line);border-radius:var(--r-lg);background:color-mix(in srgb,var(--card) 97%,var(--accent) 3%)}
.shop-product h3{margin:0}
.shop-product strong{font-size:22px}
.shop-product button{width:100%;margin-top:auto}
.cart-total{display:flex;align-items:center;justify-content:flex-end;gap:24px;padding:20px 4px;border-top:1px solid var(--line);font-size:16px}
.cart-total strong{font-size:26px}
[data-purchase-mode="direct_customer"] [data-requires-customers]{display:none!important}
[data-theme="dark"] .shop-product{background:var(--surface-2)}
@media(max-width:900px){
  .shop-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .shop-grid{grid-template-columns:1fr}
  .cart-total{justify-content:space-between}
}
.shop-period-prices{display:grid;width:100%;gap:6px}
.shop-period-prices span{display:flex;justify-content:space-between;gap:12px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;font-size:12px}
.domain-search{min-width:min(100%,340px)}
.domain-price-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:11px;margin-bottom:14px}
.domain-price-choice{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:16px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--ink);cursor:pointer}
.domain-price-choice:hover{border-color:var(--accent);transform:translateY(-1px)}
.domain-price-choice span{font-size:17px;font-weight:800}
.domain-price-choice b{color:var(--accent-ink)}
.domain-price-choice small{color:var(--muted)}
.domain-name-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.domain-name-input input{border:0!important;border-radius:0!important}
.domain-name-input span{padding:0 13px;font-weight:800;color:var(--muted)}
.domain-price-choice.best-match{border:2px solid var(--good);box-shadow:0 0 0 3px rgba(35,178,109,.13)}
.domain-price-choice.best-match small{color:var(--good);font-weight:750}
.domain-action-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:4px 0 20px}
.domain-action-prices>div{display:flex;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--card) 96%,var(--accent) 4%)}
.domain-action-prices span{color:var(--muted)}
@media(max-width:760px){
  .domain-action-prices{grid-template-columns:1fr}
}
.modal:has(.structured-handle-form){padding:clamp(8px,2vw,20px)}
.structured-handle-form.modal-card.wide{width:min(1120px,calc(100vw - 2 * clamp(8px,2vw,20px)));max-width:100%;max-height:calc(100dvh - 2 * clamp(8px,2vw,20px));overflow:auto;overscroll-behavior:contain;padding:clamp(14px,2vw,28px)}
.structured-handle-form .modal-field-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(10px,1.5vw,18px)}
.structured-handle-form label{min-width:0;margin:10px 0}
.structured-handle-form input,.structured-handle-form select{min-width:0}
.structured-handle-form .handle-field-label{display:block;font-weight:700}
.structured-handle-form .handle-field-label b,.structured-handle-form .panel-title b{color:var(--danger)}
.structured-handle-form .handle-field-label small{color:var(--muted);font-weight:500}
.handle-meta{margin-bottom:12px}
.handle-required-section{padding:clamp(12px,1.5vw,17px);border:1px solid var(--line);border-radius:var(--r-lg)}
.handle-required-section h3{margin:0 0 6px}
.handle-extra-fields{margin:12px 0;border:1px solid var(--line);border-radius:var(--r-lg);background:color-mix(in srgb,var(--card) 97%,var(--accent) 3%)}
.handle-extra-fields summary{display:flex;flex-direction:column;gap:3px;padding:13px 16px;cursor:pointer;font-weight:800}
.handle-extra-fields summary small{color:var(--muted);font-weight:500}
.handle-extra-fields[open] summary{border-bottom:1px solid var(--line)}
.handle-extra-fields>.modal-field-grid{padding:12px 16px}
.structured-handle-form>.check{margin:10px 0}
.structured-handle-form .modal-actions{margin-top:12px}
@media(max-width:900px){
  .structured-handle-form .modal-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:580px){
  .structured-handle-form .modal-field-grid{grid-template-columns:1fr}
  .structured-handle-form .panel-title{align-items:flex-start;gap:10px}
  .structured-handle-form .panel-title h2{font-size:20px}
  .structured-handle-form .handle-meta{grid-template-columns:1fr}
}
.shop-product,.domain-price-choice{border-radius:9px}
.shop-product{position:relative;overflow:hidden}
.domain-price-choice{min-height:126px;justify-content:center}
.domain-price-choice:hover{box-shadow:var(--shadow)}
.domain-price-choice.best-match{border-color:var(--good);background:color-mix(in srgb,var(--card) 94%,var(--good) 6%)}
.cloud-domain-order.modal-card.wide{width:min(980px,100%)}
.domain-order-steps{display:grid;grid-template-columns:repeat(3,1fr);margin:18px 0 8px;border-bottom:1px solid var(--line)}
.domain-order-steps span{padding:10px 12px;color:var(--muted);font-size:12px;font-weight:800;text-align:center}
.domain-order-steps span.active{border-bottom:2px solid var(--accent);color:var(--ink)}
.domain-check-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;padding:18px 0}
.domain-check-row label{margin:0}
.domain-check-row button{min-height:44px}
.domain-check-result{display:grid;gap:3px;padding:14px 16px;margin-bottom:13px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--card) 95%,var(--muted) 5%)}
.domain-check-result span{color:var(--muted);font-size:13px}
.domain-check-result.available{border-color:var(--good);background:color-mix(in srgb,var(--card) 93%,var(--good) 7%)}
.domain-check-result.transfer{border-color:var(--warn);background:color-mix(in srgb,var(--card) 93%,var(--warn) 7%)}
.domain-check-result.error{border-color:var(--danger)}
.auth-code-field{padding:14px 16px;margin:12px 0;border:1px solid color-mix(in srgb,var(--warn) 55%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--card) 94%,var(--warn) 6%)}
.auth-code-field small{color:var(--muted)}
.cloud-form-section{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:9px}
.cloud-form-section h3{margin:0}
.domain-action-prices>[data-action]{transition:border-color .15s,background .15s}
.domain-action-prices>[data-action].selected{border-color:var(--accent);background:color-mix(in srgb,var(--card) 86%,var(--accent) 14%);box-shadow:inset 0 0 0 1px var(--accent)}
@media(max-width:650px){
  .domain-order-steps{grid-template-columns:1fr}
  .domain-order-steps span:not(.active){display:none}
  .domain-check-row{grid-template-columns:1fr}
  .domain-check-row button{width:100%}
  .cloud-form-section{padding:13px}
}
.shop-grid{gap:10px}
.shop-product,[data-theme="dark"] .shop-product{gap:10px;padding:17px;border:1px solid var(--line);border-radius:7px;background:var(--card)}
.shop-product strong{font-size:20px}
.shop-period-prices span{border-radius:5px}
.domain-price-grid{gap:8px}
.domain-price-choice{min-height:112px;padding:14px;border-radius:7px}
.domain-price-choice:hover{transform:none;border-color:var(--accent);box-shadow:none}
.domain-price-choice b{color:var(--accent-ink)}
.domain-price-choice.best-match{border-width:1px;box-shadow:0 0 0 1px var(--good)}
.domain-action-prices>div,.cloud-form-section,.domain-check-result,.auth-code-field{border-radius:6px}
.domain-order-steps span.active{border-color:var(--accent)}
.domain-action-prices>[data-action].selected{border-color:var(--accent);background:color-mix(in srgb,var(--card) 90%,var(--accent) 10%);box-shadow:inset 0 0 0 1px var(--accent)}
.unified-domain-order.modal-card.wide{width:min(1040px,calc(100vw - 32px))}
.unified-domain-order .cloud-form-section>.secondary{margin-top:4px}
.unified-action-prices>div.selected{border-color:var(--accent);background:color-mix(in srgb,var(--card) 90%,var(--accent) 10%);box-shadow:inset 0 0 0 1px var(--accent)}
@media(max-width:700px){
  .unified-domain-order.modal-card.wide{width:100%}
}
.package-access-form .access-users{margin-top:18px}
.package-access-form .access-search{margin-bottom:14px}
.package-access-form .access-user span{display:grid;gap:3px}
.package-access-form .access-user small{color:var(--muted)}
.customer-workspace-tools{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:18px}
.customer-workspace-tools a{display:grid;gap:4px;padding:14px 15px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);text-decoration:none;transition:border-color .16s,transform .16s,background .16s}
.customer-workspace-tools a:hover{border-color:var(--accent);transform:translateY(-1px);background:color-mix(in srgb,var(--card) 94%,var(--accent) 6%)}
.customer-workspace-tools b{font-size:14px}
.customer-workspace-tools span{color:var(--muted);font-size:11px}
.project-search{width:min(320px,100%)}
.customer-project-grid{display:grid;gap:9px;margin-top:16px}
.customer-project{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:9px;background:color-mix(in srgb,var(--card) 97%,var(--accent) 3%)}
.project-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:7px;background:color-mix(in srgb,var(--accent) 18%,var(--card));color:var(--accent-ink);font-weight:800}
.project-main>div{display:flex;align-items:center;gap:9px}
.project-main h3{margin:0;font-size:15px}
.project-main p{margin:4px 0 2px;color:var(--muted)}
.project-main small{color:var(--muted)}
.project-access{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}
.direct-customer-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px;padding:24px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:11px;background:linear-gradient(135deg,color-mix(in srgb,var(--card) 94%,var(--accent) 6%),var(--card))}
.direct-customer-hero h2{margin:4px 0 7px;font-size:25px}
.direct-customer-hero p{margin:0;color:var(--muted)}
.direct-actions{display:flex;flex-wrap:wrap;gap:8px}
.direct-actions a{padding:10px 13px;border-radius:7px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:12px}
@media(max-width:1100px){
  .customer-workspace-tools{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .customer-workspace-tools{grid-template-columns:1fr 1fr}
  .customer-project{grid-template-columns:40px minmax(0,1fr)}
  .project-access,.customer-project>.secondary{grid-column:2}
  .direct-customer-hero{align-items:flex-start;flex-direction:column}
}
.customer-project-panel{padding:22px}
.customer-project-grid{grid-template-columns:repeat(3,minmax(250px,1fr));gap:14px}
.customer-project{display:flex;min-height:178px;padding:0;overflow:hidden;border-radius:8px;background:var(--card);transition:border-color .16s,transform .16s,box-shadow .16s}
.customer-project:hover{border-color:color-mix(in srgb,var(--accent) 65%,var(--line));transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.16)}
.project-open{display:grid;grid-template-columns:48px minmax(0,1fr) 20px;align-items:center;gap:14px;width:100%;padding:20px;border:0;border-top:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer}

.project-open .project-avatar{width:48px;height:48px;border-radius:5px;font-size:18px}
.project-open .project-main{display:grid;min-width:0}
.project-title{display:flex;align-items:center;gap:8px;min-width:0}
.project-title>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.project-title .pill{font-size:9px}
.project-email{margin-top:7px;overflow:hidden;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.project-open small{margin-top:5px;color:var(--muted)}
.project-arrow{color:var(--muted);font-size:26px;font-weight:300}
.customer-project footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:11px 15px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--card) 94%,var(--bg) 6%)}
.project-number{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.04em}
.customer-project footer .project-access{gap:7px}
.customer-project footer .project-access>span{font-size:10px}
@media(max-width:1200px){
  .customer-project-grid{grid-template-columns:repeat(2,minmax(250px,1fr))}
}
@media(max-width:680px){
  .customer-project-grid{grid-template-columns:1fr}
  .customer-project{min-height:164px}
  .project-open{grid-template-columns:44px minmax(0,1fr) 18px;padding:17px}
  .project-open .project-avatar{width:44px;height:44px}
  .customer-project footer{grid-column:auto}
}
.customer-project{flex-direction:column}
.modal:has(.resource-manager){padding:18px;background:rgba(3,7,12,.82);backdrop-filter:blur(5px)}
.resource-manager.modal-card.wide{display:flex;flex-direction:column;width:min(1320px,calc(100vw - 36px));height:min(900px,calc(100dvh - 36px));max-height:calc(100dvh - 36px);padding:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:12px;background:color-mix(in srgb,var(--card) 98%,var(--bg) 2%);box-shadow:0 30px 90px rgba(0,0,0,.48)}
.resource-manager>.panel-title{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:92px;margin:0;padding:19px 24px;border:0;border-bottom:1px solid var(--line);background:var(--card)}
.resource-manager>.panel-title>div{min-width:0}
.resource-manager>.panel-title h2{margin:0;font-size:21px;letter-spacing:-.025em}
.resource-manager>.panel-title p{margin:5px 0 0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resource-manager>.panel-title .primary,.resource-manager>.panel-title .secondary{min-height:38px;padding:9px 13px;border-radius:6px;box-shadow:none;font-size:12px}
.resource-manager>.panel-title .manage-mails{background:var(--accent)}
.resource-manager>.panel-title .webmail-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap;border:1px solid var(--line);background:transparent;color:var(--ink)}
.resource-manager>.panel-title .webmail-link:hover{border-color:var(--accent);color:var(--accent-ink)}
.resource-manager .resource-body{flex:1;min-height:0;padding:22px 24px 30px;overflow-y:auto;overscroll-behavior:contain;background:color-mix(in srgb,var(--bg) 72%,var(--card) 28%)}
.resource-manager .resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px;margin:0}
.resource-manager .resource-panel{min-width:0;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--card);box-shadow:0 3px 12px rgba(0,0,0,.06)}
.resource-manager .resource-panel.full{grid-column:1/-1}
.resource-manager .resource-panel>.panel-title{display:flex;align-items:center;min-height:68px;margin:0;padding:14px 16px;border:0;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--card) 96%,var(--bg) 4%)}
.resource-manager .resource-panel>.panel-title>div{min-width:0}
.resource-manager .resource-panel h3{display:flex;align-items:center;gap:9px;margin:0;font-size:15px;letter-spacing:-.01em}
.resource-manager .resource-panel h3:before{display:grid;width:28px;height:28px;place-items:center;flex:0 0 28px;border-radius:6px;background:color-mix(in srgb,var(--accent) 13%,var(--card));color:var(--accent-ink);font-size:13px;font-weight:850}
.resource-manager .resource-panel:nth-child(1) h3:before{content:'D'}
.resource-manager .resource-panel:nth-child(2) h3:before{content:'DB'}
.resource-manager .resource-panel:nth-child(3) h3:before{content:'FTP';font-size:9px}
.resource-manager .resource-panel:nth-child(4) h3:before{content:'⌁';font-size:17px}
.resource-manager .resource-panel .tiny{margin:4px 0 0;padding-left:37px;font-size:11px}
.resource-manager .resource-panel .primary{padding:8px 11px;border-radius:6px;background:var(--accent);box-shadow:none;font-size:11px}
.resource-manager .table-wrap,.resource-manager [data-theme="dark"] .table-wrap{overflow:visible;border:0;border-radius:0}
.resource-manager table{table-layout:auto;background:transparent}
.resource-manager th{padding:9px 16px;background:transparent!important;font-size:9px}
.resource-manager td{padding:12px 16px;white-space:normal}
.resource-manager td:first-child{width:36%}
.resource-manager td:last-child{width:1%;white-space:nowrap}
.resource-manager tbody tr:last-child td{border-bottom:0}
.resource-manager tbody tr:hover{background:color-mix(in srgb,var(--card) 94%,var(--accent) 6%)}
.resource-manager .actions{justify-content:flex-end;flex-wrap:nowrap}
.resource-manager .actions button{padding:7px 10px;border-radius:5px;font-size:10px}
.resource-manager .actions .secondary{border:1px solid var(--line);background:transparent}
.resource-manager .actions .danger{border:1px solid color-mix(in srgb,var(--danger) 42%,var(--line));background:color-mix(in srgb,var(--danger) 9%,var(--card))}
.resource-manager .empty{padding:28px 16px;font-size:12px}
.resource-manager .resource-filter{max-width:420px;margin:0 0 16px}
.resource-manager .resource-filter label{margin:0}
.resource-manager .resource-filter select{background:var(--card)}
@media(max-width:820px){
  .modal:has(.resource-manager){padding:0}
  .resource-manager.modal-card.wide{width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0}
  .resource-manager>.panel-title{grid-template-columns:minmax(0,1fr) auto;min-height:78px;padding:13px 14px}
  .resource-manager>.panel-title .manage-mails{grid-column:1/-1;grid-row:2;width:100%}
  .resource-manager>.panel-title p{display:none}
  .resource-manager .resource-body{padding:14px}
  .resource-manager .resource-grid{grid-template-columns:1fr}
  .resource-manager .resource-panel.full{grid-column:auto}
  .resource-manager .resource-panel>.panel-title{align-items:flex-start}
  .resource-manager td{padding:11px}
  .resource-manager td:last-child{white-space:normal}
  .resource-manager .actions{flex-wrap:wrap}
}
.modal:has(.resource-manager){z-index:120;padding:24px}
.resource-manager.modal-card.wide{width:min(1120px,calc(100vw - 48px));height:min(760px,calc(100dvh - 48px));max-height:calc(100dvh - 48px)}
.resource-manager>.panel-title{grid-template-columns:minmax(0,1fr) auto auto auto;min-height:84px;padding:16px 22px}
.resource-manager>.panel-title h2{font-size:20px}
.resource-manager .resource-body{padding:0;background:var(--card)}
.resource-tabs{position:sticky;top:0;z-index:3;display:flex;gap:0;padding:0 20px;overflow-x:auto;border-bottom:1px solid var(--line);background:var(--card);scrollbar-width:none}
.resource-tabs::-webkit-scrollbar{display:none}
.resource-tab{display:flex;align-items:center;gap:8px;min-height:58px;padding:0 16px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-weight:700;white-space:nowrap}
.resource-tab:hover{color:var(--ink)}
.resource-tab.active{border-bottom-color:var(--accent);color:var(--ink)}
.resource-tab small{display:grid;min-width:20px;height:20px;place-items:center;padding:0 5px;border-radius:10px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--muted);font-size:10px}
.resource-tab.active small{background:color-mix(in srgb,var(--accent) 16%,var(--card));color:var(--accent-ink)}
.resource-manager .resource-grid{display:block;margin:0;padding:22px}
.resource-manager .resource-panel,.resource-manager .resource-panel.full{width:100%;grid-column:auto;border-radius:8px;box-shadow:none}
.resource-manager .resource-panel[hidden]{display:none!important}
.resource-manager .resource-panel>.panel-title{min-height:72px;padding:15px 18px}
.resource-manager .resource-panel h3{font-size:16px}
.resource-manager .resource-panel .tiny{font-size:11px}
.resource-manager .table-wrap{min-height:150px}
.resource-manager th{padding:10px 18px}
.resource-manager td{padding:14px 18px}
.resource-manager .empty{display:grid;min-height:150px;place-items:center}
@media(max-width:820px){
  .modal:has(.resource-manager){padding:0}
  .resource-manager.modal-card.wide{width:100%;height:100dvh;max-height:100dvh}
  .resource-manager>.panel-title{grid-template-columns:minmax(0,1fr) auto;min-height:72px}
  .resource-tabs{padding:0 8px}
  .resource-tab{min-height:52px;padding:0 11px}
  .resource-manager .resource-grid{padding:12px}
  .resource-manager .resource-panel>.panel-title{align-items:center}
  .resource-manager>.panel-title .manage-mails{grid-column:auto;grid-row:auto;width:auto}
}
body>.modal:has(.mail-manager){z-index:160;padding:24px}
.mail-manager.modal-card.wide{width:min(1100px,calc(100vw - 48px));height:auto;max-height:calc(100dvh - 48px);overflow:hidden}
.mail-manager>.panel-title{grid-template-columns:minmax(0,1fr) auto;min-height:82px}
.mail-manager .mail-manager-body{max-height:calc(100dvh - 154px);overflow:auto;background:var(--card)}
.mail-manager .resource-panel{border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
.mail-manager .resource-panel>.panel-title{min-height:76px;padding:15px 20px}
.mail-manager .resource-panel h3:before{content:'@';font-size:14px}
.mail-manager .table-wrap{min-height:0;overflow-x:auto}
.mail-manager table{table-layout:fixed}
.mail-manager th,.mail-manager td{padding:13px 16px;vertical-align:middle}
.mail-manager th:nth-child(1){width:31%}
.mail-manager th:nth-child(2){width:14%}
.mail-manager th:nth-child(3){width:14%}
.mail-manager th:nth-child(4){width:25%}
.mail-manager th:nth-child(5){width:16%}
.mail-manager td:nth-child(1),.mail-manager td:nth-child(4){overflow-wrap:anywhere;word-break:break-word}
.mail-manager td.actions{display:table-cell;width:auto;white-space:nowrap;text-align:right}
.mail-manager td.actions button+button{margin-left:6px}
body>.modal:has(form){z-index:240}
@media(max-width:760px){
  body>.modal:has(.mail-manager){padding:0}
  .mail-manager.modal-card.wide{width:100%;max-height:100dvh;border-radius:0}
  .mail-manager .mail-manager-body{max-height:calc(100dvh - 72px)}
  .mail-manager table,.mail-manager tbody,.mail-manager tr,.mail-manager td{display:block;width:100%!important}
  .mail-manager thead{display:none}
  .mail-manager tr{padding:13px;border-bottom:1px solid var(--line)}
  .mail-manager td{padding:4px 0;border:0}
  .mail-manager td.actions{display:flex;padding-top:10px;text-align:left}
}
.modal[data-form-title^="E-Mail-Konto"] .modal-card.wide{width:min(1060px,calc(100vw - 48px))}
.modal[data-form-title^="E-Mail-Konto"] .modal-field-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:0 12px}
.modal[data-form-title^="E-Mail-Konto"] .modal-field-grid>label:not(.check){grid-column:span 3}
.modal[data-form-title^="E-Mail-Konto"] .modal-field-grid>.check{grid-column:span 2;min-height:54px;margin:6px 0;padding:10px 12px;border-radius:7px;font-size:12px}
.modal[data-form-title^="E-Mail-Konto"] .modal-field-grid>.check:nth-child(8){grid-column:1/span 2}
.modal[data-form-title^="E-Mail-Konto"] .modal-field-grid>.check input{flex:0 0 auto}
@media(max-width:850px){
  .modal[data-form-title^="E-Mail-Konto"] .modal-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal[data-form-title^="E-Mail-Konto"] .modal-field-grid>label:not(.check),.modal[data-form-title^="E-Mail-Konto"] .modal-field-grid>.check,.modal[data-form-title^="E-Mail-Konto"] .modal-field-grid>.check:nth-child(8){grid-column:span 1}
}
@media(max-width:560px){
  .modal[data-form-title^="E-Mail-Konto"] .modal-field-grid{grid-template-columns:1fr}
  .modal[data-form-title^="E-Mail-Konto"] .modal-card.wide{width:100%}
}
.mail-manager td.actions{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.mail-manager td.actions button+button{margin-left:0}
.mail-manager .mail-icon-action{display:inline-grid;width:38px;height:38px;min-width:38px;place-items:center;padding:0;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--muted);font-size:0!important;line-height:0;text-decoration:none;transition:border-color .15s,color .15s,background .15s}
.mail-manager .mail-icon-action:before{font-size:17px;line-height:1}
.mail-manager .mail-edit-action:before{content:'✎'}
.mail-manager .mail-webmail-action:before{content:'✉'}
.mail-manager .mail-delete-action:before{content:'🗑';font-size:15px}
.mail-manager .mail-edit-action:hover,.mail-manager .mail-webmail-action:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--card));color:var(--accent-ink)}
.mail-manager .mail-delete-action:hover{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,var(--card));color:var(--danger)}
.resource-tab small.available{background:color-mix(in srgb,var(--good) 20%,var(--card));color:var(--good)}
.resource-tab small.partial{background:color-mix(in srgb,var(--warn) 20%,var(--card));color:var(--warn)}
.resource-tab small.full{background:color-mix(in srgb,var(--danger) 20%,var(--card));color:var(--danger)}
.feedback-live-count{position:relative;display:inline-grid;min-width:1.4ch;height:1.25em;place-items:center;overflow:hidden;vertical-align:middle;font-variant-numeric:tabular-nums}
.feedback-live-count>span{grid-area:1/1}
.feedback-live-count.is-changing[data-direction="up"] .count-new{animation:feedbackCountInTop .34s cubic-bezier(.2,.75,.3,1) both}
.feedback-live-count.is-changing[data-direction="up"] .count-old{animation:feedbackCountOutBottom .34s cubic-bezier(.2,.75,.3,1) both}
.feedback-live-count.is-changing[data-direction="down"] .count-new{animation:feedbackCountInBottom .34s cubic-bezier(.2,.75,.3,1) both}
.feedback-live-count.is-changing[data-direction="down"] .count-old{animation:feedbackCountOutTop .34s cubic-bezier(.2,.75,.3,1) both}
.feedback-comment.is-new{transform-origin:center bottom;animation:feedbackCommentIn .38s cubic-bezier(.18,.8,.25,1) both}
@keyframes feedbackCountInTop{from{opacity:0;transform:translateY(-115%)}to{opacity:1;transform:translateY(0)}}
@keyframes feedbackCountOutBottom{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(115%)}}
@keyframes feedbackCountInBottom{from{opacity:0;transform:translateY(115%)}to{opacity:1;transform:translateY(0)}}
@keyframes feedbackCountOutTop{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-115%)}}
@keyframes feedbackCommentIn{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){
  .feedback-live-count.is-changing .count-new,.feedback-live-count.is-changing .count-old,.feedback-comment.is-new{animation:none!important}
}
.feedback-compose .feedback-compose-body textarea[name="description"]{height:clamp(340px,40vh,420px)!important;min-height:340px!important}
@media(max-width:700px){
  .feedback-compose .feedback-compose-body textarea[name="description"]{height:300px!important;min-height:300px!important}
}
.feedback-vote.closed,.feedback-vote.closed:disabled{cursor:not-allowed;background:color-mix(in srgb,var(--ink) 3%,transparent);color:color-mix(in srgb,var(--muted) 65%,transparent);opacity:.7}
.feedback-private,.feedback-archived{padding:4px 8px;border-radius:99px;font-weight:700}
.feedback-private{background:color-mix(in srgb,var(--danger) 15%,var(--card));color:var(--danger)}
.feedback-archived{background:color-mix(in srgb,var(--muted) 15%,var(--card));color:var(--muted)}
.feedback-card.is-archived{opacity:.78}
.feedback-card-actions{display:flex;gap:8px}
.feedback-comments-modal .modal-card{width:min(820px,calc(100vw - 40px))}
.feedback-comments{display:grid;gap:10px;max-height:44vh;margin:18px 0;padding-right:4px;overflow:auto}
.feedback-comment{padding:13px 15px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--ink) 3%,var(--card))}
.feedback-comment header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.feedback-comment time{color:var(--muted);font-size:10px}
.feedback-comment p{margin:8px 0 0;color:var(--muted);line-height:1.5;white-space:pre-wrap}
.feedback-comment.is-official{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.feedback-comment.is-official header b{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 18%,var(--card));color:var(--accent-ink);font-weight:800}
.feedback-comment-form textarea{min-height:110px;resize:vertical}
@media(max-width:600px){
  .feedback-card-actions{width:100%;flex-wrap:wrap}
  .feedback-card-actions button{flex:1}
  .feedback-comments-modal{padding:0}
  .feedback-comments-modal .modal-card{width:100%;max-height:100dvh;border-radius:0}
}
.feedback-toolbar{display:grid;grid-template-columns:minmax(260px,2fr) repeat(3,minmax(150px,1fr));gap:12px;margin-bottom:18px;padding:16px;border:1px solid var(--line);border-radius:9px;background:var(--card)}
.feedback-toolbar label{margin:0}
.feedback-board{display:grid;gap:12px}
.feedback-card{display:grid;grid-template-columns:74px minmax(0,1fr);overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--card);transition:border-color .15s,transform .15s}
.feedback-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-1px)}
.feedback-vote{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;padding:23px 8px;border:0;border-right:1px solid var(--line);border-radius:0;background:color-mix(in srgb,var(--ink) 3%,transparent);color:var(--muted)}
.feedback-vote span{font-size:17px}
.feedback-vote b{font-size:18px}
.feedback-vote.selected{background:color-mix(in srgb,var(--accent) 12%,var(--card));color:var(--accent-ink)}
.feedback-card-body{padding:18px 20px}
.feedback-card-body h3{margin:8px 0 7px;font-size:17px}
.feedback-card-body>p{margin:0;color:var(--muted);line-height:1.55;white-space:pre-wrap}
.feedback-meta{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px}
.feedback-status{padding:4px 8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 8%,transparent);font-weight:700}
.feedback-status.status-planned,.feedback-status.status-in_progress{background:color-mix(in srgb,var(--warn) 17%,var(--card));color:var(--warn)}
.feedback-status.status-completed{background:color-mix(in srgb,var(--good) 17%,var(--card));color:var(--good)}
.feedback-status.status-declined{background:color-mix(in srgb,var(--danger) 15%,var(--card));color:var(--danger)}
.feedback-response{margin-top:15px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:var(--r-md);background:color-mix(in srgb,var(--accent) 7%,var(--card));color:var(--muted);white-space:pre-wrap}
.feedback-response b{display:block;margin-bottom:4px;color:var(--ink)}
.feedback-card footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;color:var(--muted);font-size:11px}
.feedback-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.feedback-pager span{color:var(--muted);font-size:12px}
@media(max-width:900px){
  .feedback-toolbar{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .feedback-toolbar{grid-template-columns:1fr}
  .feedback-card{grid-template-columns:54px minmax(0,1fr)}
  .feedback-card-body{padding:15px}
  .feedback-vote{padding:19px 5px}
  .feedback-card footer{align-items:flex-start;flex-direction:column}
}
.feedback-compose-modal{padding:28px;background:rgba(4,7,10,.78);backdrop-filter:blur(5px)}
.feedback-compose{width:min(920px,calc(100vw - 40px));max-height:calc(100dvh - 56px);overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 28px 80px rgba(0,0,0,.55)}
.feedback-compose>header{position:relative;display:grid;place-items:center;min-height:82px;padding:18px 64px;border-bottom:1px solid var(--line)}
.feedback-compose>header h2{margin:0;font-size:24px}
.feedback-compose-close{position:absolute;top:20px;right:22px;width:38px;height:38px;padding:0;border:1px solid transparent;background:transparent;color:var(--muted);font-size:27px;font-weight:300}
.feedback-compose-close:hover{border-color:var(--line);background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink)}
.feedback-compose-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:30px 22px;padding:50px 64px 34px}
.feedback-compose-body label{margin:0;color:var(--ink);font-size:15px}
.feedback-compose-body label:first-child{grid-column:1}
.feedback-compose-body label:nth-child(2){grid-column:2}
.feedback-compose-body label:last-child{grid-column:1/-1}
.feedback-compose-body input,.feedback-compose-body select,.feedback-compose-body textarea{margin-top:10px;border-radius:7px;background:color-mix(in srgb,var(--ink) 6%,var(--card));border-color:color-mix(in srgb,var(--line) 88%,var(--ink) 12%);font-size:15px}
.feedback-compose-body input{height:54px}
.feedback-compose-body select{height:54px}
.feedback-compose-body textarea{min-height:360px;resize:vertical;line-height:1.55}
.feedback-compose-body input:focus,.feedback-compose-body select:focus,.feedback-compose-body textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)}
.feedback-compose-body small{display:block;margin-top:8px;color:var(--muted);font-size:11px}
.feedback-compose>footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 64px 46px}
.feedback-compose>footer button{min-height:48px;padding-inline:24px}
@media(max-width:700px){
  .feedback-compose-modal{padding:0}
  .feedback-compose{width:100%;max-height:100dvh;min-height:100dvh;border-radius:0}
  .feedback-compose>header{min-height:68px}
  .feedback-compose>header h2{font-size:20px}
  .feedback-compose-body{grid-template-columns:1fr;gap:20px;padding:28px 20px}
  .feedback-compose-body label:first-child,.feedback-compose-body label:nth-child(2),.feedback-compose-body label:last-child{grid-column:1}
  .feedback-compose-body textarea{min-height:280px}
  .feedback-compose>footer{padding:0 20px 24px}
  .feedback-compose>footer button{flex:1;padding-inline:10px}
}
.feedback-comment-head{display:flex;align-items:center;gap:6px}
.feedback-comment-edit,.feedback-comment-delete{display:inline-grid;width:29px;height:29px;min-width:29px;place-items:center;padding:0;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--muted);font-size:14px;line-height:1}
.feedback-comment-edit:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--card));color:var(--accent-ink)}
.feedback-comment-delete:hover{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,var(--card));color:var(--danger)}
.demo-quota:has(.demo-platform-domain){grid-template-columns:minmax(150px,1fr) 90px minmax(145px,auto) auto}
.demo-platform-domain{min-height:40px!important;margin:0!important;padding:8px 10px!important}
.demo-price-summary{display:grid;grid-template-columns:1fr auto;gap:5px 18px;margin-top:16px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.demo-price-summary strong{color:var(--accent-ink);font-size:20px}
.demo-price-summary small{grid-column:1/-1;color:var(--muted)}
.demo-own-domain{margin-bottom:16px}
@media(max-width:850px){
  .demo-quota:has(.demo-platform-domain){grid-template-columns:1fr}
}
.demo-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.demo-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:20px}
.demo-settings button{grid-column:1/-1;justify-self:start}
.demo-admin-list{display:grid;gap:0}
.demo-quota,.demo-package{display:grid;grid-template-columns:minmax(190px,1fr) minmax(140px,220px) auto;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid var(--line)}
.demo-package .check,.demo-package label{margin:0}
.demo-package label:not(.check){display:grid;grid-template-columns:auto minmax(100px,150px);align-items:center;gap:9px;color:var(--muted);font-size:11px}
.demo-package input,.demo-quota input{margin:0}
.demo-list{margin-top:16px}
.demo-list .pill{margin-right:6px}
.demo-booking .notice{margin:16px 0 0}
@media(max-width:850px){
  .demo-admin-grid{grid-template-columns:1fr}
  .demo-quota,.demo-package{grid-template-columns:1fr}
  .demo-settings{grid-template-columns:1fr}
  .demo-settings button{grid-column:auto}
  .demo-package label:not(.check){grid-template-columns:1fr}
}
.domain-resource-groups{display:grid}
.domain-resource-group{border-bottom:1px solid var(--line)}
.domain-resource-group:last-child{border-bottom:0}
.domain-resource-group>summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;min-height:68px;padding:12px 18px;cursor:pointer;list-style:none}
.domain-resource-group>summary::-webkit-details-marker{display:none}
.domain-resource-group>summary:before{content:'›';grid-column:1;grid-row:1;align-self:center;width:18px;color:var(--muted);font-size:22px;transition:transform .15s}
.domain-resource-group[open]>summary:before{transform:rotate(90deg)}
.domain-resource-name{grid-column:1;grid-row:1;display:grid;gap:3px;padding-left:24px;min-width:0}
.domain-resource-name b,.domain-resource-child b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.domain-resource-name small,.domain-resource-child small{color:var(--muted);font-size:11px}
.domain-subdomain-count{padding:5px 9px;border-radius:99px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--muted);font-size:10px;font-weight:700}
.domain-resource-group>summary>.actions,.domain-resource-child>.actions{flex-wrap:nowrap}
.domain-resource-children{padding:0 18px 12px 42px;background:color-mix(in srgb,var(--card) 95%,var(--bg) 5%)}
.domain-resource-child{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;min-height:58px;padding:9px 0;border-top:1px solid var(--line)}
.domain-resource-child>span:first-child{display:grid;gap:3px;min-width:0}
.domain-resource-empty{padding:18px 0;color:var(--muted);font-size:12px}
.orphan-subdomains{padding:15px 18px;border-top:1px solid var(--line)}
.orphan-subdomains>b{display:block;margin-bottom:8px;color:var(--muted);font-size:11px;text-transform:uppercase}
@media(max-width:680px){
  .domain-resource-group>summary{grid-template-columns:minmax(0,1fr) auto;gap:9px}
  .domain-subdomain-count{grid-column:2;grid-row:1}
  .domain-resource-group>summary>.actions{grid-column:1/-1;padding-left:24px}
  .domain-resource-children{padding-left:24px}
  .domain-resource-child{grid-template-columns:1fr}
  .domain-resource-child>.actions{justify-content:flex-start}
}
.reseller-search{margin:.75rem 0;max-width:42rem}
.reseller-hosting-rules{margin-top:1.25rem;border-top:1px solid var(--border);padding-top:1.25rem}
.compact-rule-list{display:grid;gap:.55rem}
.rule-summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:.85rem 1rem;text-align:left;background:var(--surface-2);border:1px solid var(--border);border-radius:.7rem;color:inherit}
.rule-summary span{color:var(--muted);font-size:.86rem}
.reseller-period-prices{display:grid;gap:.65rem;margin:1rem 0}
.reseller-period-row{display:grid;grid-template-columns:minmax(9rem,1fr) minmax(10rem,1fr) minmax(10rem,1fr);gap:.75rem;align-items:end;padding:.8rem;background:var(--surface-2);border:1px solid var(--border);border-radius:.7rem}
.reseller-period-row div{display:grid;gap:.25rem}
.reseller-period-row small{color:var(--muted)}
.reseller-picker{display:grid;grid-template-columns:minmax(14rem,1fr) minmax(14rem,1fr);gap:.75rem;margin-bottom:1rem}
@media(max-width:760px){
  .reseller-period-row,.reseller-picker{grid-template-columns:1fr}
  .rule-summary{align-items:flex-start;flex-direction:column}
}
.service-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 16px;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--card)}
.service-overview>div{display:grid;gap:5px;padding:18px 20px;border-right:1px solid var(--line)}
.service-overview>div:last-child{border:0}
.service-overview small{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em}
.service-overview strong{font-size:25px}
.service-catalog{padding:0;overflow:hidden}
.service-catalog>.panel-title{padding:20px 22px;border-bottom:1px solid var(--line)}
.service-search{width:min(330px,100%);margin:0}
.service-resource-list{display:grid}
.service-resource{display:grid;grid-template-columns:42px minmax(230px,1.6fr) minmax(120px,.55fr) minmax(140px,.65fr) auto;align-items:center;gap:16px;min-height:82px;padding:14px 20px;border-bottom:1px solid var(--line);transition:background .15s}
.service-resource:last-child{border-bottom:0}
.service-resource:hover{background:color-mix(in srgb,var(--accent) 4%,var(--card))}
.service-resource-icon{display:grid;width:38px;height:38px;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,var(--card));color:var(--accent-ink);font-weight:800}
.service-resource-main,.service-resource-price,.service-resource-status{display:grid;gap:3px;min-width:0}
.service-resource-main span,.service-resource-main small,.service-resource-price small,.service-resource-status small{overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.service-resource-actions{display:flex;justify-content:flex-end;gap:7px}
.service-resource-actions button{white-space:nowrap}
@media(max-width:1050px){
  .service-resource{grid-template-columns:42px minmax(190px,1fr) minmax(115px,.5fr) auto}
  .service-resource-status{display:none}
}
@media(max-width:720px){
  .service-overview{grid-template-columns:1fr}
  .service-overview>div{border-right:0;border-bottom:1px solid var(--line)}
  .service-catalog>.panel-title{align-items:stretch;flex-direction:column}
  .service-search{width:100%}
  .service-resource{grid-template-columns:38px 1fr}
  .service-resource-price{grid-column:2}
  .service-resource-actions{grid-column:1/-1;justify-content:flex-start}
  .service-resource-actions button{flex:1}
}
.demo-quota:has(.demo-reseller-packages){grid-template-columns:minmax(180px,1fr) 100px minmax(150px,auto) auto}
.demo-reseller-packages{grid-column:1/-1;margin-top:4px;padding:14px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--ink) 2%,var(--card))}
.demo-reseller-packages h4{margin:0 0 10px}
.demo-reseller-package{display:grid;grid-template-columns:minmax(160px,1fr) minmax(180px,.7fr) minmax(180px,.7fr);gap:12px;align-items:end;padding:10px 0;border-top:1px solid var(--line)}
.demo-reseller-package label{display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 8px;margin:0;color:var(--muted);font-size:10px}
.demo-reseller-package input{grid-row:2;margin:0}
.demo-reseller-package small{grid-row:2}
@media(max-width:760px){
  .demo-quota:has(.demo-reseller-packages),.demo-reseller-package{grid-template-columns:1fr}
}
.service-demo-badge{display:inline-flex!important;width:max-content;margin-top:3px;padding:3px 7px;border-radius:99px;background:color-mix(in srgb,var(--accent) 14%,var(--card));color:var(--accent-ink)!important;font-size:9px!important;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.service-resource-main small b{color:var(--ink);font-weight:700}
.service-resource-actions{flex-wrap:wrap}
.keyhelp-service-state{display:inline-flex!important;width:max-content;margin-top:3px;padding:3px 7px;border:1px solid transparent;border-radius:99px;font-size:9px!important;font-weight:800;letter-spacing:.03em}
.keyhelp-service-state.pending{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn)!important}
.keyhelp-service-state.failed{border-color:var(--danger-line);background:var(--danger-bg);color:var(--danger)!important}
.keyhelp-failure-panel{border-color:var(--danger-line)}
.keyhelp-failure-panel h2{color:var(--danger)}
.keyhelp-error-text{max-width:420px;color:var(--danger);white-space:normal;word-break:break-word}
.service-timeline-modal{width:min(760px,94vw)}
.service-timeline{display:grid;padding:22px 28px 30px}
.service-timeline-item{position:relative;display:grid;grid-template-columns:22px 1fr;gap:13px;min-height:72px}
.service-timeline-item:before{position:absolute;top:18px;bottom:-4px;left:7px;width:2px;background:var(--line);content:""}
.service-timeline-item:last-child:before{display:none}
.service-timeline-item i{z-index:1;width:16px;height:16px;margin-top:3px;border:3px solid var(--card);border-radius:50%;background:#88909c}
.service-timeline-item.complete i{background:#39c98a}
.service-timeline-item.pending i{background:#efbb43}
.service-timeline-item.failed i{background:#ee6378}
.service-timeline-item>div{display:grid;gap:3px;padding-bottom:18px}
.service-timeline-item span{color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.service-timeline-item b{font-size:14px}
.service-timeline-item p{margin:2px 0 0;color:var(--muted);font-size:12px;line-height:1.45;white-space:normal;word-break:break-word}
.dashboard-customer-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}
.dashboard-customer-facts .card{display:grid;gap:7px;padding:19px}
.dashboard-customer-facts strong{font-size:24px}
.billing-audit-panel{border-color:color-mix(in srgb,#efbb43 36%,var(--line))}
.billing-audit-state{display:inline-flex;padding:4px 8px;border-radius:99px;font-size:10px;font-weight:800}
.billing-audit-state.warning{background:var(--warn-bg);color:var(--warn)}
.billing-audit-state.failed{background:var(--danger-bg);color:var(--danger)}
@media(max-width:720px){
  .dashboard-customer-facts{grid-template-columns:1fr}
}
.service-resource-header,.service-resource{grid-template-columns:42px minmax(220px,1.25fr) minmax(155px,.8fr) minmax(105px,.5fr) minmax(100px,.45fr) minmax(135px,.55fr) minmax(220px,auto)}
.service-resource-header{display:grid;gap:16px;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--card-2);color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.service-resource-project{min-width:0}
.service-resource-project b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.service-resource-provider{min-width:0}
@media(max-width:1200px){
  .service-resource-list{overflow-x:auto}
  .service-resource-header,.service-resource{min-width:1080px}
}
.service-resource-header,.service-resource{grid-template-columns:42px minmax(220px,1.25fr) minmax(155px,.8fr) minmax(105px,.5fr) minmax(100px,.45fr) minmax(135px,.55fr) minmax(130px,auto)}
.service-resource-actions{flex-wrap:nowrap;min-width:130px}
.service-resource-actions button{flex:0 0 auto}
.service-action-menu{position:relative;margin-left:auto}
.service-action-menu>summary{display:flex;align-items:center;justify-content:center;gap:8px;min-width:118px;padding:10px 14px;border:1px solid var(--line);border-radius:7px;background:var(--card-2);color:var(--ink);font-weight:800;cursor:pointer;list-style:none}
.service-action-menu>summary::-webkit-details-marker{display:none}
.service-action-menu>summary:after{content:'⌄';color:var(--muted);font-size:12px}
.service-action-menu[open]>summary{border-color:var(--accent);color:var(--accent-ink)}
.service-action-menu-items{position:absolute;z-index:100;top:calc(100% + 7px);right:0;display:grid;min-width:190px;padding:7px;border:1px solid var(--line);border-radius:9px;background:var(--card);box-shadow:0 14px 40px rgba(0,0,0,.28)}
.service-action-menu-items.service-action-menu-portal{position:fixed;z-index:10000;margin:0}
.service-action-menu-items button{width:100%;border-radius:6px;text-align:left}
.service-action-menu-items .danger{margin-top:4px}
.service-catalog:has(.service-action-menu[open]){position:relative;z-index:40;overflow:visible}
.service-resource-list:has(.service-action-menu[open]){position:relative;z-index:41;overflow:visible}
.service-resource:has(.service-action-menu[open]){position:relative;z-index:42;overflow:visible;background:var(--card)}
@media(max-width:1200px){
  .service-action-menu{margin-left:0}
  .service-action-menu-items{right:auto;left:0}
  .service-resource-actions:has(.service-action-menu){display:block}
}
@media(max-width:1200px){
  .service-resource-list{overflow:visible}
  .service-resource-header{display:none}
  .service-resource{min-width:0;grid-template-columns:42px minmax(190px,1.4fr) minmax(140px,.8fr) minmax(105px,.55fr);gap:12px 16px;padding:16px 18px}
  .service-resource-main{grid-column:2}
  .service-resource-project{grid-column:3}
  .service-resource-provider{grid-column:4}
  .service-resource-price{grid-column:2}
  .service-resource-status{display:grid;grid-column:3/5}
  .service-resource-actions{grid-column:1/-1;min-width:0;justify-content:flex-start;flex-wrap:wrap;padding-top:2px}
  .service-resource-actions button{flex:0 1 auto}
  .service-resource-project:before,.service-resource-provider:before,.service-resource-price:before,.service-resource-status:before{display:block;margin-bottom:3px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
  .service-resource-project:before{content:'Kunde / Projekt'}
  .service-resource-provider:before{content:'Provider'}
  .service-resource-price:before{content:'Preis'}
  .service-resource-status:before{content:'Status'}
}
@media(max-width:720px){
  .service-overview{grid-template-columns:repeat(3,minmax(0,1fr))}
  .service-overview>div{padding:12px 10px;border-right:1px solid var(--line);border-bottom:0}
  .service-overview small{font-size:8px}
  .service-overview strong{font-size:20px}
  .service-resource{grid-template-columns:38px minmax(0,1fr) minmax(90px,.6fr);gap:12px;padding:15px 14px}
  .service-resource-icon{grid-row:1;grid-column:1}
  .service-resource-main{grid-row:1;grid-column:2/4}
  .service-resource-project{grid-column:1/3;padding-left:50px}
  .service-resource-provider{grid-column:3}
  .service-resource-price{grid-column:1/3;padding-left:50px}
  .service-resource-status{grid-column:3}
  .service-resource-main span,.service-resource-main small{white-space:normal;overflow:visible;text-overflow:clip}
  .service-resource-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .service-resource-actions button{width:100%;min-width:0;padding:10px 9px;white-space:normal}
}
@media(max-width:460px){
  .service-resource{grid-template-columns:38px minmax(0,1fr)}
  .service-resource-main{grid-column:2}
  .service-resource-project,.service-resource-provider,.service-resource-price,.service-resource-status{grid-column:1/-1;padding-left:50px}
  .service-resource-actions{grid-template-columns:1fr 1fr;padding-left:0}
}
.dashboard-action-needed{margin-top:18px}
.dashboard-action-needed .cards{margin:0}
.dashboard-action-needed .card{text-decoration:none;color:inherit;transition:border-color .18s ease,transform .18s ease}
.dashboard-action-needed .card:hover{transform:translateY(-2px);border-color:var(--primary)}
.dashboard-action-needed .card.needs-attention{border-color:rgba(233,162,59,.48);background:linear-gradient(145deg,rgba(233,162,59,.1),var(--panel))}
.ftp-connection-info{display:flex;align-items:center;justify-content:space-between;gap:20px}
.ftp-connection-info>div:first-child{display:grid;gap:4px}
.ftp-connection-info small{display:block;color:var(--muted)}
.ftp-connection-fields{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.ftp-connection-fields span{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.12)}
.icon-copy{width:28px;height:28px;padding:0;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:7px;background:transparent;color:inherit;cursor:pointer}
.icon-copy:hover{border-color:var(--primary);color:var(--primary)}
.ftp-user-copy{margin-left:8px;vertical-align:middle}
@media(max-width:800px){
  .ftp-connection-info{align-items:flex-start;flex-direction:column}
  .ftp-connection-fields{justify-content:flex-start}
}
.domain-detail{width:min(1080px,calc(100vw - 36px));max-height:calc(100dvh - 36px);overflow:auto}
.domain-detail-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:20px 0;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--line)}
.domain-detail-summary>div{display:grid;gap:6px;min-height:82px;padding:15px 17px;background:var(--card)}
.domain-detail-summary small,.domain-detail-head p,.domain-zone-state span{color:var(--muted);font-size:11px}
.domain-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.domain-detail-grid>section{min-width:0;padding:18px;border:1px solid var(--line);border-radius:9px;background:color-mix(in srgb,var(--ink) 2%,var(--card))}
.domain-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.domain-detail-head h3,.domain-detail-head p{margin:0}
.domain-detail-head p{margin-top:5px}
.domain-detail-list{display:flex;flex-wrap:wrap;gap:8px}
.domain-detail-list code,.domain-handle-list code{padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card)}
.domain-zone-state{display:grid;gap:5px;padding:12px;border:1px solid var(--line);border-radius:7px;background:var(--card)}
.domain-handle-list{display:grid;gap:8px}
.domain-handle-list>div{display:grid;grid-template-columns:90px minmax(100px,1fr) auto;align-items:center;gap:9px}
.domain-handle-list span{color:var(--muted);font-size:11px}
@media(max-width:760px){
  .domain-detail-summary,.domain-detail-grid{grid-template-columns:1fr}
  .domain-handle-list>div{grid-template-columns:1fr}
  .domain-detail-head{align-items:stretch;flex-direction:column}
}
.mail-relay-panel{grid-column:1/-1}
.mail-relay-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.mail-relay-facts>div{display:grid;gap:5px;padding:11px;border:1px solid var(--line);border-radius:7px;background:var(--card)}
.mail-relay-facts small{color:var(--muted);font-size:10px}
.mail-relay-facts code{overflow-wrap:anywhere}
.mail-relay-records{display:grid;gap:7px}
.mail-relay-records>div{display:grid;grid-template-columns:56px minmax(130px,.45fr) minmax(220px,1fr);align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:7px;background:var(--card)}
.mail-relay-records span{font-size:10px;font-weight:800;color:var(--accent-ink)}
.mail-relay-records code{overflow-wrap:anywhere}
@media(max-width:760px){
  .mail-relay-facts{grid-template-columns:1fr 1fr}
  .mail-relay-records>div{grid-template-columns:45px 1fr}
  .mail-relay-records>div code:last-child{grid-column:1/-1}
}
@media(max-width:460px){
  .mail-relay-facts{grid-template-columns:1fr}
}
.webspace-detail-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-bottom:16px;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--line)}
.webspace-detail-overview>div{display:grid;gap:5px;min-height:90px;padding:16px 18px;background:var(--card)}
.webspace-detail-overview small{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.webspace-detail-overview b{font-size:18px}
.webspace-detail-overview span{color:var(--muted);font-size:11px}
@media(max-width:800px){
  .webspace-detail-overview{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .webspace-detail-overview{grid-template-columns:1fr}
}
.webspace-backups{margin-bottom:16px}
.webspace-backups>.panel-title{padding:16px 18px}
.webspace-backups>.notice{margin:0 18px 18px}
.webspace-detail-overview{grid-template-columns:repeat(3,minmax(0,1fr))}
.webspace-backups{display:none}
.ssl-domain-state{display:inline-flex!important;width:max-content;margin-top:4px;padding:3px 7px;border-radius:99px;font-size:9px!important;font-weight:800}
.ssl-domain-state.active{background:color-mix(in srgb,var(--good) 15%,var(--card));color:var(--good)!important}
.ssl-domain-state.inactive{background:color-mix(in srgb,var(--warn) 14%,var(--card));color:var(--warn)!important}
.ssl-toggle{white-space:nowrap}
.webspace-detail-overview .php-settings{margin-top:.65rem;width:max-content}
.php-package-lock{display:grid;gap:.3rem;margin:0 0 1rem;padding:.85rem 1rem;border:1px solid rgba(124,113,255,.28);border-radius:12px;background:rgba(124,113,255,.08)}
.php-package-lock span{color:var(--muted);font-size:.82rem;overflow-wrap:anywhere}
.keyhelp-pending-change{display:flex;align-items:center;gap:.8rem;margin:12px 20px 0;padding:.8rem 1rem;border:1px solid color-mix(in srgb,var(--warn) 38%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--warn) 10%,var(--card));color:var(--ink)}
.keyhelp-pending-change div{display:grid;gap:.15rem}
.keyhelp-pending-change small{color:var(--muted)}
.keyhelp-pending-spinner{width:18px;height:18px;flex:0 0 18px;border:2px solid color-mix(in srgb,var(--warn) 30%,transparent);border-top-color:var(--warn);border-radius:50%;animation:keyhelp-pending-spin .8s linear infinite}
@keyframes keyhelp-pending-spin{to{transform:rotate(360deg)}}
.keyhelp-change-list{padding:18px}
.keyhelp-change-list td:nth-child(2){display:grid;gap:.2rem}
.keyhelp-change-list td:nth-child(2) small{color:var(--muted)}
@media(max-width:720px){
  .service-resource-actions:has(.service-action-menu){display:block}
  .service-action-menu,.service-action-menu>summary{width:100%}
  .service-action-menu-items{position:static;width:100%;margin-top:7px;box-shadow:none}
  .service-action-menu-items button{text-align:center}
}
.api-docs-intro{display:grid;grid-template-columns:1.25fr 1.25fr .7fr;gap:1px;padding:0;overflow:hidden;background:var(--line)}
.api-docs-intro>div{display:grid;gap:7px;padding:17px 19px;background:var(--card)}
.api-docs-intro small{color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.api-docs-intro code{overflow-wrap:anywhere}
.api-docs-guide ol{padding-left:22px}
.api-docs-guide li{margin:7px 0}
.api-docs-guide pre,.api-endpoint-body pre{margin:14px 0 0;padding:16px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:#090e16;color:#dce7f8;font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
.api-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:15px 0}
.api-status-grid span{padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--card-2);font-size:11px}
.api-doc-search{width:min(360px,100%);margin:0}
.api-doc-filters{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 14px}
.api-doc-filters button{padding:7px 10px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--muted);font-weight:700}
.api-doc-filters button.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--card));color:var(--accent-ink)}
.api-endpoint-list{display:grid;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.api-endpoint{border-bottom:1px solid var(--line)}
.api-endpoint:last-child{border-bottom:0}
.api-endpoint>summary{display:grid;grid-template-columns:62px minmax(260px,1fr) minmax(230px,1fr) auto;align-items:center;gap:13px;padding:13px 15px;cursor:pointer;list-style:none}
.api-endpoint>summary::-webkit-details-marker{display:none}
.api-endpoint[open]>summary{background:color-mix(in srgb,var(--accent) 6%,var(--card))}
.api-endpoint>summary>span:nth-of-type(2){font-size:12px}
.api-endpoint>summary>small{color:var(--muted);font:10px ui-monospace,monospace}
.api-method{display:inline-grid;place-items:center;width:58px;padding:5px;border-radius:5px;font-size:10px;font-weight:900}
.api-method.get{background:var(--good-bg);color:var(--good)}
.api-method.post{background:var(--accent-soft);color:var(--accent-ink)}
.api-endpoint-body{padding:16px 18px 18px;border-top:1px solid var(--line);background:var(--card-2)}
.api-endpoint-meta{display:flex;flex-wrap:wrap;gap:12px 24px;color:var(--muted);font-size:11px}
.api-code-head{display:flex;align-items:center;justify-content:space-between;margin-top:15px}
.api-code-head .secondary{padding:7px 10px}
@media(max-width:800px){
  .api-docs-intro,.api-status-grid{grid-template-columns:1fr}
  .api-endpoint>summary{grid-template-columns:62px minmax(0,1fr)}
  .api-endpoint>summary>span:nth-of-type(2),.api-endpoint>summary>small{grid-column:2}
  .api-doc-search{width:100%}
}
.api-key-modal .modal-card{width:min(920px,calc(100vw - 32px))}
.api-key-basics{align-items:start}
.api-key-basics label{margin-top:8px}
.api-key-basics textarea{min-height:92px;resize:vertical}
.api-key-basics small{color:var(--muted);font-weight:500}
.api-permission-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:12px 0}
.api-permission-heading h3,.api-permission-heading p{margin:0}
.api-full-access{min-width:270px;margin:0;padding:11px 13px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.api-permission-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.api-permission-grid fieldset{display:grid;align-content:start;gap:4px;min-width:0;margin:0;padding:12px;border:1px solid var(--line);border-radius:9px}
.api-permission-grid legend{padding:0 5px;color:var(--ink);font-size:12px;font-weight:800}
.api-permission-grid .check{align-items:flex-start;margin:0;padding:8px;border-radius:7px}
.api-permission-grid .check:hover{background:var(--card-2)}
.api-permission-grid .check span{display:grid;min-width:0}
.api-permission-grid .check small,.api-full-access small{color:var(--muted);font:9px/1.4 ui-monospace,monospace;overflow-wrap:anywhere}
.api-permission-grid .check.disabled{opacity:.4}
.api-key-warning{margin:15px 0 0}
@media(max-width:800px){
  .api-key-basics,.api-permission-grid{grid-template-columns:1fr 1fr}
  .api-permission-heading{align-items:stretch;flex-direction:column}
  .api-full-access{min-width:0}
}
@media(max-width:520px){
  .api-key-basics,.api-permission-grid{grid-template-columns:1fr}
  .api-key-modal .modal-card{width:calc(100vw - 18px);padding:18px}
}

/* --- product lists, admin overview, impersonation --- */
.shop-product,.domain-price-choice,.cloud-form-section,.domain-check-result,.auth-code-field{border-radius:var(--r-md)!important}
.domain-price-choice:hover{border-color:var(--accent);box-shadow:none}
.domain-order-steps span.active{border-color:var(--accent)}
.domain-price-choice:hover{border-color:var(--accent)}
[data-workspace="admin"] #navigation>a[href="#feedback"]{display:flex}
.admin-overview-metrics .card{color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.admin-overview-metrics .card:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));transform:translateY(-1px)}
.admin-overview-grid{align-items:stretch}
.admin-work-queue{display:grid}
.admin-work-queue>a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px 3px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.admin-work-queue>a:first-child{border-top:0}
.admin-work-queue>a:hover b{color:var(--accent-ink)}
.admin-work-queue small{display:block;margin-top:3px;color:var(--muted)}
.queue-icon{display:grid;width:31px;height:31px;place-items:center;border-radius:7px;background:color-mix(in srgb,var(--accent) 14%,var(--card));color:var(--accent-ink);font-weight:850}
.admin-health{display:grid;gap:8px}
.admin-health a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:7px;color:var(--ink);text-decoration:none}
.admin-health a:hover{border-color:var(--accent)}
.admin-health span{color:var(--muted);font-size:12px}
.admin-health b{font-size:12px}
@media(max-width:700px){
  .admin-overview-grid{grid-template-columns:1fr}
}
.admin-stat-section{margin:22px 0}
.admin-stat-section>h2{margin:0 0 12px;font-size:17px}
.admin-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.admin-stat{display:grid;gap:3px;min-height:112px;padding:17px 18px;border:1px solid transparent;border-radius:9px;color:var(--ink);text-decoration:none;transition:transform .15s,filter .15s}
.admin-stat:hover{transform:translateY(-2px);filter:brightness(1.03)}
.admin-stat strong{font-size:26px;line-height:1}
.admin-stat span{font-size:14px;font-weight:700}
.admin-stat small{margin-top:auto;color:var(--muted)}
.admin-stat.good{background:var(--good-bg)}
.admin-stat.info{background:var(--info-bg)}
.admin-stat.warn{background:var(--warn-bg)}
.admin-stat.danger{background:var(--danger-bg)}
.admin-chart-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.pie-layout{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:24px;padding:8px}
.pie-chart{display:grid;width:150px;height:150px;place-items:center;border-radius:50%;background:var(--pie);position:relative}
.pie-chart:after{content:'';position:absolute;width:88px;height:88px;border-radius:50%;background:var(--card)}
.pie-chart>span{position:relative;z-index:1;display:grid;text-align:center}
.pie-chart b{font-size:25px}
.pie-chart small{color:var(--muted)}
.pie-legend{display:grid;gap:10px}
.pie-legend>div{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:9px;font-size:12px}
.pie-legend i{width:9px;height:9px;border-radius:3px;background:var(--legend)}
.status-bars{display:grid;gap:15px;padding:7px 2px}
.status-bars>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;color:var(--muted);font-size:12px}
.status-bars b{color:var(--ink)}
.status-bars i{grid-column:1/-1;height:7px;overflow:hidden;border-radius:7px;background:color-mix(in srgb,var(--line) 75%,transparent)}
.status-bars em{display:block;height:100%;min-width:2px;border-radius:7px;background:var(--good)}
.status-bars em.warning{background:#e9a23b}
.status-bars em.info{background:#4aa8e8}
.status-bars em.danger{background:var(--danger)}
.booked-products{margin-bottom:14px}
@media(max-width:1050px){
  .admin-stat-grid{grid-template-columns:repeat(2,1fr)}
  .admin-chart-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .admin-stat-grid{grid-template-columns:1fr}
  .pie-layout{grid-template-columns:1fr}
  .pie-chart{margin:auto}
}
.package-toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}
.package-toolbar label,.catalog-category-filter{width:min(320px,100%)}
.package-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.package-order-actions{display:inline-flex;gap:4px;margin-right:2px}
.package-order-actions button{min-width:38px;padding-inline:10px;font-size:18px;line-height:1}
.package-order-actions button:disabled{opacity:.3;cursor:not-allowed}
.package-category{margin-left:6px;background:var(--accent-soft);color:var(--accent-ink)}
.catalog-category-filter{display:block;margin:12px 0}
.package[hidden],.shop-product[hidden]{display:none!important}
@media(max-width:620px){
  .package-toolbar{display:grid}
  .package-actions>*{flex:1}
  .package-order-actions{flex:0 0 auto}
}
.hetzner-product-list.shop-grid,.hetzner-product-list.package-grid{display:flex;grid-template-columns:none;flex-direction:column;gap:10px;margin-top:14px}
.hetzner-product-list.package-grid>.package{width:100%;max-width:none}
.hetzner-product-head{display:grid;grid-template-columns:minmax(190px,1.45fr) repeat(4,minmax(95px,.72fr)) minmax(150px,.9fr) 132px;gap:18px;align-items:center;padding:0 20px 4px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.hetzner-product-list .shop-product,.hetzner-product-list [data-theme="dark"] .shop-product{display:grid;grid-template-columns:minmax(190px,1.45fr) repeat(4,minmax(95px,.72fr)) minmax(150px,.9fr) 132px;grid-template-rows:auto auto;gap:3px 18px;align-items:center;min-height:78px;padding:14px 20px;border:1px solid var(--line);border-radius:9px!important;background:color-mix(in srgb,var(--card) 93%,#fff 7%);box-shadow:none;cursor:pointer;overflow:visible;transition:border-color .15s,background .15s,box-shadow .15s}
[data-theme="dark"] .hetzner-product-list .shop-product{background:var(--surface-2)}
.hetzner-product-list .shop-product:before{display:none}
.hetzner-product-list .shop-product:hover{border-color:color-mix(in srgb,var(--accent) 48%,var(--line));background:color-mix(in srgb,var(--card) 88%,#fff 12%)}
[data-theme="dark"] .hetzner-product-list .shop-product:hover{background:var(--surface-hover)}
.hetzner-product-list .shop-product.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.hetzner-product-list .shop-product.selected:after{content:"✓";position:absolute;left:-11px;top:-11px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900}
.hetzner-product-list .shop-product h3{grid-column:1;grid-row:1;margin:0;font-size:17px;line-height:1.25}
.hetzner-product-list .shop-product>.pill{grid-column:1;grid-row:2;justify-self:start;margin:2px 5px 0 0;padding:2px 7px;font-size:10px}
.hetzner-product-list .shop-product>.pill:not(.package-category){display:none}
.hetzner-product-list .shop-product>.package-category{margin-left:0}
.hetzner-product-specs{display:contents}
.hetzner-product-specs>span{grid-row:1 / span 2;display:flex;align-items:center;color:var(--ink);font-size:15px}
.hetzner-product-specs>span:nth-child(1){grid-column:2}
.hetzner-product-specs>span:nth-child(2){grid-column:3}
.hetzner-product-specs>span:nth-child(3){grid-column:4}
.hetzner-product-specs>span:nth-child(4){grid-column:5}
.hetzner-product-price{grid-column:6;grid-row:1 / span 2;justify-self:end;color:var(--accent-ink);font-size:18px!important;white-space:nowrap}
.hetzner-product-periods{display:none!important}
.hetzner-product-list .add-shop-package{grid-column:7;grid-row:1 / span 2;width:100%;margin:0;padding:10px 12px;opacity:.86}
.hetzner-product-list .shop-product.selected .add-shop-package,.hetzner-product-list .shop-product:hover .add-shop-package{opacity:1}
@media(max-width:1050px){
  .hetzner-product-head{display:none}
  .hetzner-product-list .shop-product,.hetzner-product-list [data-theme="dark"] .shop-product{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;padding:17px}
  .hetzner-product-list .shop-product h3{grid-column:1;grid-row:1}
  .hetzner-product-list .shop-product>.pill{grid-column:1;grid-row:2}
  .hetzner-product-list .shop-product>.package-category{margin-left:0}
  .hetzner-product-specs{grid-column:1 / -1;grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
  .hetzner-product-specs>span,.hetzner-product-specs>span:nth-child(n){grid-column:auto;grid-row:auto;display:grid;gap:3px;padding:9px;border:1px solid var(--line);border-radius:6px}
  .hetzner-product-specs>span:before{content:attr(data-label);color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase}
  .hetzner-product-price{grid-column:2;grid-row:1 / span 2}
  .hetzner-product-list .add-shop-package{grid-column:1 / -1;grid-row:4;margin-top:10px}
}
@media(max-width:620px){
  .package-toolbar{display:grid}
  .package-actions>*{flex:1}
  .package-order-actions{flex:0 0 auto}
  .hetzner-product-list .shop-product,.hetzner-product-list [data-theme="dark"] .shop-product{grid-template-columns:1fr}
  .hetzner-product-price{grid-column:1;grid-row:3;justify-self:start;margin-top:8px}
  .hetzner-product-specs{grid-column:1;grid-row:4;grid-template-columns:1fr 1fr}
  .hetzner-product-list .add-shop-package{grid-column:1;grid-row:5}
}
.view-preparing{visibility:hidden;min-height:520px}
.hetzner-product-head{grid-template-columns:minmax(160px,1.25fr) repeat(4,minmax(72px,.62fr)) repeat(4,minmax(80px,.72fr)) 132px;gap:10px}
.hetzner-product-list .shop-product,.hetzner-product-list [data-theme="dark"] .shop-product{grid-template-columns:minmax(160px,1.25fr) repeat(4,minmax(72px,.62fr)) repeat(4,minmax(80px,.72fr)) 132px;gap:3px 10px}
.hetzner-all-prices{display:contents}
.hetzner-all-prices>span{grid-row:1 / span 2;display:flex;align-items:center;justify-content:flex-end;color:var(--accent-ink);font-size:15px;white-space:nowrap}
.hetzner-all-prices>span:nth-child(1){grid-column:6}
.hetzner-all-prices>span:nth-child(2){grid-column:7}
.hetzner-all-prices>span:nth-child(3){grid-column:8}
.hetzner-all-prices>span:nth-child(4){grid-column:9}
.hetzner-product-list .add-shop-package{grid-column:10}
.admin-package-list .package-actions{grid-column:10;grid-row:1 / span 2;display:flex;justify-content:flex-end;margin:0}
.admin-package-list .package-actions .secondary,.admin-package-list .package-actions .primary{width:auto;margin:0;padding:8px 10px;font-size:12px}
.admin-package-list .package-actions .deploy-package{flex-basis:100%}
.admin-package-list .package>.pill:not(.package-category){display:none}
.admin-package-list .package-category{grid-column:1;grid-row:2;justify-self:start;margin:2px 0 0}
.admin-package-list .package h3{grid-column:1;grid-row:1}
@container view (min-width:1300px){
  .admin-package-head,.admin-package-list .shop-product{grid-template-columns:minmax(150px,1.1fr) repeat(4,minmax(70px,.55fr)) repeat(4,minmax(82px,.65fr)) minmax(360px,2.5fr)}
}
@container view (max-width:1099px){
  .hetzner-product-head{display:none}
  .hetzner-product-list .shop-product,.hetzner-product-list [data-theme="dark"] .shop-product{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;padding:17px}
  .hetzner-product-list .shop-product h3,.admin-package-list .package h3{grid-column:1;grid-row:1}
  .hetzner-product-list .shop-product>.pill,.admin-package-list .package-category{grid-column:1;grid-row:2}
  .hetzner-product-specs{grid-column:1 / -1;grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
  .hetzner-product-specs>span,.hetzner-product-specs>span:nth-child(n){grid-column:auto;grid-row:auto;display:grid;gap:3px;padding:9px;border:1px solid var(--line);border-radius:6px}
  .hetzner-product-specs>span:before{content:attr(data-label);color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase}
  .hetzner-all-prices{grid-column:1 / -1;grid-row:4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .hetzner-all-prices>span,.hetzner-all-prices>span:nth-child(n){grid-column:auto;grid-row:auto;display:grid;gap:3px;justify-content:stretch;padding:9px;border:1px solid var(--line);border-radius:6px}
  .hetzner-all-prices>span:before{content:attr(data-label);color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase}
  .hetzner-product-list .add-shop-package{grid-column:1 / -1;grid-row:5}
  .admin-package-list .package-actions{grid-column:1 / -1;grid-row:5;justify-content:flex-start;margin-top:8px}
}
@container view (min-width:1100px) and (max-width:1299px){
  .admin-package-head{display:none}
  .hetzner-product-list.admin-package-list .shop-product,.hetzner-product-list.admin-package-list [data-theme="dark"] .shop-product{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;padding:17px}
  .hetzner-product-list.admin-package-list .shop-product h3,.admin-package-list .package h3{grid-column:1;grid-row:1}
  .hetzner-product-list.admin-package-list .shop-product>.pill,.admin-package-list .package-category{grid-column:1;grid-row:2}
  .admin-package-list .hetzner-product-specs{grid-column:1 / -1;grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
  .admin-package-list .hetzner-product-specs>span,.admin-package-list .hetzner-product-specs>span:nth-child(n){grid-column:auto;grid-row:auto;display:grid;gap:3px;padding:9px;border:1px solid var(--line);border-radius:6px}
  .admin-package-list .hetzner-product-specs>span:before{content:attr(data-label);color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase}
  .admin-package-list .hetzner-all-prices{grid-column:1 / -1;grid-row:4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .admin-package-list .hetzner-all-prices>span,.admin-package-list .hetzner-all-prices>span:nth-child(n){grid-column:auto;grid-row:auto;display:grid;gap:3px;justify-content:stretch;padding:9px;border:1px solid var(--line);border-radius:6px}
  .admin-package-list .hetzner-all-prices>span:before{content:attr(data-label);color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase}
  .hetzner-product-list.admin-package-list .add-shop-package{grid-column:1 / -1;grid-row:5}
  .admin-package-list .package-actions{grid-column:1 / -1;grid-row:5;justify-content:flex-start;margin-top:8px}
}
@media(max-width:620px){
  .hetzner-product-specs,.hetzner-all-prices{grid-template-columns:1fr 1fr}
  .hetzner-product-list .shop-product,.hetzner-product-list [data-theme="dark"] .shop-product{grid-template-columns:1fr}
  .hetzner-product-specs{grid-row:3}
  .hetzner-all-prices{grid-row:4}
  .hetzner-product-list .add-shop-package,.admin-package-list .package-actions{grid-column:1;grid-row:5}
}
.impersonation-banner{position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 24px;background:#362b12;border-bottom:1px solid #8c6a1d;color:#ffe5a3}
.impersonation-banner[hidden]{display:none}
.impersonation-banner div{display:flex;align-items:center;gap:12px}
.impersonation-banner span{color:#f3d58d}
.impersonation-banner button{margin:0;width:auto;padding:8px 13px;background:#554218;border-color:#9b7927;color:#fff4d4}
@media(max-width:620px){
  .impersonation-banner{align-items:flex-start;padding:10px 14px}
  .impersonation-banner div{display:grid;gap:2px}
}
.impersonation-controls{display:flex;align-items:center;gap:9px;margin-right:4px}
.impersonation-controls[hidden]{display:none}
.impersonation-status{display:flex;align-items:center;gap:7px;min-width:0;padding:7px 10px;border:1px solid #8c6a1d;border-radius:9px;background:#362b12;color:#ffe5a3;font-size:12px}
.impersonation-status>span{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f3d58d}
.impersonation-controls button{width:auto;margin:0;padding:8px 11px;white-space:nowrap;background:#554218;border-color:#9b7927;color:#fff4d4}
@media(max-width:900px){
  .impersonation-status b{display:none}
  .impersonation-status>span{max-width:105px}
  .impersonation-controls button{font-size:0}
  .impersonation-controls button:after{content:'Admin';font-size:12px}
}
@media(max-width:620px){
  .impersonation-status{display:none}
}
#content>.shop-grid,#content>.hetzner-product-list{content-visibility:auto;contain-intrinsic-size:auto 420px}
@media print{
  #content>.shop-grid,#content>.hetzner-product-list{content-visibility:visible}
}


/* ---------- 8  Polish ---------- */

/* spacing between stacked blocks */
:is(.panel, .table-wrap, .dashboard-hero, .cards, .notice, .callout, .toolbar, .admin-attention) + .cards { margin-top: 16px; }

/* denser controls inside tables and action rows */
td .primary, td .secondary, td .danger, .actions .primary, .actions .secondary, .actions .danger {
  min-height: 32px;
  padding: 5px 12px;
  font-size: 13px;
}

/* status pills: one colour language everywhere (class comes straight from the API status) */
.pill:is(.active, .paid, .completed, .complete, .succeeded, .success, .online, .running, .available, .approved, .resolved, .done, .ok, .healthy, .verified, .delivered, .confirmed) {
  background: var(--good-bg); border-color: var(--good-line); color: var(--good);
}
.pill:is(.pending, .checkout, .processing, .waiting, .review, .scheduled, .trial, .provisioning, .in_progress, .draft, .requested, .partial, .partially_paid, .pending_cancellation, .cancelling) {
  background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn);
}
.pill:is(.failed, .suspended, .cancelled, .canceled, .rejected, .error, .overdue, .expired, .blocked, .past_due, .declined, .deleted, .offline, .terminated, .unpaid, .critical) {
  background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger);
}
.pill:is(.new, .sent, .issued, .open, .in_review) {
  background: var(--info-bg); border-color: var(--info-line); color: var(--info);
}
.pill:is(.active, .paid, .completed, .complete, .succeeded, .success, .online, .running, .available, .approved, .resolved, .done, .ok, .healthy, .verified, .delivered, .confirmed, .pending, .checkout, .processing, .waiting, .review, .scheduled, .trial, .provisioning, .in_progress, .draft, .requested, .partial, .partially_paid, .pending_cancellation, .cancelling, .failed, .suspended, .cancelled, .canceled, .rejected, .error, .overdue, .expired, .blocked, .past_due, .declined, .deleted, .offline, .terminated, .unpaid, .critical, .new, .sent, .issued, .open, .in_review)::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* card-like feature surfaces share one skin */
.package, .subcard, .provider, .period, .check, .fee-rule-column, .review-item, .timeline-row, .ticket-properties,
.analytics-summary > div, .metric-charts > div, .service-bundle, .billing-price, .domain-action-price, .domain-action-prices > div,
.service-builder .builder-section, .customer-workspace-tools a, .shop-product, .domain-price-choice, .cloud-form-section {
  border-color: var(--line);
  background: var(--card);
}
.package { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); backdrop-filter: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.package:hover { transform: none; border-color: var(--line-strong); box-shadow: var(--shadow); }
.subcard, .provider, .period, .check { background: var(--surface-2); border-radius: var(--r-md); }
.provider-logo { background: var(--accent-soft); border: 1px solid var(--line); color: var(--accent-ink); }
.admin-stat { border-color: var(--line); color: var(--ink); }
.card small, .subcard small { text-transform: none; letter-spacing: 0; }

/* the shared form pieces of older dialogs */
.modal input:not([type="checkbox"], [type="radio"]), .modal select, .modal textarea { background: var(--field); }

/* motion: respect the OS setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* print: content only */
@media print {
  aside, main > header, .toast, .withdrawal-launcher, .auth-legal { display: none !important; }
  .app { display: block; }
  .content { max-width: none; padding: 0; }
  :root, [data-theme="dark"] { --bg: Canvas; --card: Canvas; --surface-2: Canvas; --ink: CanvasText; --ink-2: CanvasText; --muted: GrayText; --line: GrayText; }
  body, .card, .panel { box-shadow: none; }
  #content > section.panel, #content > .panel, #content > .table-wrap, #content > .shop-grid, #content > .hetzner-product-list { content-visibility: visible; }
}

/* form grids: one rhythm instead of label margin + grid gap */
.grid2, .grid3, .grid4, .modal-field-grid { gap: 14px 16px; }
:is(.grid2, .grid3, .grid4, .modal-field-grid) > label { margin: 0; }
.modal label { margin: 12px 0; }
.panel + .admin-attention { margin-top: 16px; }

/* registration: the brand column is narrow while the wide form is shown */
.auth-shell:has(#registerForm:not([hidden])) .brand-card h1 { font-size: clamp(28px, 3vw, 42px); overflow-wrap: anywhere; }
.auth-shell:has(#registerForm:not([hidden])) .brand-card p { font-size: 16px; }

/* the page area is the container that drives responsive product lists */
#content { container: view / inline-size; }
.hetzner-product-head > span { overflow: hidden; font-size: 11px; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.hetzner-product-specs b { white-space: nowrap; }