*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #f7f5f0;
      --fg: #1a1a18;
      --muted: #8a8880;
      --accent: #c8693a;
      --accent-light: #f0e6df;
      --border: #e2ded8;
      --card: #ffffff;
      --nav-h: 64px;
    }

    body {
      background: var(--bg);
      color: var(--fg);
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }

    /* ── LOGIN ── */
    #login-screen {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .login-box {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 48px;
      width: 100%;
      max-width: 400px;
    }

    .login-logo {
      font-family: 'DM Serif Display', serif;
      font-size: 1.8rem;
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }

    .login-logo em { color: var(--accent); font-style: italic; }

    .login-sub {
      font-family: 'DM Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 36px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    .form-label {
      font-family: 'DM Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      display: block;
      margin-bottom: 8px;
    }

    .form-input {
      width: 100%;
      padding: 10px 14px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 5px;
      color: var(--fg);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.9rem;
      outline: none;
      transition: border 0.2s;
    }

    .form-input:focus { border-color: var(--accent); }

    .login-btn {
      width: 100%;
      padding: 12px;
      background: var(--fg);
      color: var(--bg);
      border: none;
      border-radius: 5px;
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      margin-top: 8px;
      transition: background 0.2s;
    }

    .login-btn:hover { background: var(--accent); }

    .login-error {
      font-size: 0.8rem;
      color: #c0392b;
      margin-top: 12px;
      display: none;
      font-family: 'DM Mono', monospace;
    }

    /* ── APP ── */
    #app-screen { display: none; min-height: 100vh; flex-direction: column; }

    /* ── NAV ── */
    nav {
      position: sticky;
      top: 0;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      background: rgba(247, 245, 240, 0.9);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      z-index: 100;
    }

    .nav-left { display: flex; align-items: center; gap: 20px; }

    .nav-logo {
      font-family: 'DM Serif Display', serif;
      font-size: 1.15rem;
      color: var(--fg);
      text-decoration: none;
      letter-spacing: -0.01em;
    }

    .nav-divider { width: 1px; height: 18px; background: var(--border); }

    .nav-path {
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .nav-path span { cursor: pointer; transition: color 0.15s; }
    .nav-path span:hover { color: var(--accent); }
    .nav-path .sep { color: var(--border); }

    .nav-right { display: flex; align-items: center; gap: 12px; }

    .nav-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border-radius: 4px;
      font-family: 'DM Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.15s;
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--fg);
    }

    .nav-btn:hover { border-color: var(--accent); color: var(--accent); }

    .nav-btn.primary {
      background: var(--fg);
      color: var(--bg);
      border-color: var(--fg);
    }

    .nav-btn.primary:hover { background: var(--accent); border-color: var(--accent); }

    .nav-btn svg { width: 14px; height: 14px; }

    /* ── MAIN ── */
    main { flex: 1; padding: 40px; max-width: 1200px; margin: 0 auto; width: 100%; }

    /* ── TOOLBAR ── */
    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 28px;
    }

    .toolbar-left { display: flex; align-items: center; gap: 12px; }

    .file-count {
      font-family: 'DM Mono', monospace;
      font-size: 0.68rem;
      color: var(--muted);
      letter-spacing: 0.06em;
    }

    .view-toggle { display: flex; gap: 4px; }

    .view-btn {
      padding: 6px 8px;
      border: 1px solid var(--border);
      background: var(--card);
      border-radius: 4px;
      cursor: pointer;
      color: var(--muted);
      transition: all 0.15s;
    }

    .view-btn.active, .view-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    /* ── GRID VIEW ── */
    #file-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 12px;
    }

    #file-grid.list-view {
      grid-template-columns: 1fr;
      gap: 2px;
    }

    .file-item {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: all 0.15s;
      position: relative;
      text-align: center;
      user-select: none;
      overflow: hidden;
    }

    .file-item:hover {
      border-color: var(--accent);
      background: var(--accent-light);
      transform: translateY(-1px);
    }

    .file-item.selected {
      border-color: var(--accent);
      background: var(--accent-light);
    }

    .file-item.dragging { opacity: 0.45; transform: scale(0.97); }
    .file-item.drop-target, #file-grid.drop-target {
      outline: 2px dashed var(--accent);
      outline-offset: 3px;
      background: var(--accent-light);
    }
    .clipboard-actions { display: flex; align-items: center; gap: 8px; }
    #paste-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

    .file-thumb {
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: 4px;
      overflow: hidden;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
    }

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

    .file-thumb .thumb-placeholder {
      font-size: 1.4rem;
      color: var(--muted);
      opacity: 0.5;
    }

    #file-grid.list-view .file-item {
      flex-direction: row;
      padding: 8px 16px;
      border-radius: 5px;
      text-align: left;
      transform: none !important;
      gap: 12px;
    }

    #file-grid.list-view .file-thumb {
      width: 48px;
      height: 48px;
      aspect-ratio: auto;
      border-radius: 4px;
      flex-shrink: 0;
      margin-bottom: 0;
    }

    #file-grid.list-view .file-thumb img {
      object-fit: cover;
    }

    #file-grid.list-view .file-icon { font-size: 1.2rem; }
    #file-grid.list-view .file-name { flex: 1; font-size: 0.875rem; display: flex; align-items: center; }
    #file-grid.list-view .file-meta { margin-left: auto; display: flex; align-items: center; }

    .file-icon {
      font-size: 2rem;
      line-height: 1;
      flex-shrink: 0;
    }

    .file-name {
      font-size: 0.8rem;
      color: var(--fg);
      word-break: break-word;
      line-height: 1.3;
      width: 100%;
    }

    #file-grid.list-view .file-name { flex: 1; font-size: 0.875rem; }

    .file-meta {
      font-family: 'DM Mono', monospace;
      font-size: 0.62rem;
      color: var(--muted);
      letter-spacing: 0.04em;
    }

    .file-date {
      width: 100%;
      color: var(--muted);
      font-family: 'DM Mono', monospace;
      font-size: 0.56rem;
      line-height: 1.35;
      letter-spacing: 0.01em;
    }

    #file-grid.list-view .file-date {
      width: auto;
      margin-left: 12px;
      white-space: nowrap;
      display: flex;
      align-items: center;
    }

    #file-grid.list-view .file-meta { margin-left: auto; }

    /* ── CONTEXT MENU ── */
    #context-menu {
      position: fixed;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
      padding: 6px;
      z-index: 999;
      min-width: 160px;
      display: none;
    }

    .ctx-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 5px;
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.1s;
      color: var(--fg);
    }

    .ctx-item:hover { background: var(--accent-light); color: var(--accent); }
    .ctx-item.danger:hover { background: #fde8e8; color: #c0392b; }
    .share-exp-btn {
      padding: 6px 14px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: var(--bg);
      color: var(--muted);
      font-size: 0.8rem;
      cursor: pointer;
      transition: all .15s;
    }
    .share-exp-btn:hover, .share-exp-btn.active {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }
    .ctx-divider { height: 1px; background: var(--border); margin: 4px 0; }

    /* ── EMPTY STATE ── */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 0;
      gap: 16px;
      color: var(--muted);
    }

    .empty-icon { font-size: 3rem; }

    .empty-title {
      font-family: 'DM Serif Display', serif;
      font-size: 1.4rem;
      color: var(--fg);
    }

    .empty-sub { font-size: 0.875rem; }

    /* ── LOADING ── */
    .loading {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60px;
      gap: 8px;
      color: var(--muted);
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.08em;
    }

    @keyframes spin { to { transform: rotate(360deg); } }
    .spinner {
      width: 16px; height: 16px;
      border: 2px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    /* ── UPLOAD ZONE ── */
    #drop-zone {
      position: fixed;
      inset: 0;
      background: rgba(200, 105, 58, 0.08);
      border: 3px dashed var(--accent);
      border-radius: 12px;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 500;
      font-family: 'DM Serif Display', serif;
      font-size: 2rem;
      color: var(--accent);
      pointer-events: none;
    }

    /* ── MODAL ── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(26, 26, 24, 0.4);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 200;
      backdrop-filter: blur(4px);
    }

    .modal-overlay.open { display: flex; }

    .modal {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 36px;
      width: 100%;
      max-width: 400px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    }

    .modal h3 {
      font-family: 'DM Serif Display', serif;
      font-size: 1.3rem;
      margin-bottom: 20px;
      letter-spacing: -0.01em;
    }

    .modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }

    .modal-btn {
      padding: 9px 20px;
      border-radius: 4px;
      font-family: 'DM Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--fg);
      transition: all 0.15s;
    }

    .modal-btn.confirm { background: var(--fg); color: var(--bg); border-color: var(--fg); }
    .modal-btn.confirm:hover { background: var(--accent); border-color: var(--accent); }
    .modal-btn.danger { background: #c0392b; color: white; border-color: #c0392b; }
    .modal-btn:hover { border-color: var(--accent); color: var(--accent); }

    /* ── TOAST ── */
    #toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: var(--fg);
      color: var(--bg);
      padding: 12px 20px;
      border-radius: 6px;
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      z-index: 999;
      opacity: 0;
      transform: translateY(8px);
      transition: all 0.2s;
      pointer-events: none;
    }

    #toast.show { opacity: 1; transform: translateY(0); }

    /* ── PREVIEW ── */
    .preview-box {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      width: 90vw;
      max-width: 900px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 24px 80px rgba(0,0,0,0.15);
    }

    .preview-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .preview-title {
      font-family: 'DM Mono', monospace;
      font-size: 0.75rem;
      color: var(--muted);
      letter-spacing: 0.06em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 60%;
    }

    .preview-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .preview-actions .modal-btn { width: auto; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

    .preview-body {
      flex: 1;
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      min-height: 200px;
    }

    .preview-body img {
      max-width: 100%;
      max-height: 70vh;
      border-radius: 6px;
      object-fit: contain;
    }

    .preview-body video {
      max-width: 100%;
      max-height: 70vh;
      border-radius: 6px;
    }

    .preview-body audio {
      width: 100%;
    }

    .preview-body iframe {
      width: 100%;
      height: 70vh;
      border: none;
      border-radius: 6px;
    }

    .preview-body pre {
      width: 100%;
      font-family: 'DM Mono', monospace;
      font-size: 0.8rem;
      line-height: 1.7;
      color: var(--fg);
      white-space: pre-wrap;
      word-break: break-word;
      text-align: left;
      padding: 8px;
    }

    /* ── TEXT / CODE EDITOR ── */
    .editor-box {
      width: min(1100px, 94vw);
      height: min(860px, 92vh);
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 24px 80px rgba(0,0,0,0.18);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .editor-header, .editor-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; flex-shrink:0; }
    .editor-header { border-bottom: 1px solid var(--border); }
    .editor-footer { border-top: 1px solid var(--border); }
    .editor-heading { min-width: 0; }
    .editor-title { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .editor-path, .editor-status { color:var(--muted); font-family:'DM Mono',monospace; font-size:0.68rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .editor-path { margin-top:3px; }
    #editor-textarea {
      flex:1; width:100%; min-height:0; resize:none; border:0; outline:0; border-radius:0;
      padding:18px 20px; background:#181816; color:#f4f0e8; caret-color:#f2a16e;
      font:400 0.83rem/1.65 'DM Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
      tab-size:2; white-space:pre; overflow:auto;
    }
    .editor-actions { display:flex; gap:8px; flex-shrink:0; }
    .editor-actions .modal-btn, .editor-close { width:auto; }
    .editor-status.error { color:var(--danger); }
    .editor-status.saved { color:#3f8f5f; }

    .preview-unsupported {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      color: var(--muted);
    }

    .preview-unsupported .big-icon { font-size: 3rem; }
    .preview-unsupported p { font-size: 0.875rem; }

    /* ── PREVIEW ── */
    #upload-progress {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px 24px;
      min-width: 280px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
      display: none;
      z-index: 300;
    }

    .progress-label {
      font-family: 'DM Mono', monospace;
      font-size: 0.68rem;
      color: var(--muted);
      margin-bottom: 8px;
      letter-spacing: 0.06em;
    }

    .progress-bar {
      height: 3px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: var(--accent);
      border-radius: 2px;
      transition: width 0.2s;
      width: 0%;
    }

    /* ── HIDDEN FILE INPUT ── */
    #file-input { display: none; }

    /* ── ANIMATIONS ── */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.96); }
      to   { opacity: 1; transform: scale(1); }
    }

    #login-screen { animation: fadeIn 0.3s ease; }
    .login-box { animation: scaleIn 0.3s ease; }
    .modal-overlay.open .modal { animation: scaleIn 0.2s ease; }
    .file-item { animation: fadeIn 0.2s ease both; }
    .modal-overlay { transition: background 0.2s; }
    #toast { transition: opacity 0.25s, transform 0.25s; }

    /* ── MOBILE ── */
    @media (max-width: 640px) {
      /* Nav */
      nav { padding: 0 10px; gap: 4px; max-width: 100vw; overflow: hidden; }
      .nav-left { flex: 0 0 auto; gap: 0; }
      .nav-divider { display: none; }
      .nav-path { display: none; }
      .nav-logo { font-size: 0.95rem; white-space: nowrap; }

      /* Nav buttons — icon only on mobile */
      .nav-btn span { display: none; }
      .nav-btn { padding: 7px; border-radius: 8px; min-width: 34px; min-height: 36px; justify-content: center; }
      .nav-btn svg { width: 15px; height: 15px; }
      .nav-right { flex: 1 1 auto; min-width: 0; gap: 4px; justify-content: flex-end; }

      /* Main */
      main { padding: 16px; }

      /* Toolbar */
      .toolbar { margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
      .toolbar-left { min-width: 0; flex: 1 1 auto; flex-wrap: wrap; gap: 8px; }
      .file-count { font-size: 0.62rem; }

      /* Grid */
      #file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .file-icon { font-size: 1.6rem; }
      .file-name { font-size: 0.72rem; }
      .file-date { font-size: 0.52rem; }
      .file-item { min-width: 0; min-height: 132px; padding: 14px 10px; gap: 7px; border-radius: 10px; justify-content: center; }
      #file-grid:not(.list-view) .file-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      .search-box { flex-basis: 100%; min-width: 0; }
      .control-select { flex: 1 1 0; min-width: 0; }

      /* List view on mobile */
      #file-grid.list-view { gap: 2px; }
      #file-grid.list-view .file-item { padding: 10px 12px; }

      /* Login */
      .login-box { padding: 28px 20px; border-radius: 16px; }
      .login-logo { font-size: 1.5rem; }

      /* Modals — slide up from bottom on mobile */
      .modal-overlay { align-items: flex-end; }
      .modal {
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        animation: slideUp 0.25s ease;
        padding: 28px 20px;
      }
      .modal-actions { flex-direction: column-reverse; }
      .modal-btn { width: 100%; text-align: center; padding: 12px; }

      /* Preview modal full screen on mobile */
      .preview-box {
        width: 100vw;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 16px 16px 0 0;
      }
      .editor-box { width:100vw; height:100dvh; border-radius:0; border:0; }
      .editor-header, .editor-footer { padding:10px 12px; }
      #editor-textarea { padding:14px 12px; font-size:16px; }
      .editor-footer { align-items:flex-end; }
      .editor-status { white-space:normal; line-height:1.35; }

      /* Toast — above FAB */
      #toast { bottom: 88px; right: 16px; left: 16px; text-align: center; }

      /* Upload progress */
      #upload-progress { bottom: 88px; width: calc(100% - 32px); min-width: unset; }

      /* Context menu — full width at bottom on mobile */
      #context-menu {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        top: auto !important;
        width: auto !important;
        border-radius: 12px;
        min-width: unset;
        padding: 8px;
      }
      .ctx-item { padding: 14px 16px; font-size: 0.95rem; }

      /* FAB — mobile upload button */
      #mobile-fab {
        display: flex;
      }
    }

    /* FAB — hidden on desktop */
    #mobile-fab {
      display: none;
      position: fixed;
      bottom: 24px;
      right: 20px;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      border: none;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(200, 105, 58, 0.4);
      z-index: 150;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    #mobile-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(200,105,58,0.5); }
    #mobile-fab svg { width: 22px; height: 22px; }

    /* ── USERS PANEL ── */
    .user-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border: 1px solid var(--border);
      border-radius: 6px;
      margin-bottom: 8px;
      background: var(--bg);
    }

    .user-row-left { display: flex; align-items: center; gap: 12px; }

    .user-avatar {
      width: 34px; height: 34px;
      background: var(--accent-light);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'DM Serif Display', serif;
      font-size: 0.9rem;
      color: var(--accent);
      flex-shrink: 0;
    }

    .user-info-name {
      font-size: 0.875rem;
      font-weight: 400;
      color: var(--fg);
    }

    .user-info-scope {
      font-family: 'DM Mono', monospace;
      font-size: 0.62rem;
      color: var(--muted);
      letter-spacing: 0.04em;
      margin-top: 2px;
    }

    .user-badge {
      font-family: 'DM Mono', monospace;
      font-size: 0.6rem;
      padding: 2px 8px;
      border-radius: 3px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .user-badge.admin { background: var(--accent-light); color: var(--accent); }
    .user-badge.user  { background: #e8f4e8; color: #2d7a2d; }

    .user-row-actions { display: flex; gap: 8px; align-items: center; }

/* ── FILE MANAGER 2.0 ── */
[hidden] { display:none !important; }
.finder-bar { display:flex; gap:10px; align-items:center; margin:0 0 16px; flex-wrap:wrap; }
.search-box { flex:1; min-width:220px; display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--card); border:1px solid var(--border); border-radius:7px; }
.search-box:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--fg); font:0.82rem 'DM Sans',sans-serif; }
.control-select { padding:9px 12px; border:1px solid var(--border); border-radius:7px; background:var(--card); color:var(--fg); font:0.72rem 'DM Mono',monospace; }
.nav-btn.compact { padding:6px 9px; font-size:.62rem; }
.selection-bar { display:flex; align-items:center; gap:8px; padding:10px 12px; margin-bottom:14px; border:1px solid var(--accent); background:var(--accent-light); border-radius:8px; overflow-x:auto; }
.selection-bar strong { margin-right:auto; white-space:nowrap; font:500 .72rem 'DM Mono',monospace; }
.selection-bar button, #mobile-selection-bar button { border:1px solid var(--border); background:var(--card); border-radius:5px; padding:7px 10px; cursor:pointer; white-space:nowrap; }
.selection-bar button.danger { color:#b82e24; }
.file-item.cut { opacity:.48; }
.file-item.keyboard-focus { outline:2px solid var(--accent); outline-offset:2px; }
.file-item[aria-selected="true"]::after { content:'✓'; position:absolute; top:8px; right:8px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; color:white; background:var(--accent); font-size:12px; }
.file-item { position:relative; user-select:none; }
#file-grid.selecting { cursor:crosshair; }
.selection-rect { position:fixed; border:1px solid var(--accent); background:rgba(200,105,58,.13); pointer-events:none; z-index:300; }
.modal.wide-modal { width:min(680px,calc(100% - 32px)); max-width:680px; }
.modal-heading, .progress-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#share-manager-modal { padding:24px; }
#share-manager-modal .wide-modal {
  max-height:calc(100dvh - 48px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
}
#share-manager-modal .modal-heading {
  flex:0 0 auto;
  padding:22px 24px 16px;
  border-bottom:1px solid var(--border);
  background:var(--card);
  z-index:1;
}
#share-manager-modal .modal-heading h3 { margin:0; }
#share-manager-list { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 24px 12px; }
.manager-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:0 0 auto; }
.manager-row .meta.warning { color:#a14f2a; font-weight:500; }
.manager-row button.danger { color:#a13d33; }
.muted-copy { color:var(--muted); font-size:.85rem; margin-bottom:16px; }
.modal-actions.wrap { flex-wrap:wrap; }
.check-row { display:flex; gap:8px; align-items:center; margin:14px 0; font-size:.8rem; }
.picker-path { font:0.68rem 'DM Mono',monospace; color:var(--muted); margin-bottom:10px; }
.picker-list { max-height:360px; overflow:auto; border:1px solid var(--border); border-radius:7px; }
.picker-row,.manager-row { display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid var(--border); }
.picker-row:last-child,.manager-row:last-child { border:0; }
.picker-row { cursor:pointer; }
.picker-row:hover { background:var(--accent-light); }
.manager-row .grow { flex:1; min-width:0; }
.manager-row .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; }
.manager-row .meta { color:var(--muted); font:0.62rem 'DM Mono',monospace; margin-top:3px; }
.manager-row button { border:1px solid var(--border); background:var(--card); border-radius:5px; padding:6px 9px; cursor:pointer; }
.preview-toolbar { display:flex; align-items:center; gap:6px; padding:7px 16px; border-bottom:1px solid var(--border); }
.preview-toolbar button { border:1px solid var(--border); background:var(--card); border-radius:5px; min-width:30px; height:30px; cursor:pointer; }
.preview-spacer { flex:1; }
#preview-position { color:var(--muted); font:0.65rem 'DM Mono',monospace; }
.preview-meta { padding:8px 20px; border-top:1px solid var(--border); color:var(--muted); font:0.65rem 'DM Mono',monospace; }
.preview-body img.preview-transform { transition:transform .15s; transform:scale(var(--preview-scale,1)) rotate(var(--preview-rotate,0deg)); }
#upload-progress button { border:0; background:transparent; color:var(--accent); cursor:pointer; font:0.65rem 'DM Mono',monospace; }
#toast { display:flex; align-items:center; gap:12px; }
#toast-action { border:0; background:transparent; color:#fff; text-decoration:underline; cursor:pointer; font-weight:600; }
#mobile-selection-bar { display:none; position:fixed; left:8px; right:8px; bottom:8px; z-index:450; align-items:center; gap:6px; padding:9px; background:var(--fg); color:var(--bg); border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.25); }
#mobile-selection-bar span { margin-right:auto; font:.65rem 'DM Mono',monospace; }
.long-press-active { transform:scale(.97); }
.permission-hidden { display:none !important; }

@media (max-width:640px) {
  #mobile-fab { display:flex; }
  .finder-bar { gap:7px; }
  .search-box { flex-basis:100%; min-width:100%; }
  .control-select { flex:1; min-width:0; }
  .selection-bar { display:none !important; }
  #mobile-selection-bar.active { display:flex; }
  #mobile-selection-bar button { padding:7px 8px; font-size:.7rem; }
  .preview-title { max-width:32%; }
  .preview-actions .modal-btn { padding:9px; font-size:.62rem; }
  .preview-actions .modal-btn svg { display:none; }
  .preview-toolbar { overflow-x:auto; }
  .manager-row { align-items:flex-start; flex-wrap:wrap; }
  .manager-actions { width:100%; justify-content:flex-start; flex-wrap:wrap; }
  #share-manager-modal { padding:0; }
  #share-manager-modal .modal.wide-modal { width:100%; max-height:92dvh; border-radius:16px 16px 0 0; }
  #share-manager-list { padding-inline:16px; }
  .modal.wide-modal { max-width:100%; }
}