:root{
    --blue:#1a73e8; --blue-ink:#1967d2; --blue-wash:#e8f0fe;
    --bg:#ffffff; --surface:#ffffff; --raised:#ffffff;
    --fg:#202124; --muted:#5f6368; --faint:#80868b;
    --line:#e0e3e7; --line-soft:#edf0f3; --hover:#f1f3f4; --field:#f1f3f4;
    --danger:#d93025; --danger-wash:#fce8e6; --ok:#188038; --ok-wash:#e6f4ea;
    --warn:#e37400; --warn-wash:#fef7e0;
    --shadow-1:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
    --shadow-2:0 1px 3px rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15);
    --radius:8px; --radius-lg:16px;
    --font: "Google Sans","Product Sans",Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --blue:#8ab4f8; --blue-ink:#8ab4f8; --blue-wash:#1f3047;
      --bg:#202124; --surface:#202124; --raised:#2a2b2f;
      --fg:#e8eaed; --muted:#9aa0a6; --faint:#80868b;
      --line:#3c4043; --line-soft:#303134; --hover:#303134; --field:#303134;
      --danger:#f28b82; --danger-wash:#3a2a29; --ok:#81c995; --ok-wash:#26332a;
      --warn:#fdd663; --warn-wash:#332c1a;
      --shadow-1:0 1px 2px rgba(0,0,0,.5),0 1px 3px 1px rgba(0,0,0,.3);
      --shadow-2:0 1px 3px rgba(0,0,0,.5),0 4px 8px 3px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="light"]{ color-scheme:light; }
  :root[data-theme="dark"]{ color-scheme:dark; }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);
    font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
  a{color:var(--blue-ink);text-decoration:none}
  a:hover{text-decoration:underline}
  h1{font-size:22px;font-weight:500;margin:0} h2{font-size:16px;font-weight:500;margin:0}
  .muted{color:var(--muted)} .faint{color:var(--faint)}
  .mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
  .only-mobile{display:none}

  /* ---------- app shell ---------- */
  .app{display:grid;grid-template-columns:256px 1fr;grid-template-rows:64px 1fr;
    grid-template-areas:"brand top" "side main";height:100vh;height:100dvh}
  /* Inside the AndroHQ frame HQ already draws a header, so drop ours and give the row to
     the topbar. Only above the mobile breakpoint — below it the hamburger lives in the
     brandbar and hiding it would strand the sidebar. */
  @media (min-width:821px){
    body.embedded .app{grid-template-areas:"top top" "side main"}
    body.embedded .brandbar{display:none}
  }
  .brandbar{grid-area:brand;display:flex;align-items:center;gap:11px;padding:0 18px;color:var(--fg)}
  .brandbar .logo{width:30px;height:30px;flex:none;fill:var(--blue)}
  .brandbar .wm .name{font-size:19px;font-weight:600;line-height:1.05;letter-spacing:-.01em}
  .brandbar .wm .sub{font-size:10px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
  .brandbar .andro{color:var(--fg)} .brandbar .share{color:var(--blue)}
  .hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;
    margin-left:-8px;border:0;border-radius:50%;background:transparent;color:var(--fg);cursor:pointer}
  .hamburger:hover{background:var(--hover)} .hamburger svg{width:24px;height:24px;fill:currentColor}
  .navscrim{display:none;position:fixed;inset:0;background:rgba(32,33,36,.5);z-index:94}
  .topbar{grid-area:top;display:flex;align-items:center;gap:16px;padding:0 24px}
  .sidebar{grid-area:side;padding:8px 12px;overflow-y:auto}
  .content{grid-area:main;background:var(--surface);
    border-top-left-radius:16px;border:1px solid var(--line-soft);border-right:0;border-bottom:0;
    overflow-y:auto;padding:24px 32px 80px}
  @media (max-width:820px){
    body{overflow-x:hidden}
    .app{grid-template-columns:1fr;grid-template-rows:56px 54px 1fr;
      grid-template-areas:"brand" "top" "main"}
    .brandbar{padding:0 8px 0 12px;box-shadow:0 1px 0 var(--line-soft)}
    .hamburger{display:inline-flex}
    .topbar{padding:0 12px 8px;gap:8px}
    .topbar .iconbtn{display:none}          /* sign-out/shared move into the drawer */
    .topbar .spacer{display:none}           /* else it steals half the row from the search */
    .search{max-width:none}                 /* let the search fill the row */
    .content{border-radius:0;border:0;padding:16px 14px 96px}
    /* sidebar becomes an off-canvas drawer */
    .sidebar{position:fixed;top:0;left:0;bottom:0;width:290px;max-width:82vw;z-index:95;
      background:var(--bg);padding:14px 12px;transform:translateX(-100%);
      transition:transform .22s ease;box-shadow:2px 0 26px rgba(0,0,0,.22);grid-area:auto}
    body.nav-open .sidebar{transform:none}
    body.nav-open .navscrim{display:block}
    li.only-mobile{display:block}
  }

  /* ---------- search ---------- */
  .search{flex:1;max-width:640px;display:flex;align-items:center;gap:10px;
    background:var(--field);border:1px solid transparent;border-radius:999px;
    padding:9px 16px;color:var(--muted);transition:.15s}
  .search:focus-within{background:var(--raised);border-color:var(--line);box-shadow:var(--shadow-1)}
  /* higher specificity than the generic input[type=text] rule so the search
     doesn't render as a boxed white field inside the pill */
  .search input[type=text]{border:0;background:transparent;outline:0;color:var(--fg);
    font:inherit;width:100%;padding:0;border-radius:0;box-shadow:none}
  .search input[type=text]:focus{border:0;box-shadow:none}
  .search svg{width:20px;height:20px;flex:none;fill:var(--muted)}
  .topbar .spacer{flex:1}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;
    padding:9px 20px;font:inherit;font-weight:500;font-size:14px;cursor:pointer;
    background:var(--blue);color:#fff;transition:.12s;white-space:nowrap}
  .btn:hover{filter:brightness(1.05);text-decoration:none;box-shadow:var(--shadow-1)}
  .btn.ghost{background:transparent;color:var(--blue-ink);border:1px solid var(--line)}
  .btn.ghost:hover{background:var(--hover);box-shadow:none;filter:none}
  .btn.danger{background:var(--danger);color:#fff}
  .btn.subtle{background:var(--hover);color:var(--fg)}
  @media (prefers-color-scheme: dark){ .btn{color:#202124} .btn.danger{color:#202124} }
  .iconbtn{display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:var(--muted);cursor:pointer}
  .iconbtn:hover{background:var(--hover)}
  .iconbtn svg{width:20px;height:20px;fill:currentColor}

  /* the Drive "New" button */
  .newbtn{display:inline-flex;align-items:center;gap:12px;background:var(--raised);
    color:var(--fg);border:1px solid var(--line);border-radius:16px;
    padding:14px 22px 14px 18px;font:inherit;font-weight:500;font-size:15px;
    cursor:pointer;box-shadow:var(--shadow-1);margin:6px 4px 14px;transition:.12s}
  .newbtn:hover{box-shadow:var(--shadow-2)}
  .newbtn .plus{font-size:22px;line-height:0;color:var(--blue);font-weight:400}

  /* ---------- sidebar nav ---------- */
  .nav{list-style:none;margin:6px 0;padding:0}
  .nav a{display:flex;align-items:center;gap:16px;padding:9px 16px;
    border-radius:999px;color:var(--fg);font-weight:500;font-size:14px}
  .nav a:hover{background:var(--hover);text-decoration:none}
  .nav a.active{background:var(--blue-wash);color:var(--blue-ink)}
  .nav a svg{width:20px;height:20px;fill:currentColor;opacity:.8}
  .sidenote{margin:16px 12px;color:var(--faint);font-size:12px;line-height:1.6}
  .quota{margin:14px 12px}
  .quota .bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
  .quota .bar i{display:block;height:100%;background:var(--blue);width:6%}

  /* ---------- page header ---------- */
  .pagehead{display:flex;align-items:center;gap:14px;margin:6px 0 22px}
  .pagehead h1{flex:1}
  .crumbs{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:500}
  .crumbs a{color:var(--fg)} .crumbs .sep{color:var(--faint);font-weight:400}
  .seclabel{font-size:11px;font-weight:600;color:var(--faint);letter-spacing:.06em;
    text-transform:uppercase;margin:26px 0 12px}
  .seclabel:first-child{margin-top:6px}

  /* ---------- folder cards (shares) ---------- */
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
  .fcard{position:relative;display:block;background:var(--raised);border:1px solid var(--line-soft);
    border-radius:12px;padding:13px 15px;color:var(--fg);transition:box-shadow .13s,border-color .13s}
  .fcard:hover{text-decoration:none;box-shadow:var(--shadow-1);border-color:var(--line)}
  .fcard .top{display:flex;align-items:center;gap:11px}
  .fcard .fic{width:22px;height:22px;flex:none;fill:var(--muted)}
  .fcard.ok .fic{fill:var(--blue)}
  .fcard .name{font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;flex:1}
  .fcard .meta{display:flex;align-items:center;gap:8px;margin-top:11px;color:var(--faint);
    font-size:12px;flex-wrap:wrap}

  /* ---------- pills / chips ---------- */
  .pill{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;
    font-size:12px;font-weight:500;background:var(--hover);color:var(--muted)}
  .pill.ok{background:var(--ok-wash);color:var(--ok)}
  .pill.bad{background:var(--danger-wash);color:var(--danger)}
  .pill.warn{background:var(--warn-wash);color:var(--warn)}

  /* ---------- media grid (thumbnails) ---------- */
  .mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:14px}
  .mtile{position:relative;border-radius:10px;overflow:hidden;background:var(--hover);
    aspect-ratio:1/1;cursor:pointer;border:1px solid var(--line-soft);
    transition:box-shadow .13s,border-color .13s}
  .mtile:hover{box-shadow:var(--shadow-1);border-color:var(--line)}
  .mtile img{width:100%;height:100%;object-fit:cover;display:block;transition:.25s}
  .mtile:hover img{transform:scale(1.04)}
  .mtile .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 11px 9px;
    background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:12px;font-weight:500;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mtile .badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.6);color:#fff;
    border-radius:6px;padding:2px 8px;font-size:11px;display:flex;align-items:center;gap:4px}
  .mtile .grab{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;
    background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;
    opacity:0;transition:.12s}
  .mtile:hover .grab{opacity:1}
  .mtile .grab svg{width:18px;height:18px;fill:#fff}
  /* selection checkbox */
  .mtile .sel{position:absolute;top:8px;left:8px;z-index:4;width:24px;height:24px;padding:0;
    border-radius:50%;border:2px solid rgba(255,255,255,.9);background:rgba(0,0,0,.32);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    opacity:0;transition:opacity .12s,background .12s,border-color .12s;
    box-shadow:0 0 0 1px rgba(0,0,0,.18)}
  .mtile .sel svg{width:15px;height:15px;fill:#fff;opacity:0;transition:opacity .1s}
  .mtile:hover .sel{opacity:1}
  body.selmode .mtile .sel{opacity:1}     /* touch selection mode reveals all checkboxes */
  .mtile.selected .sel{opacity:1;background:var(--blue);border-color:var(--blue)}
  .mtile.selected .sel svg{opacity:1}
  .mtile.selected{outline:3px solid var(--blue);outline-offset:-3px}
  .mtile.isfile .sel{border-color:var(--line);background:rgba(120,120,120,.28)}
  .mtile.isfile.selected .sel{background:var(--blue);border-color:var(--blue)}

  /* ---------- table ---------- */
  table{width:100%;border-collapse:collapse;font-size:13px}
  th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-soft)}
  th{color:var(--muted);font-weight:500;font-size:12px}
  tbody tr:hover{background:var(--hover)}

  /* ---------- panels ---------- */
  .panel{background:var(--raised);border:1px solid var(--line-soft);border-radius:12px;
    padding:18px 20px;margin-bottom:18px}
  .linkrow{display:flex;align-items:center;gap:10px;background:var(--field);
    border-radius:10px;padding:10px 14px;margin-top:6px}
  .linkrow .u{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-family:ui-monospace,Menlo,monospace;font-size:13px}

  /* ---------- forms ---------- */
  label.fl{display:block;font-size:12px;color:var(--muted);margin:14px 0 5px;font-weight:500}
  input[type=text],input[type=number],input[type=password],textarea,select{
    width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:8px;
    background:var(--bg);color:var(--fg);font:inherit;outline:0}
  input:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
  textarea{min-height:96px;font-family:ui-monospace,Menlo,monospace;font-size:13px;resize:vertical}
  input[type=file]{font-size:13px;color:var(--muted)}
  .frow{display:flex;gap:16px;flex-wrap:wrap}.frow>div{flex:1;min-width:180px}

  /* ---------- flash ---------- */
  .flash{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;
    background:#323639;color:#fff;padding:14px 20px;border-radius:8px;box-shadow:var(--shadow-2);
    font-size:14px;max-width:min(680px,92vw);display:flex;gap:14px;align-items:center;
    word-break:break-word;animation:rise .25s ease;cursor:pointer}
  @keyframes rise{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
  .flash a{color:#8ab4f8}

  /* ---------- modal ---------- */
  .scrim{position:fixed;inset:0;background:rgba(32,33,36,.6);z-index:80;display:none;
    align-items:center;justify-content:center;padding:20px}
  .scrim.open{display:flex}
  .modal{background:var(--raised);border-radius:16px;box-shadow:var(--shadow-2);
    width:min(560px,96vw);max-height:92vh;overflow:auto;padding:24px 26px}
  .modal h2{margin-bottom:4px} .modal .sub{color:var(--muted);font-size:13px;margin-bottom:8px}
  .modal .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}

  /* ---------- lightbox ---------- */
  .lb{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:90;display:none;opacity:0;
    transition:opacity .18s ease}
  .lb.open{display:block;opacity:1}
  .lb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    padding:66px 74px}
  .lb-stage img,.lb-stage video{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;
    box-shadow:0 10px 46px rgba(0,0,0,.6);opacity:0;transition:opacity .22s ease}
  .lb-frame{width:min(1000px,94vw);height:88vh;border:0;border-radius:6px;background:#fff;
    box-shadow:0 10px 46px rgba(0,0,0,.6)}
  .lb-stage img.ready,.lb-stage video{opacity:1}
  .lb-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:12px;
    padding:14px 16px;color:#fff;background:linear-gradient(rgba(0,0,0,.6),transparent)}
  .lb-count{font-size:13px;opacity:.85;min-width:70px}
  .lb-name{flex:1;text-align:center;font-size:14px;opacity:.9;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .lb-top .iconbtn{background:transparent;color:#fff;width:42px;height:42px}
  .lb-top .iconbtn:hover{background:rgba(255,255,255,.15)}
  .lb-top .iconbtn svg{fill:#fff}
  .lb-arrow{position:absolute;top:0;bottom:0;width:13%;min-width:74px;border:0;background:transparent;
    cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;opacity:0;transition:.15s}
  .lb-arrow:hover{opacity:1}
  .lb-arrow.prev{left:0}.lb-arrow.next{right:0}
  .lb-arrow span{width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.45);
    display:flex;align-items:center;justify-content:center}
  .lb-arrow svg{width:28px;height:28px;fill:#fff}
  .lb-spin{position:absolute;width:42px;height:42px;border:3px solid rgba(255,255,255,.22);
    border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;display:none}
  .lb-spin.show{display:block}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (max-width:820px){
    .lb-stage{padding:56px 8px} .lb-arrow{opacity:.85;width:64px;min-width:64px}
  }

  .empty{text-align:center;color:var(--muted);padding:56px 20px}
  .empty svg{width:64px;height:64px;fill:var(--line);margin-bottom:12px}

  /* ---------- mobile / touch ---------- */
  *{-webkit-tap-highlight-color:rgba(0,0,0,.06)}
  @media (hover:none){
    .mtile .grab{opacity:1} .lb-arrow{opacity:.9}
    .mtile .sel{pointer-events:none}              /* checkboxes inert until selection mode */
    body.selmode .mtile .sel{pointer-events:auto}
  }
  /* ---------- installed-app chrome (bottom tab bar, safe areas) ----------
     The phone surface is a real app shell: brandbar + search on top, a fixed
     tab bar on the bottom, and the drawer demoted to the "More" tab. Only
     below the desktop breakpoint, and never inside the AndroHQ iframe (HQ
     draws its own chrome). */
  .bottomnav{display:none}
  @media (max-width:820px){
    body:not(.embedded) .bottomnav{
      display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;
      position:fixed;left:0;right:0;bottom:0;z-index:88;
      background:var(--bg);border-top:1px solid var(--line-soft);
      padding-bottom:env(safe-area-inset-bottom);
      /* keep the bar readable over content while scrolling */
      box-shadow:0 -1px 0 var(--line-soft)}
    .bottomnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:3px;padding:8px 2px 7px;color:var(--muted);font-size:10.5px;font-weight:500;
      letter-spacing:.01em;text-decoration:none;min-height:54px;position:relative}
    .bottomnav a:hover{text-decoration:none}
    .bottomnav a svg{width:23px;height:23px;fill:currentColor}
    .bottomnav a.active{color:var(--blue-ink)}
    .bottomnav a.active .pip{position:absolute;top:0;left:50%;transform:translateX(-50%);
      width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--blue)}
    .bottomnav .badge{position:absolute;top:5px;right:calc(50% - 20px);min-width:15px;
      height:15px;border-radius:999px;background:var(--danger);color:#fff;font-size:9.5px;
      line-height:15px;text-align:center;padding:0 3px;font-weight:600}
    /* content + floating UI must clear the bar */
    body:not(.embedded) .content{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
    body:not(.embedded) .fab{bottom:calc(74px + env(safe-area-inset-bottom))}
    body:not(.embedded) .selbar{bottom:calc(70px + env(safe-area-inset-bottom))}
    body.selmode .bottomnav{display:none}   /* the selection bar owns the bottom */
    /* the drawer is now the "More" tab, so drop the redundant hamburger */
    body:not(.embedded) .hamburger{display:none}
    body:not(.embedded) .brandbar{padding-left:16px}
  }
  /* Installed (standalone) — no browser chrome above us, so respect the notch. */
  @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui){
    .brandbar{padding-top:env(safe-area-inset-top)}
    @media (max-width:820px){
      .app{grid-template-rows:calc(56px + env(safe-area-inset-top)) 54px 1fr}
    }
    .sidebar{padding-top:calc(14px + env(safe-area-inset-top))}
  }
  body.nativeapp .brandbar .wm .sub{display:none}

  /* ---------- install banner (browser only) ---------- */
  .installbar{display:none;position:fixed;left:10px;right:10px;z-index:89;
    bottom:calc(66px + env(safe-area-inset-bottom));
    background:var(--raised);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow-2);padding:11px 12px;align-items:center;gap:11px}
  .installbar.show{display:flex}
  .installbar img{width:38px;height:38px;border-radius:9px;flex:none}
  .installbar .t{flex:1;min-width:0;font-size:13px;line-height:1.35}
  .installbar .t b{display:block;font-weight:600;font-size:13.5px}
  .installbar .t span{color:var(--muted)}
  .installbar .btn{padding:8px 16px;font-size:13px}
  .installbar .x{border:0;background:transparent;color:var(--muted);font-size:20px;
    line-height:1;padding:4px 6px;cursor:pointer}

  /* ---------- pull to refresh ---------- */
  .ptr{position:fixed;left:50%;top:calc(60px + env(safe-area-inset-top));z-index:70;
    width:36px;height:36px;margin-left:-18px;border-radius:50%;background:var(--raised);
    box-shadow:var(--shadow-1);display:none;align-items:center;justify-content:center;
    transform:translateY(-60px);transition:transform .12s ease,opacity .12s}
  body.ptr-on .ptr{display:flex}
  .ptr svg{width:20px;height:20px;fill:var(--blue)}
  .ptr.spin svg{animation:spin .7s linear infinite}

  @media (max-width:600px){
    .mgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
    .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
    .mtile .cap{font-size:11px;padding:14px 8px 7px}
    .fcard{padding:12px 13px}
    h1{font-size:20px}
    .flash{left:12px;right:12px;bottom:16px;transform:none;max-width:none;animation:none}
    /* 16px inputs stop iOS from auto-zooming on focus */
    input[type=text],input[type=number],input[type=password],textarea,select,.search input{font-size:16px}
  }