:root {
      --bg: #0b1020;
      --bg2: #10172a;
      --card: rgba(255, 255, 255, .085);
      --card-strong: rgba(255, 255, 255, .13);
      --line: rgba(255, 255, 255, .12);
      --text: #f8fafc;
      --muted: #aab6ca;
      --muted2: #7e8ca3;
      --brand: #f7c96b;
      --brand2: #e78d52;
      --green: #63d471;
      --red: #ff6b6b;
      --blue: #73a7ff;
      --shadow: 0 24px 90px rgba(0, 0, 0, .42);
      --radius: 24px;
      --radius2: 18px;
      --font: 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font);
      color: var(--text);
      background:
        radial-gradient(circle at 12% 12%, rgba(247, 201, 107, .18), transparent 28%),
        radial-gradient(circle at 82% 8%, rgba(115, 167, 255, .18), transparent 30%),
        radial-gradient(circle at 70% 92%, rgba(231, 141, 82, .16), transparent 28%),
        linear-gradient(135deg, #070b16 0%, #0b1020 45%, #111827 100%);
      overflow-x: hidden;
    }

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

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    .hidden {
      display: none !important;
    }

    .noise {
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .035;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      z-index: 0;
    }

    .shell {
      position: relative;
      z-index: 1;
      width: min(1440px, calc(100% - clamp(24px, 5vw, 88px)));
      margin: 0 auto;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(22px);
      background: rgba(7, 11, 22, .72);
      border-bottom: 1px solid var(--line);
    }

    .topbar .shell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 76px;
      gap: 18px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: -.03em;
    }

    .logo-mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      color: #111827;
      box-shadow: 0 10px 35px rgba(247, 201, 107, .22);
      font-weight: 950;
    }

    .logo small {
      display: block;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: 0;
      margin-top: 2px;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .btn {
      border: 0;
      border-radius: 999px;
      padding: 12px 16px;
      color: var(--text);
      background: rgba(255, 255, 255, .09);
      border: 1px solid rgba(255, 255, 255, .12);
      box-shadow: none;
      transition: transform .2s ease, border .2s ease, background .2s ease, opacity .2s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      white-space: nowrap;
    }

    .btn:hover {
      transform: translateY(-1px);
      background: rgba(255, 255, 255, .13);
      border-color: rgba(255, 255, 255, .22);
    }

    .btn.primary {
      color: #111827;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      border-color: transparent;
      font-weight: 800;
      box-shadow: 0 12px 35px rgba(247, 201, 107, .20);
    }

    .btn.danger {
      background: rgba(255, 107, 107, .14);
      border-color: rgba(255, 107, 107, .28);
      color: #ffd1d1;
    }

    .btn.ghost {
      background: transparent;
    }

    .btn.full {
      width: 100%;
    }

    .btn:disabled {
      opacity: .45;
      cursor: not-allowed;
      transform: none;
    }

    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      object-fit: cover;
      background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04));
      border: 1px solid var(--line);
    }

    .hero {
      padding: 72px 0 42px;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 34px;
      align-items: center;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(247, 201, 107, .28);
      background: rgba(247, 201, 107, .10);
      color: #ffe8b0;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 700;
    }

    h1 {
      margin: 18px 0 18px;
      font-size: clamp(40px, 6vw, 76px);
      line-height: .94;
      letter-spacing: -.07em;
    }

    .lead {
      color: var(--muted);
      font-size: 18px;
      line-height: 1.75;
      max-width: 720px;
      margin: 0 0 24px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      margin-top: 20px;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 26px;
    }

    .stat {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius2);
      background: rgba(255, 255, 255, .06);
    }

    .stat b {
      display: block;
      font-size: 22px;
      letter-spacing: -.03em;
    }

    .stat span {
      color: var(--muted);
      font-size: 13px;
    }

    .hero-card {
      position: relative;
      border-radius: 34px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .055));
      border: 1px solid rgba(255, 255, 255, .16);
      box-shadow: var(--shadow);
      padding: 18px;
      overflow: hidden;
    }

    .hero-card:before {
      content: "";
      position: absolute;
      inset: -40px;
      background: radial-gradient(circle at 20% 0%, rgba(247, 201, 107, .30), transparent 30%);
      pointer-events: none;
    }

    .preview-gallery {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .preview-img {
      min-height: 180px;
      border-radius: 22px;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(247, 201, 107, .35), rgba(115, 167, 255, .20));
      position: relative;
      border: 1px solid rgba(255, 255, 255, .12);
    }

    .preview-img:nth-child(2) {
      margin-top: 42px;
      background: linear-gradient(135deg, rgba(115, 167, 255, .30), rgba(99, 212, 113, .18));
    }

    .preview-img:nth-child(3) {
      margin-top: -42px;
      background: linear-gradient(135deg, rgba(231, 141, 82, .35), rgba(247, 201, 107, .17));
    }

    .preview-img:nth-child(4) {
      background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(115, 167, 255, .18));
    }

    .preview-img:after {
      content: "IMG_00" attr(data-n) ".JPG";
      position: absolute;
      left: 14px;
      bottom: 14px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .42);
      color: #fff;
      font-size: 12px;
      backdrop-filter: blur(8px);
    }

    .floating-panel {
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 22px;
      border-radius: 22px;
      background: rgba(7, 11, 22, .72);
      border: 1px solid rgba(255, 255, 255, .12);
      backdrop-filter: blur(20px);
      padding: 14px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
    }

    .floating-panel b {
      display: block;
    }

    .floating-panel span {
      color: var(--muted);
      font-size: 13px;
    }

    .section {
      padding: 30px 0;
    }

    .section-title {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: end;
      margin-bottom: 18px;
    }

    .section-title h2 {
      margin: 0;
      font-size: clamp(26px, 3vw, 42px);
      letter-spacing: -.045em;
    }

    .section-title p {
      margin: 8px 0 0;
      color: var(--muted);
      line-height: 1.6;
      max-width: 680px;
    }

    .grid {
      display: grid;
      gap: 16px;
    }

    .grid.cols-2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .grid.cols-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .grid.cols-4 {
      grid-template-columns: repeat(4, 1fr);
    }

    .card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .055));
      box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
      padding: 18px;
      overflow: hidden;
    }

    .card.flat {
      box-shadow: none;
    }

    .card h3 {
      margin: 0 0 8px;
      letter-spacing: -.035em;
    }

    .card p {
      color: var(--muted);
      line-height: 1.65;
      margin: 0;
    }

    .login-wrap {
      min-height: calc(100vh - 76px);
      display: grid;
      place-items: center;
      padding: 44px 0;
    }

    .login-card {
      width: min(480px, 100%);
      padding: 26px;
      border-radius: 34px;
      border: 1px solid rgba(255, 255, 255, .15);
      background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
      box-shadow: var(--shadow);
    }

    .google-icon {
      width: 20px;
      height: 20px;
      display: inline-block;
      background: conic-gradient(from -45deg, #4285f4 110deg, #34a853 90deg 180deg, #fbbc05 180deg 270deg, #ea4335 270deg);
      border-radius: 999px;
      position: relative;
    }

    .google-icon:after {
      content: "";
      position: absolute;
      inset: 5px;
      background: #fff;
      border-radius: 999px;
    }

    .layout {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 18px;
      padding: 26px 0 48px;
    }

    .sidebar {
      position: sticky;
      top: 94px;
      height: fit-content;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .065);
      padding: 12px;
    }

    .side-btn {
      width: 100%;
      text-align: left;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      border: 0;
      border-radius: 16px;
      padding: 13px 12px;
      background: transparent;
      transition: .2s ease;
      margin-bottom: 4px;
    }

    .side-btn:hover,
    .side-btn.active {
      background: rgba(255, 255, 255, .10);
      color: var(--text);
    }

    .side-icon {
      width: 26px;
      height: 26px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: rgba(255, 255, 255, .08);
    }

    .dashboard-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      margin-bottom: 18px;
    }

    .dashboard-head h2 {
      margin: 0;
      font-size: clamp(28px, 3.5vw, 42px);
      letter-spacing: -.04em;
      font-weight: 800;
    }

    .dashboard-head p {
      color: var(--muted);
      margin: 6px 0 0;
    }

    .metric {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      min-height: 144px;
    }

    .metric .value {
      font-size: 42px;
      font-weight: 800;
      letter-spacing: -.05em;
      margin-top: 10px;
    }

    .metric .sub {
      color: var(--muted);
      font-size: 13px;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .10);
      font-size: 12px;
      color: var(--muted);
      font-weight: 700;
      white-space: nowrap;
    }

    .pill.good {
      background: rgba(99, 212, 113, .12);
      border-color: rgba(99, 212, 113, .24);
      color: #c7ffd0;
    }

    .pill.warn {
      background: rgba(247, 201, 107, .12);
      border-color: rgba(247, 201, 107, .24);
      color: #ffe8b0;
    }

    .pill.bad {
      background: rgba(255, 107, 107, .12);
      border-color: rgba(255, 107, 107, .24);
      color: #ffd1d1;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    label {
      color: #dce6f7;
      font-size: 13px;
      font-weight: 750;
    }

    .hint {
      color: var(--muted2);
      font-size: 12px;
      line-height: 1.45;
    }

    input,
    textarea,
    select {
      width: 100%;
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .075);
      color: var(--text);
      border-radius: 16px;
      padding: 13px 14px;
      outline: none;
      transition: .2s ease;
    }

    textarea {
      min-height: 98px;
      resize: vertical;
    }

    input:focus,
    textarea:focus,
    select:focus {
      border-color: rgba(247, 201, 107, .55);
      box-shadow: 0 0 0 4px rgba(247, 201, 107, .10);
    }

    input::placeholder,
    textarea::placeholder {
      color: #6e7d95;
    }

    select {
      appearance: none;
      -webkit-appearance: none;
      padding-right: 44px;
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(248, 250, 252, .88) 50%),
        linear-gradient(135deg, rgba(248, 250, 252, .88) 50%, transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
      background-position:
        calc(100% - 22px) 53%,
        calc(100% - 16px) 53%,
        0 0;
      background-size:
        6px 6px,
        6px 6px,
        100% 100%;
      background-repeat: no-repeat;
    }

    select option {
      color: #111827;
      background: #fff;
    }

    .select-mini {
      min-width: 160px;
    }

    .inline-tools {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-top: 10px;
    }

    .drive-count-result {
      margin-top: 10px;
      padding: 12px 13px;
      border: 1px solid rgba(255, 255, 255, .11);
      border-radius: 16px;
      background: rgba(255, 255, 255, .05);
      color: var(--muted);
      line-height: 1.55;
    }

    .file-list {
      display: grid;
      gap: 6px;
      white-space: normal;
      min-width: 180px;
    }

    .file-chip {
      display: block;
      width: max-content;
      max-width: 100%;
      padding: 5px 9px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .075);
      border: 1px solid rgba(255, 255, 255, .08);
      color: #dce6f7;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .download-photo-btn {
      position: absolute;
      z-index: 3;
      top: 10px;
      left: 10px;
      min-height: 32px;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 12px;
      background: rgba(7, 11, 22, .72);
      backdrop-filter: blur(12px);
    }

    .danger-link {
      color: #ffd1d1;
      border-color: rgba(255, 107, 107, .30) !important;
      background: rgba(255, 107, 107, .11) !important;
    }

    .gallery-card {
      display: grid;
      grid-template-columns: 104px 1fr;
      gap: 14px;
      align-items: center;
    }

    .gallery-thumb {
      width: 104px;
      aspect-ratio: 1/1;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(247, 201, 107, .35), rgba(115, 167, 255, .20));
      border: 1px solid rgba(255, 255, 255, .10);
      display: grid;
      place-items: center;
      font-weight: 900;
      color: rgba(255, 255, 255, .85);
      overflow: hidden;
    }

    .gallery-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .gallery-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .mini-btn {
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .075);
      color: var(--text);
      border-radius: 999px;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 750;
    }

    .package-card {
      position: relative;
    }

    .package-card.featured {
      border-color: rgba(247, 201, 107, .40);
      background: linear-gradient(180deg, rgba(247, 201, 107, .13), rgba(255, 255, 255, .055));
    }

    .price {
      font-size: 32px;
      font-weight: 950;
      letter-spacing: -.05em;
      margin: 14px 0 4px;
    }

    .features {
      list-style: none;
      margin: 14px 0 0;
      padding: 0;
      color: var(--muted);
      line-height: 2;
      font-size: 14px;
    }

    .features li:before {
      content: "✓";
      color: var(--green);
      margin-right: 8px;
      font-weight: 900;
    }

    .client-page {
      padding: 28px 0 110px;
    }

    .client-hero {
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 34px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .055));
      box-shadow: var(--shadow);
      padding: clamp(20px, 4vw, 42px);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: end;
      margin-bottom: 18px;
    }

    .client-hero h1 {
      font-size: clamp(32px, 5vw, 58px);
      margin: 8px 0 10px;
    }

    .client-hero p {
      color: var(--muted);
      margin: 0;
      line-height: 1.65;
    }

    .toolbar {
      position: sticky;
      top: 86px;
      z-index: 10;
      display: grid;
      grid-template-columns: 1fr auto auto auto;
      gap: 10px;
      align-items: center;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 24px;
      background: rgba(7, 11, 22, .76);
      backdrop-filter: blur(18px);
      padding: 12px;
      margin-bottom: 18px;
    }

    .photo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 14px;
    }

    .photo-card {
      position: relative;
      border-radius: 22px;
      overflow: hidden;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .10);
      user-select: none;
      transition: transform .18s ease, border .18s ease, box-shadow .18s ease;
      min-height: 128px;
    }

    .photo-card:hover {
      transform: translateY(-2px);
      border-color: rgba(247, 201, 107, .34);
    }

    .photo-card.selected {
      border-color: rgba(247, 201, 107, .78);
      box-shadow: 0 0 0 4px rgba(247, 201, 107, .13);
    }

    .photo-card img {
      width: 100%;
      height: auto;
      object-fit: contain;
      display: block;
      filter: saturate(1.02);
      background: rgba(0, 0, 0, .18);
    }

    .photo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, .62) 100%);
      display: flex;
      align-items: flex-end;
      padding: 12px;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
    }

    .checkmark {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: rgba(0, 0, 0, .45);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .20);
      backdrop-filter: blur(10px);
      font-weight: 950;
    }

    .photo-card.selected .checkmark {
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      color: #111827;
    }

    .bottom-bar {
      position: fixed;
      z-index: 30;
      left: 50%;
      transform: translateX(-50%);
      bottom: 18px;
      width: min(930px, calc(100% - 28px));
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 26px;
      background: rgba(7, 11, 22, .86);
      backdrop-filter: blur(22px);
      box-shadow: var(--shadow);
      padding: 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .bottom-bar b {
      display: block;
    }

    .bottom-bar span {
      color: var(--muted);
      font-size: 13px;
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 50;
      background: rgba(0, 0, 0, .66);
      display: grid;
      place-items: center;
      padding: 20px;
      backdrop-filter: blur(8px);
    }

    .modal {
      width: min(620px, 100%);
      max-height: 90vh;
      overflow: auto;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 30px;
      background: linear-gradient(180deg, rgba(20, 28, 48, .98), rgba(12, 17, 31, .98));
      box-shadow: var(--shadow);
      padding: 22px;
    }

    .modal-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 14px;
    }

    .modal-head h3 {
      margin: 0;
      font-size: 24px;
      letter-spacing: -.035em;
    }

    .close-x {
      border: 0;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
      color: var(--text);
      font-size: 20px;
    }

    .toast-wrap {
      position: fixed;
      z-index: 80;
      right: 18px;
      bottom: 18px;
      display: grid;
      gap: 10px;
      width: min(360px, calc(100% - 36px));
    }

    .toast {
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 18px;
      background: rgba(7, 11, 22, .88);
      backdrop-filter: blur(18px);
      padding: 13px 14px;
      box-shadow: 0 14px 50px rgba(0, 0, 0, .35);
      color: var(--text);
      animation: toastIn .22s ease;
      line-height: 1.45;
    }

    .toast small {
      display: block;
      color: var(--muted);
      margin-top: 2px;
    }

    @keyframes toastIn {
      from {
        transform: translateY(10px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .empty {
      border: 1px dashed rgba(255, 255, 255, .18);
      border-radius: var(--radius);
      padding: 34px 18px;
      text-align: center;
      color: var(--muted);
      background: rgba(255, 255, 255, .04);
    }

    .table {
      width: 100%;
      border-collapse: collapse;
      overflow: hidden;
      border-radius: 18px;
    }

    .table th,
    .table td {
      padding: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, .09);
      text-align: left;
      color: var(--muted);
      vertical-align: top;
    }

    .table th {
      color: #dce6f7;
      font-size: 13px;
    }

    .table td strong {
      color: var(--text);
    }

    /* ================= RESPONSIVE UI SELECTA =================
       Desktop lebar: konten melebar dan grid foto otomatis tambah kolom.
       Tablet/HP: layout turun ke 1 kolom, tombol lebih besar, toolbar tidak menabrak header.
    */
    .loader-ring {
      width: 42px;
      height: 42px;
      margin: 0 auto;
      border-radius: 999px;
      border: 3px solid rgba(255, 255, 255, .18);
      border-top-color: rgba(255, 255, 255, .85);
      animation: selectaSpin .9s linear infinite;
    }

    @keyframes selectaSpin {
      to {
        transform: rotate(360deg);
      }
    }

    @media (min-width: 1500px) {
      .shell {
        width: min(1560px, calc(100% - 104px));
      }

      .layout {
        grid-template-columns: 280px 1fr;
        gap: 22px;
      }

      .hero {
        gap: 48px;
      }

      .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 18px;
      }

      .card {
        padding: 22px;
      }
    }

    @media (max-width: 1180px) {
      .shell {
        width: min(100% - 28px, 1180px);
      }

      .layout {
        grid-template-columns: 230px 1fr;
      }

      .grid.cols-4 {
        grid-template-columns: repeat(3, 1fr);
      }

      .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
      }
    }

    @media (max-width: 980px) {

      .hero,
      .layout,
      .client-hero {
        grid-template-columns: 1fr;
      }

      .hero {
        padding: 50px 0 34px;
      }

      .hero-card {
        max-width: 720px;
        margin: 0 auto;
      }

      .sidebar {
        position: static;
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding: 10px;
        scrollbar-width: none;
      }

      .sidebar::-webkit-scrollbar {
        display: none;
      }

      .side-btn {
        min-width: max-content;
        width: auto;
        margin-bottom: 0;
      }

      .dashboard-head,
      .section-title {
        align-items: flex-start;
      }

      .grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
      }

      .grid.cols-3 {
        grid-template-columns: repeat(2, 1fr);
      }

      .photo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .toolbar {
        grid-template-columns: 1fr 1fr;
        top: 84px;
      }
    }

    @media (max-width: 680px) {
      .shell {
        width: calc(100% - 20px);
      }

      .topbar .shell {
        height: auto;
        min-height: 60px;
        padding: 10px 0;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
      }

      .logo {
        width: auto;
        justify-content: flex-start;
      }

      .logo-mark {
        width: 36px;
        height: 36px;
        border-radius: 12px;
      }

      .logo small {
        display: none;
      }

      .nav-actions {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
      }

      .nav-actions .btn {
        width: auto;
        padding: 8px 12px;
        font-size: 13px;
      }

      .avatar {
        width: 34px;
        height: 34px;
      }

      .hero {
        padding-top: 34px;
      }

      h1 {
        font-size: clamp(34px, 11vw, 52px);
        line-height: .98;
      }

      .lead {
        font-size: 15px;
        line-height: 1.65;
      }

      .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .stats,
      .grid.cols-2,
      .grid.cols-3,
      .grid.cols-4,
      .form-grid {
        grid-template-columns: 1fr;
      }

      .preview-gallery {
        gap: 9px;
      }

      .preview-img {
        min-height: 128px;
        border-radius: 18px;
      }

      .preview-img:nth-child(2) {
        margin-top: 24px;
      }

      .preview-img:nth-child(3) {
        margin-top: -24px;
      }

      .floating-panel {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 12px;
        align-items: flex-start;
      }

      .dashboard-head,
      .section-title {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }

      .section {
        padding: 22px 0;
      }

      .card {
        padding: 15px;
        border-radius: 20px;
      }

      .login-wrap {
        min-height: calc(100vh - 110px);
        padding: 26px 0;
      }

      .login-card {
        padding: 18px;
        border-radius: 24px;
      }

      input,
      textarea,
      select {
        font-size: 16px;
        border-radius: 14px;
      }

      .client-page {
        padding: 18px 0 138px;
      }

      .client-hero {
        border-radius: 24px;
        align-items: start;
      }

      .client-hero h1 {
        font-size: clamp(29px, 9vw, 42px);
      }

      .toolbar {
        position: static;
        grid-template-columns: 1fr;
        border-radius: 20px;
        margin-bottom: 12px;
      }

      .photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
      }

      .photo-card {
        border-radius: 16px;
      }

      .photo-overlay {
        padding: 9px;
        font-size: 11px;
      }

      .checkmark {
        width: 30px;
        height: 30px;
        top: 8px;
        right: 8px;
      }

      .bottom-bar {
        align-items: stretch;
        flex-direction: column;
        left: 10px;
        right: 10px;
        width: auto;
        transform: none;
        bottom: max(10px, env(safe-area-inset-bottom));
        border-radius: 22px;
      }

      .bottom-bar .btn {
        width: 100%;
      }

      .gallery-card {
        grid-template-columns: 1fr;
      }

      .gallery-thumb {
        width: 100%;
        aspect-ratio: 16/7;
      }

      .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
      }

      .modal-backdrop {
        padding: 10px;
      }

      .modal {
        padding: 16px;
        border-radius: 22px;
        max-height: 92vh;
      }

      .toast-wrap {
        right: 10px;
        bottom: 10px;
        width: calc(100% - 20px);
      }
    }

    @media (max-width: 420px) {
      .shell {
        width: calc(100% - 16px);
      }

      .nav-actions {
        grid-template-columns: 1fr;
      }

      .btn {
        min-height: 42px;
      }

      .photo-grid {
        gap: 8px;
      }

      .photo-overlay {
        font-size: 10px;
      }

      .pill {
        white-space: normal;
      }
    }


    /* ===================== SELECTA TECH UI REFRESH ===================== */
    :root {
      --bg: #f8fafc;
      --bg2: #eef3f8;
      --card: #ffffff;
      --card-strong: #ffffff;
      --line: #d9e1ec;
      --text: #0f172a;
      --muted: #5f6b7a;
      --muted2: #8390a2;
      --brand: #2563eb;
      --brand2: #f97316;
      --green: #16a34a;
      --red: #dc2626;
      --blue: #2563eb;
      --shadow: 0 16px 46px rgba(15, 23, 42, .10);
      --shadow-soft: 0 8px 24px rgba(15, 23, 42, .08);
      --radius: 22px;
      --radius2: 16px;
    }

    body {
      color: var(--text);
      background:
        radial-gradient(circle at 16% 0%, rgba(37, 99, 235, .12), transparent 26%),
        radial-gradient(circle at 88% 8%, rgba(249, 115, 22, .10), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 42%, #eef3f8 100%);
    }

    .noise {
      display: none;
    }

    .topbar {
      background: rgba(255, 255, 255, .86);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(15, 23, 42, .08);
      box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
    }

    .logo {
      color: #0f172a;
    }

    .logo-mark {
      background: linear-gradient(135deg, #2563eb, #0f172a);
      box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
    }

    .btn,
    .mini-btn,
    .side-btn {
      background: #fff;
      border: 1px solid #d9e1ec;
      color: #0f172a;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }

    .btn:hover,
    .mini-btn:hover,
    .side-btn:hover {
      transform: translateY(-1px);
      background: #f8fafc;
      border-color: #b8c4d6;
      box-shadow: var(--shadow-soft);
    }

    .btn.primary {
      background: linear-gradient(180deg, #3574f0, #2563eb);
      color: #fff;
      border-color: #2563eb;
      box-shadow: 0 12px 26px rgba(37, 99, 235, .24);
    }

    .btn.primary:hover {
      background: linear-gradient(180deg, #2563eb, #1d4ed8);
    }

    .btn.danger,
    .danger-link {
      background: #fff5f5 !important;
      border-color: #fecaca !important;
      color: #b91c1c !important;
    }

    .btn.ghost {
      background: transparent;
      box-shadow: none;
    }

    .badge,
    .pill {
      background: #f8fafc;
      border: 1px solid #d9e1ec;
      color: #334155;
      box-shadow: none;
    }

    .pill.good {
      background: #ecfdf5;
      border-color: #bbf7d0;
      color: #15803d;
    }

    .pill.warn {
      background: #fffbeb;
      border-color: #fde68a;
      color: #b45309;
    }

    .pill.bad {
      background: #fef2f2;
      border-color: #fecaca;
      color: #b91c1c;
    }

    .hero-card,
    .card,
    .login-card,
    .sidebar,
    .client-hero,
    .toolbar,
    .bottom-bar,
    .modal,
    .toast,
    .empty {
      background: rgba(255, 255, 255, .88);
      border: 1px solid rgba(15, 23, 42, .08);
      box-shadow: var(--shadow);
      color: var(--text);
    }

    .card.flat {
      background: #fff;
      border-color: #e5eaf2;
    }

    .card p,
    .lead,
    .section-title p,
    .client-hero p,
    .dashboard-head p,
    .bottom-bar span,
    .toast small {
      color: var(--muted);
    }

    .hero-card:before {
      background: linear-gradient(135deg, rgba(37, 99, 235, .18), rgba(249, 115, 22, .12));
    }

    .stat {
      background: #ffffff;
      border-color: #e5eaf2;
    }

    .floating-panel {
      background: rgba(255, 255, 255, .92);
      border-color: #e5eaf2;
      box-shadow: var(--shadow-soft);
    }

    .layout {
      align-items: start;
    }

    .sidebar {
      position: sticky;
      top: 96px;
      padding: 10px;
      background: rgba(255, 255, 255, .82);
      backdrop-filter: blur(14px);
    }

    .side-btn {
      border-radius: 14px;
      justify-content: flex-start;
    }

    .side-btn.active {
      background: #eff6ff;
      border-color: #bfdbfe;
      color: #1d4ed8;
      box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .06);
    }

    .side-icon {
      background: #f1f5f9;
    }

    label {
      color: #334155;
    }

    input,
    textarea,
    select {
      background: #fff;
      border: 1px solid #cfd8e6;
      color: #0f172a;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    }

    input:focus,
    textarea:focus,
    select:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
    }

    input::placeholder,
    textarea::placeholder {
      color: #94a3b8;
    }

    select {
      background-color: #fff;
      background-image:
        linear-gradient(45deg, transparent 50%, #475569 50%),
        linear-gradient(135deg, #475569 50%, transparent 50%);
    }

    .drive-count-result,
    .file-chip {
      background: #f8fafc;
      border-color: #e2e8f0;
      color: #334155;
    }

    .table th,
    .table td {
      border-bottom-color: #e5eaf2;
      color: var(--muted);
    }

    .table th {
      color: #334155;
    }

    .client-page {
      padding-top: 24px;
    }

    .client-hero {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(248, 250, 252, .92)),
        radial-gradient(circle at 95% 0%, rgba(37, 99, 235, .18), transparent 30%);
      border-radius: 28px;
    }

    .client-hero h1,
    h1,
    .dashboard-head h2,
    .section-title h2 {
      letter-spacing: -.055em;
    }

    .toolbar {
      top: 88px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .88);
      backdrop-filter: blur(18px);
    }

    .photo-grid {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
    }

    .photo-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
      cursor: pointer;
    }

    .photo-card:hover {
      transform: translateY(-3px);
      border-color: #bfdbfe;
      box-shadow: 0 16px 34px rgba(15, 23, 42, .12);
    }

    .photo-card.selected {
      border-color: #2563eb;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), 0 16px 34px rgba(37, 99, 235, .12);
    }

    .photo-card img {
      background: #f1f5f9;
    }

    .photo-overlay {
      background: linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, .76) 100%);
      font-weight: 750;
    }

    .checkmark {
      background: rgba(255, 255, 255, .92);
      color: #0f172a;
      border: 1px solid rgba(15, 23, 42, .12);
      box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
    }

    .photo-card.selected .checkmark {
      background: #2563eb;
      color: #fff;
    }

    .photo-zoom-btn,
    .download-photo-btn {
      position: absolute;
      z-index: 4;
      top: 10px;
      min-height: 32px;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 12px;
      background: rgba(255, 255, 255, .92);
      color: #0f172a;
      border: 1px solid rgba(15, 23, 42, .10);
      backdrop-filter: blur(12px);
      box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
    }

    .photo-zoom-btn {
      left: 10px;
    }

    .download-photo-btn {
      left: 78px;
    }

    .selecta-lightbox {
      position: fixed;
      inset: 0;
      z-index: 80;
      background: rgba(15, 23, 42, .88);
      backdrop-filter: blur(18px);
      display: grid;
      grid-template-rows: auto 1fr;
      color: #fff;
    }

    .lightbox-top {
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px clamp(14px, 3vw, 28px);
      border-bottom: 1px solid rgba(255, 255, 255, .12);
      background: rgba(15, 23, 42, .72);
    }

    .lightbox-title {
      min-width: 0;
    }

    .lightbox-title b {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: min(62vw, 760px);
    }

    .lightbox-title span {
      color: #cbd5e1;
      font-size: 13px;
    }

    .lightbox-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .lightbox-btn {
      border: 1px solid rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .10);
      color: #fff;
      border-radius: 999px;
      padding: 9px 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .lightbox-stage {
      min-height: 0;
      display: grid;
      place-items: center;
      overflow: hidden;
      padding: 18px;
    }

    .lightbox-stage img {
      max-width: min(100%, 1400px);
      max-height: 100%;
      object-fit: contain;
      border-radius: 16px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
      transform-origin: center center;
      transition: transform .18s ease;
      user-select: none;
      cursor: zoom-in;
    }

    .lightbox-help {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 18px;
      padding: 9px 12px;
      border-radius: 999px;
      background: rgba(15, 23, 42, .72);
      border: 1px solid rgba(255, 255, 255, .12);
      color: #cbd5e1;
      font-size: 12px;
    }

    @media (max-width: 680px) {
      .photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .photo-card {
        border-radius: 14px;
      }

      .photo-zoom-btn,
      .download-photo-btn {
        padding: 6px 8px;
        min-height: 30px;
        font-size: 11px;
      }

      .download-photo-btn {
        left: 70px;
      }

      .lightbox-top {
        align-items: flex-start;
        flex-direction: column;
      }

      .lightbox-title b {
        max-width: 88vw;
      }

      .lightbox-stage {
        padding: 10px;
      }

      .lightbox-help {
        display: none;
      }
    }


    /* ===================== SELECTA FINAL POLISH UI ===================== */
    :root {
      --bg: #f7f9fc;
      --bg2: #eef3fb;
      --card: #ffffff;
      --card-strong: #ffffff;
      --line: #e2e8f0;
      --text: #0f172a;
      --muted: #64748b;
      --muted2: #94a3b8;
      --brand: #2563eb;
      --brand2: #1d4ed8;
      --green: #16a34a;
      --red: #dc2626;
      --blue: #2563eb;
      --shadow: 0 18px 48px rgba(15, 23, 42, .08);
      --shadow-soft: 0 8px 24px rgba(15, 23, 42, .06);
      --radius: 22px;
      --radius2: 16px;
    }

    body {
      color: var(--text);
      background:
        radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .08), transparent 32%),
        radial-gradient(circle at 92% 18%, rgba(20, 184, 166, .07), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 42%, #eef3fb 100%) !important;
    }

    .noise {
      display: none;
    }

    .topbar {
      background: rgba(255, 255, 255, .86) !important;
      border-bottom: 1px solid #e6ebf3 !important;
      box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
    }

    .topbar .shell {
      height: 72px;
    }

    .logo {
      color: #0f172a;
    }

    .logo small {
      color: #64748b;
      font-weight: 600;
    }

    .logo-mark {
      background: #0f172a !important;
      color: #fff !important;
      box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
    }

    .btn,
    .mini-btn,
    .side-btn,
    .icon-action,
    .support-btn {
      border: 1px solid #dbe3ef;
      background: #fff;
      color: #0f172a;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
      font-weight: 750;
    }

    .btn {
      min-height: 42px;
      padding: 10px 14px;
    }

    .btn:hover,
    .mini-btn:hover,
    .side-btn:hover,
    .icon-action:hover,
    .support-btn:hover {
      border-color: #b9c7dc;
      background: #f8fafc;
      transform: translateY(-1px);
      box-shadow: var(--shadow-soft);
    }

    .btn.primary {
      background: linear-gradient(180deg, #3574f0, #2563eb) !important;
      border-color: #2563eb !important;
      color: #fff !important;
      box-shadow: 0 12px 24px rgba(37, 99, 235, .20);
    }

    .btn.primary:hover {
      background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
    }

    .btn.ghost {
      background: transparent;
      box-shadow: none;
    }

    .btn.danger,
    .danger-link {
      background: #fff5f5 !important;
      border-color: #fecaca !important;
      color: #b91c1c !important;
    }

    .app-icon {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 1.75;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: 0 0 auto;
      transition: stroke .2s ease;
    }

    .app-icon.s20 {
      width: 20px;
      height: 20px;
    }

    .app-icon.s22 {
      width: 22px;
      height: 22px;
    }

    .app-icon.s24 {
      width: 24px;
      height: 24px;
    }

    .feature-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: #eff6ff;
      color: #2563eb;
      margin-bottom: 14px;
    }

    .feature-icon .app-icon {
      width: 21px;
      height: 21px;
    }

    .card,
    .login-card,
    .sidebar,
    .client-hero,
    .toolbar,
    .bottom-bar,
    .modal,
    .toast,
    .empty,
    .hero-card {
      background: rgba(255, 255, 255, .94) !important;
      border: 1px solid rgba(15, 23, 42, .08) !important;
      color: var(--text) !important;
      box-shadow: var(--shadow);
    }

    .card.flat {
      background: #f8fafc !important;
      box-shadow: none !important;
    }

    .card h3,
    h1,
    h2 {
      color: #0f172a;
    }

    .card p,
    .lead,
    .section-title p,
    .client-hero p,
    .dashboard-head p,
    .bottom-bar span,
    .toast small,
    .hint {
      color: var(--muted) !important;
    }

    .badge,
    .pill {
      background: #f8fafc !important;
      border: 1px solid #dbe3ef !important;
      color: #334155 !important;
      box-shadow: none;
    }

    .pill.good {
      background: #ecfdf5 !important;
      border-color: #bbf7d0 !important;
      color: #15803d !important;
    }

    .pill.warn {
      background: #fffbeb !important;
      border-color: #fde68a !important;
      color: #b45309 !important;
    }

    .pill.bad {
      background: #fef2f2 !important;
      border-color: #fecaca !important;
      color: #b91c1c !important;
    }

    .google-icon {
      width: 20px !important;
      height: 20px !important;
      display: inline-block !important;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.7 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat !important;
      border-radius: 0 !important;
      position: relative;
      border: none !important;
      outline: none !important;
    }

    .google-icon:after {
      display: none !important;
    }

    /* Dropdown fix */
    select {
      appearance: none !important;
      -webkit-appearance: none !important;
      min-height: 44px;
      line-height: 1.2;
      color: #0f172a !important;
      background-color: #fff !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 14px center !important;
      background-size: 18px !important;
      padding-right: 44px !important;
      border: 1px solid #cfd8e6 !important;
      border-radius: 14px !important;
    }

    select::-ms-expand {
      display: none;
    }

    select option {
      color: #0f172a;
      background: #fff;
    }

    .landing-hero {
      padding: 58px 0 36px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(430px, .92fr);
      gap: 38px;
      align-items: center;
    }

    .hero-copy h1 {
      max-width: 850px;
    }

    .hero-actions {
      gap: 10px;
    }

    .landing-showcase {
      border-radius: 30px;
      background: #fff;
      border: 1px solid #e2e8f0;
      box-shadow: 0 24px 72px rgba(15, 23, 42, .12);
      overflow: hidden;
    }

    .showcase-top {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      border-bottom: 1px solid #e2e8f0;
      background: #f8fafc;
    }

    .traffic {
      display: flex;
      gap: 7px;
    }

    .traffic span {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #cbd5e1;
      display: block;
    }

    .showcase-search {
      width: 42%;
      height: 30px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 0 12px;
      color: #94a3b8;
      font-size: 12px;
    }

    .showcase-body {
      padding: 16px;
      display: grid;
      gap: 14px;
    }

    .showcase-header {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
    }

    .showcase-title b {
      display: block;
      font-size: 18px;
      letter-spacing: -.03em;
    }

    .showcase-title span {
      color: #64748b;
      font-size: 13px;
    }

    .mock-gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .mock-photo {
      position: relative;
      aspect-ratio: 4/5;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid #e2e8f0;
      background: linear-gradient(135deg, #dbeafe, #fef3c7);
    }

    .mock-photo:nth-child(2) {
      aspect-ratio: 1/1;
      background: linear-gradient(135deg, #dcfce7, #dbeafe);
    }

    .mock-photo:nth-child(3) {
      background: linear-gradient(135deg, #ffedd5, #e0e7ff);
    }

    .mock-photo:nth-child(4) {
      background: linear-gradient(135deg, #fce7f3, #dbeafe);
    }

    .mock-photo:nth-child(5) {
      aspect-ratio: 1/1;
      background: linear-gradient(135deg, #ccfbf1, #fef3c7);
    }

    .mock-photo:nth-child(6) {
      background: linear-gradient(135deg, #e0e7ff, #fee2e2);
    }

    .mock-photo:before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .8), transparent 15%), linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, .55));
    }

    .mock-photo.selected {
      outline: 3px solid #2563eb;
      outline-offset: -3px;
    }

    .mock-photo.selected:after {
      content: "✓";
      position: absolute;
      top: 9px;
      right: 9px;
      width: 26px;
      height: 26px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: #2563eb;
      color: #fff;
      font-weight: 900;
    }

    .showcase-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
    }

    .layout {
      grid-template-columns: 248px minmax(0, 1fr);
      gap: 20px;
    }

    .sidebar {
      padding: 8px;
    }

    .side-btn {
      min-height: 44px;
      padding: 11px 12px;
      border-radius: 14px;
      margin: 0 0 6px;
      color: #475569;
    }

    .side-btn.active {
      background: #eff6ff !important;
      border-color: #bfdbfe !important;
      color: #1d4ed8 !important;
    }

    .side-icon {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      background: #f1f5f9;
      color: #334155;
    }

    .side-btn.active .side-icon {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .mobile-menu-btn,
    .mobile-menu-backdrop {
      display: none;
    }

    .metric .app-icon.s24 {
      color: #2563eb;
      background: #eff6ff;
      width: 42px;
      height: 42px;
      padding: 10px;
      border-radius: 14px;
    }

    .gallery-actions {
      gap: 8px;
    }

    .icon-action {
      position: relative;
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 12px;
      display: inline-grid;
      place-items: center;
    }

    [data-tip] {
      position: relative;
    }

    [data-tip]:hover:after {
      content: attr(data-tip);
      position: absolute;
      z-index: 99;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(100% + 8px);
      white-space: nowrap;
      background: #0f172a;
      color: #fff;
      padding: 7px 9px;
      border-radius: 10px;
      font-size: 12px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .22);
      pointer-events: none;
    }

    [data-tip]:hover:before {
      content: "";
      position: absolute;
      z-index: 100;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(100% + 2px);
      border: 6px solid transparent;
      border-top-color: #0f172a;
      pointer-events: none;
    }

    .client-page {
      padding-top: 22px;
    }

    .client-hero {
      border-radius: 28px;
      padding: 24px;
      background: linear-gradient(135deg, #fff, #f8fafc) !important;
    }

    .toolbar {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) 150px auto auto;
      gap: 10px;
      align-items: center;
      border-radius: 18px;
      top: 86px;
    }

    .photo-grid {
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 16px;
    }

    .photo-card {
      border-radius: 18px;
      background: #fff;
      border: 1px solid #e2e8f0;
      box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
    }

    .photo-card img {
      border-radius: 16px;
      padding: 6px;
    }

    .photo-overlay {
      padding: 32px 12px 12px;
      font-size: 12px;
    }

    .photo-zoom-btn,
    .download-photo-btn {
      width: 36px;
      height: 36px;
      min-height: 36px;
      padding: 0;
      display: grid;
      place-items: center;
      font-size: 0;
      border-radius: 12px;
    }

    .download-photo-btn {
      left: 54px;
    }

    .photo-zoom-btn .app-icon,
    .download-photo-btn .app-icon {
      width: 17px;
      height: 17px;
    }

    .floating-dock {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 70;
      display: flex;
      gap: 10px;
      align-items: flex-end;
    }

    .support-btn {
      min-height: 46px;
      border-radius: 999px;
      padding: 0 15px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #0f172a;
    }

    .support-btn.bug {
      background: #fff7ed;
      border-color: #fed7aa;
      color: #9a3412;
    }

    .support-btn.ask,
    .support-btn.ask.active {
      background: #0f172a;
      border-color: #0f172a;
      color: #fff;
      box-shadow: 0 16px 36px rgba(15, 23, 42, .24);
    }

    .assistant-panel {
      position: fixed;
      right: 18px;
      bottom: 78px;
      z-index: 71;
      width: min(420px, calc(100vw - 28px));
      height: min(620px, calc(100vh - 110px));
      border-radius: 24px;
      background: #fff;
      border: 1px solid #dbe3ef;
      box-shadow: 0 24px 90px rgba(15, 23, 42, .22);
      display: grid;
      grid-template-rows: auto 1fr auto;
      overflow: hidden;
    }

    .assistant-head {
      padding: 16px;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      background: linear-gradient(180deg, #fff, #f8fafc);
    }

    .assistant-title {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .assistant-title .bot-mark {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      background: #eff6ff;
      color: #2563eb;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
    }

    .assistant-title b {
      display: block;
    }

    .assistant-title span {
      color: #64748b;
      font-size: 12px;
    }

    .assistant-body {
      padding: 14px;
      overflow: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: #f8fafc;
    }

    .chat-row {
      display: flex;
      gap: 8px;
      align-items: flex-end;
    }

    .chat-row.user {
      justify-content: flex-end;
    }

    .bubble {
      max-width: 86%;
      padding: 11px 13px;
      border-radius: 16px;
      font-size: 14px;
      line-height: 1.5;
      white-space: pre-wrap;
    }

    .chat-row.bot .bubble {
      background: #fff;
      border: 1px solid #e2e8f0;
      color: #0f172a;
      border-bottom-left-radius: 6px;
    }

    .chat-row.user .bubble {
      background: #2563eb;
      color: #fff;
      border-bottom-right-radius: 6px;
    }

    .assistant-quick {
      padding: 10px 14px 0;
      background: #f8fafc;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .quick-chip {
      border: 1px solid #e2e8f0;
      background: #fff;
      color: #475569;
      border-radius: 10px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 650;
      cursor: pointer;
      transition: .2s ease;
      line-height: 1.2;
    }

    .quick-chip:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
      color: #0f172a;
    }

    .assistant-form {
      padding: 12px;
      border-top: 1px solid #e2e8f0;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      background: #fff;
    }

    .assistant-form input {
      min-height: 42px;
      border-radius: 999px;
    }

    .assistant-close {
      width: 36px;
      height: 36px;
      padding: 0;
      border-radius: 12px;
    }

    @media (max-width: 980px) {
      .landing-hero {
        grid-template-columns: 1fr;
        padding-top: 36px;
      }

      .layout {
        grid-template-columns: 1fr;
      }

      /* UX Mobile: Tombol Hamburger Icon-only (Dibalikin rapi ada kotaknya) */
      .mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        color: #0f172a;
        margin-bottom: 16px;
        box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
        cursor: pointer;
        transition: 0.2s ease;
        outline: none;
      }

      .mobile-menu-btn:active {
        background: #f8fafc;
        transform: scale(0.95);
      }

      /* UX Mobile: Layar Redup (Backdrop) */
      .mobile-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.5);
        backdrop-filter: blur(3px);
        z-index: 90;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }

      .mobile-menu-backdrop.open {
        opacity: 1;
        pointer-events: auto;
      }

      /* UX Mobile: Sidebar Meluncur dari Kiri (Off-canvas) */
      .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 82vw;
        display: flex !important;
        flex-direction: column;
        padding: 24px 16px !important;
        background: #fff !important;
        border-radius: 0 28px 28px 0 !important;
        box-shadow: 10px 0 50px rgba(15, 23, 42, .15) !important;
        border: none !important;
        margin: 0 !important;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
        z-index: 100;
        visibility: hidden;
        /* Ini kunci agar tidak ada garis/shadow yang bocor saat ditutup */
      }

      .sidebar.open {
        transform: translateX(0);
        visibility: visible;
      }

      .side-btn {
        min-width: 100% !important;
        margin: 0 0 6px !important;
        padding: 14px 12px !important;
        font-size: 15px;
        border-radius: 14px;
      }

      .sidebar-divider {
        height: 1px;
        background: #e2e8f0;
        margin: 12px 0;
      }

      .toolbar {
        grid-template-columns: 1fr 130px;
      }

      .toolbar .btn {
        width: 100%;
      }
    }

    @media (max-width: 680px) {
      .shell {
        width: min(100% - 24px, 1440px);
      }

      .topbar .shell {
        height: auto;
        min-height: 60px;
        padding: 10px 0;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
      }

      .nav-actions {
        gap: 8px;
      }

      .nav-actions .btn:not(.primary),
      .nav-actions .pill {
        display: none;
      }

      .landing-hero {
        gap: 22px;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .stats {
        grid-template-columns: 1fr;
      }

      .mock-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .grid.cols-2,
      .grid.cols-3,
      .grid.cols-4,
      .form-grid {
        grid-template-columns: 1fr;
      }

      .toolbar {
        position: static;
        grid-template-columns: 1fr;
      }

      .photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .support-btn span {
        display: none;
      }

      .support-btn {
        width: 48px;
        height: 48px;
        padding: 0;
        justify-content: center;
      }

      .floating-dock {
        right: 12px;
        bottom: 12px;
      }

      .assistant-panel {
        right: 10px;
        bottom: 72px;
        width: calc(100vw - 20px);
        height: min(620px, calc(100vh - 88px));
        border-radius: 20px;
      }
    }

    /* Senior UI polish: clearer mobile account row and cleaner client gallery */
    .nav-actions[data-mode="user"] .avatar {
      box-shadow: 0 0 0 3px #fff, 0 4px 16px rgba(15, 23, 42, .12);
    }

    .photo-card {
      touch-action: manipulation;
    }

    .photo-card img {
      background: #f8fafc;
    }

    .mock-photo {
      background-size: cover !important;
      background-position: center !important;
      transform: translateZ(0);
    }

    .mock-photo:nth-child(1) {
      background-image: url('https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=480&q=55') !important;
    }

    .mock-photo:nth-child(2) {
      background-image: url('https://images.unsplash.com/photo-1520854221256-17451cc331bf?auto=format&fit=crop&w=480&q=55') !important;
    }

    .mock-photo:nth-child(3) {
      background-image: url('https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=480&q=55') !important;
    }

    .mock-photo:nth-child(4) {
      background-image: url('https://images.unsplash.com/photo-1509610973147-232dfea52a97?auto=format&fit=crop&w=480&q=55') !important;
    }

    .mock-photo:nth-child(5) {
      background-image: url('https://images.unsplash.com/photo-1522673607200-164d1b6ce486?auto=format&fit=crop&w=480&q=55') !important;
    }

    .mock-photo:nth-child(6) {
      background-image: url('https://images.unsplash.com/photo-1523438885200-e635ba2c371e?auto=format&fit=crop&w=480&q=55') !important;
    }

    .mock-photo:before {
      background: linear-gradient(180deg, rgba(15, 23, 42, .03), rgba(15, 23, 42, .50)) !important;
    }

    .lightbox-actions {
      display: none !important;
    }

    .selecta-lightbox {
      touch-action: none;
    }

    .lightbox-stage img {
      will-change: transform;
      touch-action: none;
    }

    .client-hero {
      gap: 18px;
    }

    .client-hero .badge {
      max-width: fit-content;
    }

    @media (max-width: 680px) {
      .nav-actions[data-mode="user"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        overflow: visible;
        padding-bottom: 0;
      }

      .nav-actions[data-mode="user"] .btn {
        width: auto !important;
        min-width: 42px;
        padding: 9px 11px;
        flex: 0 0 auto;
      }

      .nav-actions[data-mode="user"] .pill {
        flex: 0 0 auto;
      }

      .nav-actions[data-mode="user"] .avatar {
        flex: 0 0 34px;
      }

      .nav-actions[data-mode="guest"] {
        display: flex !important;
        justify-content: flex-end;
      }

      .client-hero {
        padding: 18px !important;
      }

      .showcase-search {
        width: 55% !important;
      }

      .showcase-footer .btn {
        padding-inline: 12px;
      }
    }

    /* ===================== THE 1% PREMIUM POLISH (ANIMATION, SCROLLBAR, EMPTY STATES) ===================== */

    /* 1. Sembunyikan Scrollbar Sepenuhnya di Seluruh Halaman */
    ::-webkit-scrollbar {
      display: none;
    }

    * {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    /* 2. Animasi Transisi Halus (Smooth Load) antar menu */
    @keyframes smoothLoad {
      0% {
        opacity: 0;
        transform: translateY(8px) scale(0.995);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .shell.layout,
    .shell.section,
    .shell.login-wrap,
    .shell.landing-hero,
    .shell.client-page {
      animation: smoothLoad 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* 3. Empty State (Data Kosong) yang Lebih Ramah & Center */
    .empty {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 24px !important;
      text-align: center;
      background: linear-gradient(180deg, #f8fafc, #f1f5f9) !important;
      border: 1px dashed #cbd5e1 !important;
      border-radius: 24px !important;
      color: #64748b !important;
    }

    /* Tambahan icon tipis di empty state */
    .empty:before {
      content: "";
      display: block;
      width: 42px;
      height: 42px;
      margin-bottom: 12px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;
      opacity: 0.6;
    }

    .empty h2 {
      color: #0f172a !important;
      margin: 0 0 8px !important;
    }

    /* 4. Interaksi Tambahan: Table Hover & Focus Ring */
    .table tbody tr {
      transition: background 0.2s ease;
    }

    .table tbody tr:hover {
      background: #f8fafc;
    }

    .btn:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid #2563eb;
      outline-offset: 2px;
    }

    /* 5. Skeleton Loading UI */
    @keyframes shimmer {
      0% {
        background-position: 200% 0;
      }

      100% {
        background-position: -200% 0;
      }
    }

    .skeleton-box {
      background: linear-gradient(90deg, rgba(200, 212, 228, 0.3) 25%, rgba(200, 212, 228, 0.6) 50%, rgba(200, 212, 228, 0.3) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.8s infinite linear;
    }

    .skeleton-hero {
      height: 140px;
      width: 100%;
      border-radius: 28px;
      margin-bottom: 18px;
    }

    .skeleton-toolbar {
      height: 60px;
      width: 100%;
      border-radius: 18px;
      margin-bottom: 18px;
    }

    .skeleton-card {
      aspect-ratio: 4/5;
      width: 100%;
      border-radius: 18px;
    }

    /* =====================================================================
       SELECTA — APPLE STYLE INTERNATIONAL REDESIGN
       Clean, minimal, premium, responsive, and deployment-ready UI layer.
       ===================================================================== */
    :root {
      color-scheme: light;
      --bg: #f5f5f7;
      --bg2: #fbfbfd;
      --card: rgba(255, 255, 255, .82);
      --card-strong: rgba(255, 255, 255, .96);
      --line: rgba(0, 0, 0, .08);
      --text: #1d1d1f;
      --muted: #6e6e73;
      --muted2: #86868b;
      --brand: #0071e3;
      --brand2: #2997ff;
      --green: #34c759;
      --red: #ff3b30;
      --blue: #0071e3;
      --shadow: 0 22px 70px rgba(0, 0, 0, .09);
      --shadow-soft: 0 12px 32px rgba(0, 0, 0, .055);
      --radius: 28px;
      --radius2: 20px;
      --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
    }

    html {
      background: #f5f5f7 !important;
      scroll-behavior: smooth;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      margin: 0;
      color: var(--text) !important;
      font-family: var(--font) !important;
      letter-spacing: -0.015em;
      background:
        radial-gradient(circle at 50% -10%, rgba(255,255,255,.98), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 12% 10%, rgba(0,113,227,.10), rgba(0,113,227,0) 24%),
        radial-gradient(circle at 88% 8%, rgba(52,199,89,.08), rgba(52,199,89,0) 22%),
        linear-gradient(180deg, #ffffff 0%, #f5f5f7 48%, #eeeeef 100%) !important;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(0,0,0,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.018) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 68%, transparent 100%);
      opacity: .52;
    }

    .noise { display: none !important; }

    ::selection { background: rgba(0,113,227,.18); color: #1d1d1f; }
    ::-webkit-scrollbar { width: 10px !important; height: 10px !important; display: block !important; }
    ::-webkit-scrollbar-track { background: transparent !important; }
    ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18) !important; border: 3px solid transparent !important; border-radius: 999px !important; background-clip: padding-box !important; }
    * { scrollbar-width: thin !important; scrollbar-color: rgba(0,0,0,.22) transparent !important; }

    .shell {
      width: min(1240px, calc(100% - clamp(24px, 5vw, 96px))) !important;
      position: relative;
      z-index: 1;
    }

    .topbar {
      top: 0;
      z-index: 50;
      background: rgba(251, 251, 253, .76) !important;
      border-bottom: 1px solid rgba(0,0,0,.075) !important;
      backdrop-filter: saturate(180%) blur(26px) !important;
      -webkit-backdrop-filter: saturate(180%) blur(26px) !important;
      box-shadow: none !important;
    }

    .topbar .shell {
      height: 64px !important;
      gap: 20px !important;
    }

    .logo {
      gap: 11px !important;
      font-weight: 680 !important;
      letter-spacing: -0.025em !important;
      color: #1d1d1f !important;
    }

    .logo span { line-height: 1.05; }
    .logo small {
      color: #86868b !important;
      font-weight: 500 !important;
      letter-spacing: -0.01em !important;
      margin-top: 3px !important;
    }

    .logo-mark {
      width: 38px !important;
      height: 38px !important;
      border-radius: 12px !important;
      background: #1d1d1f !important;
      border: 1px solid rgba(0,0,0,.08) !important;
      box-shadow: 0 10px 24px rgba(0,0,0,.09) !important;
    }

    h1, h2, h3, .dashboard-head h2, .section-title h2, .client-hero h1 {
      color: #1d1d1f !important;
      font-weight: 760 !important;
      letter-spacing: -0.065em !important;
      text-wrap: balance;
    }

    h1 { font-size: clamp(44px, 7vw, 86px) !important; line-height: .94 !important; }
    .section-title h2, .dashboard-head h2 { font-size: clamp(30px, 4.4vw, 52px) !important; line-height: 1.02 !important; }
    .card h3 { font-size: 18px; letter-spacing: -0.035em !important; }

    .lead, .section-title p, .dashboard-head p, .client-hero p, .card p, .hint, .toast small, .bottom-bar span {
      color: #6e6e73 !important;
      font-weight: 430;
      line-height: 1.62 !important;
      letter-spacing: -0.012em;
    }

    .lead { font-size: clamp(17px, 1.6vw, 21px) !important; max-width: 760px !important; }

    .badge, .pill {
      border-radius: 999px !important;
      border: 1px solid rgba(0,0,0,.075) !important;
      background: rgba(255,255,255,.72) !important;
      color: #424245 !important;
      box-shadow: 0 1px 0 rgba(255,255,255,.75) inset !important;
      backdrop-filter: blur(18px) saturate(160%) !important;
      -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
      font-weight: 620 !important;
      letter-spacing: -0.01em !important;
    }

    .badge { padding: 8px 13px !important; }
    .pill.good { background: rgba(52,199,89,.10) !important; border-color: rgba(52,199,89,.22) !important; color: #167a35 !important; }
    .pill.warn { background: rgba(255,149,0,.10) !important; border-color: rgba(255,149,0,.24) !important; color: #995500 !important; }
    .pill.bad { background: rgba(255,59,48,.09) !important; border-color: rgba(255,59,48,.20) !important; color: #b42318 !important; }

    .btn, .mini-btn, .side-btn, .icon-action, .support-btn, .lightbox-btn, .quick-chip {
      appearance: none !important;
      border: 1px solid rgba(0,0,0,.075) !important;
      background: rgba(255,255,255,.80) !important;
      color: #1d1d1f !important;
      border-radius: 999px !important;
      font-weight: 640 !important;
      letter-spacing: -0.018em !important;
      box-shadow: 0 1px 0 rgba(255,255,255,.78) inset, 0 8px 22px rgba(0,0,0,.045) !important;
      backdrop-filter: blur(18px) saturate(160%) !important;
      -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
      transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease !important;
    }

    .btn { min-height: 42px !important; padding: 10px 17px !important; }
    .mini-btn { padding: 8px 12px !important; }
    .btn:hover, .mini-btn:hover, .side-btn:hover, .icon-action:hover, .support-btn:hover, .lightbox-btn:hover, .quick-chip:hover {
      transform: translateY(-1px) !important;
      background: rgba(255,255,255,.94) !important;
      border-color: rgba(0,0,0,.12) !important;
      box-shadow: 0 1px 0 rgba(255,255,255,.88) inset, 0 14px 34px rgba(0,0,0,.08) !important;
    }

    .btn:active, .mini-btn:active, .side-btn:active, .icon-action:active, .support-btn:active {
      transform: translateY(0) scale(.985) !important;
    }

    .btn.primary {
      background: #0071e3 !important;
      border-color: rgba(0,113,227,.16) !important;
      color: #fff !important;
      box-shadow: 0 12px 30px rgba(0,113,227,.20) !important;
    }

    .btn.primary:hover { background: #0077ed !important; box-shadow: 0 18px 38px rgba(0,113,227,.26) !important; }
    .btn.danger, .danger-link { background: rgba(255,59,48,.08) !important; border-color: rgba(255,59,48,.22) !important; color: #c4231b !important; }
    .btn.ghost { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }

    input, textarea, select {
      min-height: 46px !important;
      padding: 12px 15px !important;
      border-radius: 14px !important;
      border: 1px solid rgba(0,0,0,.12) !important;
      background: rgba(255,255,255,.86) !important;
      color: #1d1d1f !important;
      box-shadow: 0 1px 0 rgba(255,255,255,.75) inset !important;
      outline: none !important;
      backdrop-filter: blur(16px) saturate(150%) !important;
      -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
    }

    input:focus, textarea:focus, select:focus {
      background: #fff !important;
      border-color: rgba(0,113,227,.72) !important;
      box-shadow: 0 0 0 4px rgba(0,113,227,.14) !important;
    }

    input::placeholder, textarea::placeholder { color: #a1a1a6 !important; }
    label { color: #424245 !important; font-weight: 640 !important; letter-spacing: -0.012em; }

    .card, .login-card, .hero-card, .landing-showcase, .client-hero, .toolbar, .bottom-bar, .modal, .toast, .sidebar, .empty {
      border: 1px solid rgba(0,0,0,.075) !important;
      background: rgba(255,255,255,.78) !important;
      color: #1d1d1f !important;
      box-shadow: var(--shadow) !important;
      backdrop-filter: blur(28px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    }

    .card {
      padding: 22px !important;
      border-radius: 26px !important;
      overflow: hidden;
    }

    .card.flat {
      background: rgba(245,245,247,.72) !important;
      border-color: rgba(0,0,0,.055) !important;
      box-shadow: none !important;
    }

    .section { padding: clamp(28px, 5vw, 70px) 0 !important; }
    .section-title { margin-bottom: 22px !important; }
    .grid { gap: 18px !important; }

    .landing-hero {
      min-height: calc(100vh - 64px);
      padding: clamp(48px, 7vw, 96px) 0 clamp(34px, 5vw, 72px) !important;
      grid-template-columns: minmax(0, 1.02fr) minmax(390px, .86fr) !important;
      gap: clamp(30px, 6vw, 76px) !important;
      align-items: center !important;
    }

    .hero-copy h1 { max-width: 900px !important; margin-top: 18px !important; margin-bottom: 18px !important; }
    .hero-actions { gap: 12px !important; margin-top: 24px !important; }

    .stats {
      gap: 12px !important;
      margin-top: 32px !important;
    }

    .stat {
      border: 1px solid rgba(0,0,0,.07) !important;
      border-radius: 22px !important;
      background: rgba(255,255,255,.70) !important;
      box-shadow: 0 10px 28px rgba(0,0,0,.045) !important;
      padding: 18px !important;
    }

    .stat b { color: #1d1d1f !important; font-size: 26px !important; font-weight: 760 !important; }
    .stat span { color: #6e6e73 !important; }

    .landing-showcase {
      border-radius: 34px !important;
      background: rgba(255,255,255,.80) !important;
      box-shadow: 0 36px 90px rgba(0,0,0,.13) !important;
      transform: translateZ(0);
    }

    .showcase-top {
      height: 52px !important;
      border-bottom: 1px solid rgba(0,0,0,.06) !important;
      background: rgba(250,250,252,.82) !important;
    }

    .traffic span:nth-child(1) { background: #ff5f57 !important; }
    .traffic span:nth-child(2) { background: #ffbd2e !important; }
    .traffic span:nth-child(3) { background: #28c840 !important; }
    .showcase-search {
      width: 48% !important;
      background: rgba(0,0,0,.035) !important;
      border-color: transparent !important;
      color: #86868b !important;
    }

    .showcase-body { padding: 18px !important; gap: 16px !important; }
    .showcase-title b { color: #1d1d1f !important; font-weight: 730 !important; }
    .showcase-title span { color: #86868b !important; }
    .showcase-footer {
      background: rgba(245,245,247,.76) !important;
      border-color: rgba(0,0,0,.06) !important;
      border-radius: 20px !important;
    }

    .mock-gallery-grid { gap: 11px !important; }
    .mock-photo {
      border: 1px solid rgba(255,255,255,.75) !important;
      border-radius: 18px !important;
      background-size: cover !important;
      background-position: center !important;
      box-shadow: 0 10px 26px rgba(0,0,0,.08) !important;
    }
    .mock-photo.selected { outline: 3px solid rgba(0,113,227,.92) !important; outline-offset: -3px !important; }
    .mock-photo.selected:after { background: #0071e3 !important; box-shadow: 0 8px 18px rgba(0,113,227,.24) !important; }

    .feature-card {
      min-height: 190px;
      transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease !important;
    }
    .feature-card:hover { transform: translateY(-3px); box-shadow: 0 26px 70px rgba(0,0,0,.10) !important; }
    .feature-icon {
      width: 46px !important;
      height: 46px !important;
      border-radius: 15px !important;
      background: rgba(0,113,227,.10) !important;
      color: #0071e3 !important;
    }

    .layout {
      grid-template-columns: 252px minmax(0, 1fr) !important;
      gap: 22px !important;
      padding: 28px 0 64px !important;
      align-items: start !important;
    }

    .sidebar-wrapper { position: relative; z-index: 20; }
    .sidebar {
      top: 84px !important;
      border-radius: 28px !important;
      padding: 10px !important;
      background: rgba(255,255,255,.70) !important;
      box-shadow: 0 18px 48px rgba(0,0,0,.075) !important;
    }

    .side-btn {
      width: 100% !important;
      border-radius: 16px !important;
      border-color: transparent !important;
      background: transparent !important;
      box-shadow: none !important;
      justify-content: flex-start !important;
      color: #6e6e73 !important;
      min-height: 46px !important;
      padding: 10px 12px !important;
      margin-bottom: 4px !important;
    }

    .side-btn:hover { background: rgba(0,0,0,.045) !important; color: #1d1d1f !important; }
    .side-btn.active {
      background: rgba(0,113,227,.10) !important;
      border-color: transparent !important;
      color: #0071e3 !important;
      box-shadow: none !important;
    }

    .side-icon {
      width: 32px !important;
      height: 32px !important;
      border-radius: 12px !important;
      background: rgba(0,0,0,.045) !important;
      color: currentColor !important;
    }
    .side-btn.active .side-icon { background: rgba(0,113,227,.12) !important; }
    .sidebar-divider { height: 1px; margin: 10px 8px !important; background: rgba(0,0,0,.075) !important; }

    .mobile-menu-btn {
      background: rgba(255,255,255,.76) !important;
      border: 1px solid rgba(0,0,0,.075) !important;
      box-shadow: 0 14px 34px rgba(0,0,0,.08) !important;
      backdrop-filter: blur(22px) saturate(170%) !important;
      -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
      color: #1d1d1f !important;
    }

    .dashboard-head {
      align-items: flex-end !important;
      gap: 18px !important;
      margin-bottom: 20px !important;
    }
    .dashboard-head p { margin-top: 8px !important; }

    .metric {
      min-height: 156px !important;
      position: relative;
    }
    .metric .value {
      color: #1d1d1f !important;
      font-size: 48px !important;
      font-weight: 760 !important;
      letter-spacing: -0.07em !important;
    }
    .metric .sub { color: #86868b !important; }
    .metric .app-icon.s24 {
      background: rgba(0,113,227,.10) !important;
      color: #0071e3 !important;
      box-shadow: none !important;
    }

    .package-card.featured {
      border-color: rgba(0,113,227,.20) !important;
      background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(0,113,227,.055)) !important;
    }
    .price { color: #1d1d1f !important; font-weight: 760 !important; letter-spacing: -0.06em !important; }
    .features li { color: #6e6e73; }
    .features li:before { color: #34c759 !important; }

    .gallery-card {
      grid-template-columns: 110px minmax(0, 1fr) !important;
      gap: 16px !important;
      align-items: center !important;
    }
    .gallery-thumb {
      width: 110px !important;
      border-radius: 22px !important;
      border-color: rgba(0,0,0,.06) !important;
      background: linear-gradient(135deg, #e8eef8, #ffffff) !important;
      color: #86868b !important;
    }

    .file-chip, .drive-count-result {
      background: rgba(245,245,247,.82) !important;
      border: 1px solid rgba(0,0,0,.065) !important;
      color: #424245 !important;
      border-radius: 12px !important;
    }

    .table {
      border-collapse: separate !important;
      border-spacing: 0 !important;
      border-radius: 22px !important;
      overflow: hidden !important;
    }
    .table th {
      background: rgba(245,245,247,.72) !important;
      color: #424245 !important;
      font-weight: 680 !important;
    }
    .table th, .table td {
      border-bottom: 1px solid rgba(0,0,0,.06) !important;
      color: #6e6e73 !important;
    }
    .table tbody tr:hover { background: rgba(0,113,227,.035) !important; }

    .client-page { padding: 28px 0 126px !important; }
    .client-hero {
      border-radius: 34px !important;
      padding: clamp(24px, 4.5vw, 54px) !important;
      background:
        radial-gradient(circle at 95% 0%, rgba(0,113,227,.12), transparent 32%),
        rgba(255,255,255,.80) !important;
      margin-bottom: 18px !important;
    }
    .client-hero h1 { font-size: clamp(34px, 5vw, 64px) !important; }

    .toolbar {
      top: 78px !important;
      border-radius: 24px !important;
      padding: 12px !important;
      background: rgba(255,255,255,.78) !important;
      box-shadow: 0 18px 48px rgba(0,0,0,.075) !important;
    }

    .photo-grid {
      grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)) !important;
      gap: 18px !important;
    }
    .photo-card {
      border-radius: 24px !important;
      border: 1px solid rgba(0,0,0,.075) !important;
      background: rgba(255,255,255,.92) !important;
      box-shadow: 0 10px 26px rgba(0,0,0,.065) !important;
      transform: translateZ(0);
    }
    .photo-card:hover { transform: translateY(-3px) !important; border-color: rgba(0,113,227,.26) !important; box-shadow: 0 24px 48px rgba(0,0,0,.12) !important; }
    .photo-card.selected { border-color: rgba(0,113,227,.92) !important; box-shadow: 0 0 0 4px rgba(0,113,227,.14), 0 24px 48px rgba(0,113,227,.12) !important; }
    .photo-card img { background: #f5f5f7 !important; filter: saturate(1.02) contrast(1.01) !important; }
    .photo-overlay {
      background: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,.56) 100%) !important;
      font-weight: 680 !important;
      letter-spacing: -0.01em !important;
    }
    .checkmark {
      background: rgba(255,255,255,.86) !important;
      color: #1d1d1f !important;
      border: 1px solid rgba(0,0,0,.08) !important;
      box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
    }
    .photo-card.selected .checkmark { background: #0071e3 !important; color: #fff !important; }
    .photo-zoom-btn, .download-photo-btn {
      background: rgba(255,255,255,.82) !important;
      color: #1d1d1f !important;
      border: 1px solid rgba(0,0,0,.08) !important;
      box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
      backdrop-filter: blur(18px) saturate(170%) !important;
      -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
    }

    .bottom-bar {
      width: min(900px, calc(100% - 32px)) !important;
      border-radius: 28px !important;
      background: rgba(255,255,255,.82) !important;
      box-shadow: 0 24px 70px rgba(0,0,0,.14) !important;
    }

    .modal-backdrop { background: rgba(245,245,247,.66) !important; backdrop-filter: blur(24px) saturate(140%) !important; -webkit-backdrop-filter: blur(24px) saturate(140%) !important; }
    .modal { border-radius: 32px !important; background: rgba(255,255,255,.92) !important; }
    .close-x, .assistant-close { background: rgba(0,0,0,.045) !important; color: #1d1d1f !important; }

    .toast-wrap { bottom: 22px !important; }
    .toast { border-radius: 20px !important; background: rgba(255,255,255,.86) !important; color: #1d1d1f !important; }
    .empty {
      background: rgba(255,255,255,.55) !important;
      border: 1px dashed rgba(0,0,0,.14) !important;
      color: #6e6e73 !important;
      border-radius: 28px !important;
    }

    .floating-dock {
      right: 20px !important;
      bottom: 20px !important;
      gap: 10px !important;
    }
    .support-btn {
      border-radius: 999px !important;
      padding: 12px 14px !important;
    }
    .assistant-panel {
      border: 1px solid rgba(0,0,0,.08) !important;
      background: rgba(255,255,255,.88) !important;
      border-radius: 30px !important;
      box-shadow: 0 28px 82px rgba(0,0,0,.14) !important;
      backdrop-filter: blur(28px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    }
    .assistant-head { border-bottom-color: rgba(0,0,0,.06) !important; }
    .bubble { border-radius: 20px !important; }
    .chat-row.user .bubble { background: #0071e3 !important; color: #fff !important; }
    .chat-row.bot .bubble { background: rgba(0,0,0,.045) !important; color: #1d1d1f !important; }

    .selecta-lightbox { background: rgba(0,0,0,.82) !important; backdrop-filter: blur(28px) saturate(160%) !important; -webkit-backdrop-filter: blur(28px) saturate(160%) !important; }
    .lightbox-top { background: rgba(0,0,0,.34) !important; border-bottom-color: rgba(255,255,255,.12) !important; }
    .lightbox-stage img { border-radius: 22px !important; box-shadow: 0 30px 100px rgba(0,0,0,.55) !important; }

    .app-icon { stroke-width: 1.85 !important; }
    .loader-ring { border-color: rgba(0,0,0,.10) !important; border-top-color: #0071e3 !important; }

    @media (min-width: 1500px) {
      .shell { width: min(1360px, calc(100% - 112px)) !important; }
      .photo-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }
    }

    @media (max-width: 1080px) {
      .landing-hero { grid-template-columns: 1fr !important; min-height: auto !important; }
      .landing-showcase { max-width: 740px; width: 100%; margin: 0 auto; }
      .layout { grid-template-columns: 1fr !important; }
      .dashboard-head { align-items: flex-start !important; }
    }

    @media (max-width: 760px) {
      .shell { width: calc(100% - 28px) !important; }
      .topbar .shell { min-height: 62px !important; height: auto !important; padding: 10px 0 !important; }
      .logo small { display: none !important; }
      .nav-actions { gap: 7px !important; }
      .nav-actions .btn { min-height: 38px !important; padding: 8px 11px !important; font-size: 13px !important; }
      .nav-actions .pill { font-size: 11px !important; padding: 6px 8px !important; }
      .avatar { width: 34px !important; height: 34px !important; }
      h1 { font-size: clamp(40px, 13vw, 58px) !important; }
      .lead { font-size: 16px !important; }
      .landing-hero { padding: 38px 0 32px !important; }
      .hero-actions { display: grid !important; grid-template-columns: 1fr !important; }
      .hero-actions .btn { width: 100% !important; }
      .stats, .grid.cols-2, .grid.cols-3, .grid.cols-4, .form-grid { grid-template-columns: 1fr !important; }
      .showcase-search { width: 58% !important; }
      .layout { padding: 18px 0 52px !important; }
      .mobile-menu-btn { display: inline-grid !important; place-items: center !important; width: 46px !important; height: 46px !important; border-radius: 16px !important; margin-bottom: 14px !important; position: sticky !important; top: 76px !important; z-index: 45 !important; }
      .mobile-menu-backdrop { display: none !important; position: fixed !important; inset: 0 !important; z-index: 59 !important; background: rgba(0,0,0,.18) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }
      .mobile-menu-backdrop.open { display: block !important; }
      .sidebar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 60 !important;
        width: min(86vw, 340px) !important;
        height: 100dvh !important;
        padding: 22px 14px calc(22px + env(safe-area-inset-bottom)) !important;
        border-radius: 0 30px 30px 0 !important;
        transform: translateX(-105%) !important;
        transition: transform .34s cubic-bezier(.2,.8,.2,1) !important;
        overflow-y: auto !important;
      }
      .sidebar.open { transform: translateX(0) !important; }
      .client-hero { grid-template-columns: 1fr !important; border-radius: 28px !important; padding: 22px !important; }
      .toolbar { position: static !important; grid-template-columns: 1fr !important; border-radius: 24px !important; }
      .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px !important; }
      .photo-card { border-radius: 18px !important; }
      .photo-overlay { padding: 10px !important; font-size: 11px !important; }
      .bottom-bar { flex-direction: column !important; align-items: stretch !important; border-radius: 26px !important; bottom: max(12px, env(safe-area-inset-bottom)) !important; }
      .bottom-bar .btn { width: 100% !important; }
      .gallery-card { grid-template-columns: 1fr !important; }
      .gallery-thumb { width: 100% !important; aspect-ratio: 16 / 7 !important; }
      .assistant-panel { right: 12px !important; left: 12px !important; bottom: 84px !important; width: auto !important; }
      .support-btn span { display: none !important; }
      .support-btn { width: 48px !important; height: 48px !important; padding: 0 !important; justify-content: center !important; }
    }

    @media (max-width: 430px) {
      .shell { width: calc(100% - 20px) !important; }
      .mock-gallery-grid { gap: 8px !important; }
      .showcase-body { padding: 12px !important; }
      .photo-grid { gap: 9px !important; }
      .checkmark { width: 30px !important; height: 30px !important; top: 8px !important; right: 8px !important; }
      .photo-zoom-btn, .download-photo-btn { display: none !important; }
    }

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