/* ============================================================
   skorika.com — css/page/Drive-index.css.baru
   SATU-SATUNYA lembar gaya untuk /Drive/index.html (drive.skorika.com). 13 Agustus 2026.

   Gabungan: scale + fonts + icons + gaya halaman + logo.
   Halaman ini disajikan dari subdomain, jadi setiap berkas CSS
   berarti satu permintaan LINTAS ASAL ke skorika.com — mahal,
   dan semuanya menahan halaman tampil. Karena itu semua digabung
   jadi satu di sini. css/common.css SENGAJA tidak ikut: diuji,
   nol dari 349 aturannya cocok dengan elemen di halaman ini.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); /* 3 Okt 2026: Roboto menggantikan Fredoka/Inter/Nunito/Outfit/Space Grotesk */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0');
/* ===== dari css/scale.css ===== */
/* ============================================================
   skorika.com — css/scale.css
   SKALA UKURAN & SUDUT, SUMBER TUNGGAL. 12 Agustus 2026.

   Sebelum berkas ini ada, situs memakai 48 ukuran huruf berbeda dan
   25 nilai sudut berbeda. Sebagian memang tangga yang dipakai
   konsisten, tetapi sisanya nilai karangan sesaat: 14,3px di satu
   tempat, 16,2px di tempat lain, sudut 7px di sini dan 9px di sana —
   selisih yang tidak terlihat mata tetapi harus diputuskan ulang
   setiap kali ada penambahan.

   Nilai-nilai itu sudah dirapikan ke tangga di bawah: ukuran huruf
   tinggal 19 langkah, sudut tinggal 11. Berkas ini yang menetapkan
   tangganya, dan berkas gaya bersama (style.css, admin-shell.css,
   owner.css, auth.css, stage.css) merujuk ke sini, bukan menulis
   angka sendiri.

   CARA PAKAI
   Muat PALING AWAL di <head>, sebelum berkas gaya lain:
       <link rel="stylesheet" href="/css/scale.css">
   Untuk nilai baru, pakai langkah yang sudah ada. Kalau benar-benar
   perlu langkah baru, tambahkan di sini — jangan tulis angka lepas
   di halaman.
   ============================================================ */
:root{/* --- ukuran huruf ---
     Tangga setengah piksel di rentang kecil memang disengaja: itu
     yang dipakai antarmuka konsol (Inter) sejak awal. */
  --fs-10-5: 10.5px;   /* label kecil, huruf kapital berjarak */
  --fs-11:   11px;
  --fs-11-5: 11.5px;
  --fs-12:   12px;
  --fs-12-5: 12.5px;   /* keterangan, tombol kecil */
  --fs-13:   13px;     /* paling banyak dipakai */
  --fs-13-5: 13.5px;   /* isian formulir, menu sidebar */
  --fs-14:   14px;     /* teks isi */
  --fs-15:   15px;
  --fs-16:   16px;
  --fs-17:   17px;
  --fs-18:   18px;
  --fs-20:   20px;
  --fs-22:   22px;     /* wordmark logo */
  --fs-26:   26px;
  --fs-32:   32px;
  --fs-40:   40px;
  --fs-56:   56px;
  --fs-80:   80px;     /* angka besar di panggung sesi */

  /* --- sudut membulat --- */
  --r-4:    4px;
  --r-6:    6px;
  --r-8:    8px;
  --r-10:   10px;
  --r-12:   12px;
  --r-14:   14px;
  --r-16:   16px;
  --r-18:   18px;
  --r-24:   24px;
  --r-32:   32px;
  --r-penuh: 999px;    /* bentuk pil; dulu ditulis 99px, 999px, dan 9999px */}
/* ===== dari css/fonts.css ===== */
/* ============================================================
   skorika.com — css/fonts.css
   SATU-SATUNYA tempat keluarga font aplikasi dimuat.

   Dibuat 12 Agustus 2026. Sebelumnya tiap halaman memuat sendiri
   dari fonts.googleapis.com dan tumbuh jadi 10 kombinasi berbeda
   di 57 halaman — antara lain 12 halaman owner/ yang memuat
   Plus Jakarta Sans dan Space Grotesk padahal tidak satu pun
   dipakai, sementara 17 halaman memakai Inter tanpa memuatnya
   dan hanya selamat karena halaman lain kebetulan sudah
   menghangatkan cache.

   Selain sepuluh kombinasi <link> itu, tiga berkas CSS juga diam-diam
   punya @import font sendiri — style.css (Inter, Space Grotesk),
   auth.css (Fredoka, Nunito), dan owner/owner.css (Inter, Outfit).
   Ketiganya sudah dicabut dan digantikan berkas ini, jadi seluruh
   aplikasi kini punya SATU sumber font, bukan tiga belas.

   Lima keluarga di bawah ini adalah yang benar-benar dirender di layar:
     Outfit          font utama seluruh situs
     Inter           teks badan konsol /admin/ dan halaman drive
     Space Grotesk   angka, kode gabung, timer
     Nunito          halaman masuk & join
     Fredoka         judul dan tombol halaman masuk

   Plus Jakarta Sans dicabut 12 Agu 2026: setelah drive.html memakai Inter,
   satu-satunya sisa rujukannya cuma cadangan di belakang Nunito, jadi tidak
   pernah sampai giliran tampil.

   Mendaftarkan enam keluarga sekaligus TIDAK membuat pengguna
   mengunduh enam font: Google Fonts hanya mengirim aturan
   @font-face, dan peramban baru mengambil berkas .woff2 untuk
   keluarga yang benar-benar dipakai halaman itu. Yang justru mahal
   adalah 10 URL berbeda — tiap URL jadi entri cache sendiri,
   sehingga berpindah halaman berarti mengunduh CSS font lagi.
   Satu URL berarti satu entri cache untuk seluruh situs.

   Cara pakai di halaman:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="/css/fonts.css">

   Font khusus satu halaman TIDAK ditaruh di sini dan tetap dimuat
   oleh halamannya sendiri, karena ukurannya besar dan cuma dipakai
   di satu tempat:
     waiting.html        Quicksand            (layar tunggu)

   Font IKON Material Symbols punya berkasnya sendiri, css/icons.css —
   sengaja terpisah karena bukan font teks dan hanya dipakai dua halaman.
   ============================================================ */
/* ===== dari css/icons.css ===== */
/* ============================================================
   skorika.com — css/icons.css
   SATU-SATUNYA tempat font ikon Material Symbols dimuat.

   Dibuat 12 Agustus 2026. Sebelumnya admin/drive.html dan
   Drive/index.html memuatnya sendiri-sendiri dengan rentang sumbu
   yang BERBEDA:

     admin/drive.html   opsz,wght,FILL,GRAD@20..48,300..500,0..1,0
     Drive/index.html   opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200

   Font yang sama persis, tapi karena URL-nya berbeda peramban
   menyimpannya sebagai dua entri cache terpisah — pengguna yang
   membuka kedua halaman mengunduh font ikon dua kali.

   Rentang di bawah dipersempit ke nilai yang BENAR-BENAR dipakai.
   Kedua halaman hanya menulis satu kombinasi:

     font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24
     .ms.fill → 'FILL' 1

   Jadi opsz tetap 24, wght tetap 400, GRAD tetap 0, dan hanya FILL
   yang benar-benar berubah (0 atau 1). Sumbu lain yang dulu diminta
   tidak pernah dipakai satu pun, hanya menambah besar berkas font.

   Cara pakai — hanya di halaman yang memang memakai ikon .ms:
     <link rel="stylesheet" href="/css/icons.css">

   Perhatian: ini font IKON, bukan font teks. Huruf-hurufnya
   digantikan gambar, jadi jangan disatukan ke css/fonts.css dan
   jangan dimuat di halaman yang tidak punya elemen .ms.
   ============================================================ */
/* ===== dari css/page/Drive-index.css ===== */
/* ============================================================
   skorika.com — css/page/Drive-index.css
   Gaya khas /Drive/index.html.
   Dulu ditulis di dalam <style> halaman; dipindah 13 Agu 2026
   ke posisi yang sama persis, jadi urutan cascade tidak bergeser.
   54 aturan.
   ============================================================ */
/* ============================================================
   skorika.com — css/page/Drive-index.css
   Gaya khas /Drive/index.html.
   Dulu ditulis di dalam <style> halaman; dipindah 13 Agu 2026
   ke posisi yang sama persis, jadi urutan cascade tidak bergeser.
   54 aturan.
   ============================================================ */
:root{--bg:#F8FAFD; --panel:#fff; --ink:#1F1F1F; --ink2:#444746; --ink3:#5F6368;
  --blue:#0B57D0; --line:#DADCE0; --chipline:#747775; --hover:rgba(31,31,31,.06);
  --danger:#D93025; --sh:0 1px 3px rgba(0,0,0,.2),0 4px 8px 3px rgba(0,0,0,.09);}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
/* Font mengikuti standar konsol /admin/ (12 Agu 2026): Inter untuk teks badan,
   Outfit untuk logo. Sebelumnya "Google Sans","Product Sans",Roboto,Arial —
   dua nama pertama tidak pernah dimuat, jadi yang tampil adalah Roboto. */
body{background:var(--bg);color:var(--ink);
     font:14px/1.5 'Roboto',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
.ms{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:20px;
    line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;
    word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
    font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;user-select:none}
.ms.fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.hidden{display:none!important}
.topbar{height:64px;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--bg);
        position:sticky;top:0;z-index:20}
/* Logo hitam di halaman berlatar terang — 12 Agu 2026. Badan gelembung
   memakai currentColor, jadi cukup warna elemen ini yang diubah. */
.brand{display:flex;align-items:center;gap:9px;font-size:22px;font-weight:900;letter-spacing:-.015em;font-family:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif}
/* Mark 10% lebih tinggi dari tinta teks: tinta "Skorika" = 0,727em pada
   Outfit 900, target 1,10 x 0,727 = 0,800em. SVG ini tintanya 28/32 kotak
   (rect y=2..30), jadi kotaknya 0,800 / (28/32) = 0,914em. */
.brand svg{width:.914em;height:.914em;flex-shrink:0}
/* "Drive" bukan bagian dari logo: hitam dan tidak tebal. */
/* Yang bisa diklik hanya LOGO-nya: mark + kata "Skorika". "Drive" berada
   di luar tautan karena bukan bagian dari logo. */
.brand .lg{display:inline-flex;align-items:center;gap:9px}
.brand .dv{color:var(--ink);font-weight:400}
.icbtn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink2)}
.icbtn:hover{background:var(--hover)}
.pill{border-radius:999px;height:38px;padding:0 20px;font-weight:500;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.pill.fill{background:var(--blue);color:#fff}
.pill.fill:hover{box-shadow:0 1px 2px rgba(0,0,0,.3)}
.pill.line{border:1px solid var(--chipline);color:var(--blue)}
.pill.line:hover{background:rgba(11,87,208,.06)}
.sp{flex:1}
/* 18 Agu 2026 — batas 1080px DILEPAS atas permintaan pemilik. Nama berkas di
   folder pengumpulan tugas panjang-panjang ("Architecture Vision - Linda &
   Ahmad Eko.docx") sementara layar peserta umumnya jauh lebih lebar dari
   1080px, jadi kartu mengambang di tengah dengan ruang kosong lebar di kiri
   dan kanan sedangkan nama berkasnya sendiri terpotong.

   19 Agu 2026 — lebar penuh ternyata KETERLALUAN di layar besar: barisnya jadi
   sangat panjang sehingga mata harus menyeberang jauh dari nama berkas ke
   kolom tanggal di ujung kanan. Dikurangi 20% menjadi 80% lebar jendela.

   Pengurangan itu HANYA berlaku dari 1000px ke atas. Di ponsel dan tablet,
   memangkas 20% berarti membuang seperlima layar yang memang sudah sempit —
   di sana kartunya tetap memakai seluruh lebar. */
.wrap{max-width:none;margin:0 auto;padding:0 clamp(16px,3vw,40px) 60px}
@media (min-width:1000px){
  .wrap{max-width:80%}
}
.card{background:var(--panel);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.08);overflow:hidden}
.head{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.head .ttl{font-size:20px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.head .sub{font-size:13px;color:var(--ink3);width:100%}
.crumb{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:12px 20px;font-size:14px;color:var(--ink2);border-bottom:1px solid var(--line)}
.crumb .seg{padding:4px 8px;border-radius:8px;cursor:pointer}
.crumb .seg:hover{background:var(--hover)}
.crumb .cur{padding:4px 8px;font-weight:500;color:var(--ink)}
.crumb .ms{font-size:18px;color:var(--ink3)}
.row{display:flex;align-items:center;gap:14px;padding:0 20px;height:52px;border-bottom:1px solid var(--line);cursor:pointer}
.row:last-child{border-bottom:none}
.row:hover{background:var(--hover)}
.row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .sz{width:96px;text-align:right;color:var(--ink3);font-size:13px;flex-shrink:0}
/* 170px, bukan 150px lagi: isinya kini stempel penuh "Aug 18, 2026, 23:39". */
.row .dt{width:170px;text-align:right;color:var(--ink3);font-size:13px;flex-shrink:0}
/* Kolom aksi paling kanan. Lebarnya DIPATOK 40px karena isinya berbeda antara
   dua jenis baris: baris berkas memakai <button class="icbtn dl"> yang memang
   40px, sedangkan baris folder hanya <span class="dl"> berisi ikon chevron
   20px. Sebelum aturan ini ada, baris folder 20px lebih sempit, sehingga
   kolom Name jadi 536px di baris folder dan 516px di baris berkas — chevron
   folder tidak sejajar dengan ikon unduh, dan judul kolom (yang memakai 40px)
   tidak sejajar dengan baris folder. 14 Agu 2026. */
.row .dl{width:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
/* Baris judul kolom. 13 Agu 2026 — daftar publik ini sebelumnya tidak punya
   judul kolom sama sekali, berbeda dengan daftar di /admin/drive. Lebar tiap
   kolom SAMA PERSIS dengan .row di atas (170px tanggal, 96px ukuran, 40px
   kolom aksi = lebar .icbtn) supaya benar-benar sejajar; jika salah satu
   diubah, ubah keduanya. */
.rowhd{display:flex;align-items:center;gap:14px;padding:0 20px;height:38px;
       border-bottom:1px solid var(--line);font-size:12px;font-weight:500;
       color:var(--ink3);cursor:default;user-select:none}
.rowhd .ic{width:20px;flex-shrink:0}
.rowhd .nm{flex:1;min-width:0}
.rowhd .dt{width:170px;text-align:right;flex-shrink:0}
.rowhd .sz{width:96px;text-align:right;flex-shrink:0}
.rowhd .dl{width:40px;flex-shrink:0}
/* Kolom "Uploaded by" di folder pengumpulan tugas. Lebarnya WAJIB sama antara
   judul dan isi baris, sama seperti kolom lain di daftar ini. */
.row .by,.rowhd .by{width:170px;flex-shrink:0;font-size:13px;color:var(--ink3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:720px){
  .row .dt{display:none}
  .rowhd .dt{display:none}
}
@media (max-width:620px){
  .row .by{display:none}
  .rowhd .by{display:none}
}
.state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
       padding:70px 24px;text-align:center;color:var(--ink3)}
.state .big{font-size:56px;color:#AEB3B7}
.state .h{font-size:18px;color:var(--ink);font-weight:500}
.state p{max-width:460px}
.fileview{padding:24px}
.fbox{background:#F0F4F9;border-radius:12px;min-height:340px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fbox img{max-width:100%;max-height:70vh;object-fit:contain}
.fbox iframe{width:100%;height:70vh;border:none;background:#fff;border-radius:12px}
.fbox video{max-width:100%;max-height:70vh}
.fbox audio{width:min(560px,90%)}
/* Pratinjau Word/Excel yang dirakit di peramban (renderOffice di Drive/index.php).
   Word memakai docx-preview yang membawa gaya dokumennya sendiri: lebar
   halaman, font, warna, tabel. Yang diatur di sini cuma latar di sekeliling
   halaman dan bayangannya. JANGAN menambah aturan tipografi di dalam
   .docx-wrapper - itu menimpa gaya asli dokumennya. */
.fbox .pv-off{align-self:stretch;width:100%;max-height:70vh;overflow:auto;background:#fff;border-radius:12px;color:#202124}
.fbox .pv-off .pv-load{padding:80px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;color:#5F6368;font-size:14px}
.fbox .pv-off .pv-load .ms{font-size:44px}
.pv-word{background:#F1F3F4;min-height:100%}
.pv-word .docx-wrapper{background:transparent;padding:20px 0;display:flex;flex-direction:column;
         align-items:center;gap:18px}
.pv-word .docx-wrapper > section.docx{box-shadow:0 1px 4px rgba(0,0,0,.22);margin:0;background:#fff}
.pv-sheet{background:#fff;min-height:100%}
.pv-tabs{position:sticky;top:0;z-index:2;display:flex;gap:4px;flex-wrap:wrap;padding:10px 14px;
         background:#F8F9FA;border-bottom:1px solid #DADCE0}
.pv-tab{border:1px solid transparent;background:none;border-radius:6px;cursor:pointer;padding:5px 12px;
        font:500 13px 'Roboto',system-ui,sans-serif;color:#5F6368}
.pv-tab:hover{background:#E8EAED}
.pv-tab.on{background:#fff;border-color:#DADCE0;color:#1A73E8}
.pv-grid2{overflow-x:auto;padding:14px}
.pv-grid2 table{border-collapse:collapse;font:13px/1.5 'Roboto',system-ui,sans-serif;width:auto}
.pv-grid2 td,.pv-grid2 th{border:1px solid #DADCE0;padding:5px 9px;white-space:nowrap;max-width:340px;
        overflow:hidden;text-overflow:ellipsis}
.fmeta{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap;font-size:13px;color:var(--ink3)}
.skel .bar{height:16px;border-radius:8px;margin:22px 24px;
  background:linear-gradient(90deg,#EEF1F4 25%,#F7F9FB 50%,#EEF1F4 75%);background-size:200% 100%;animation:sk 1.1s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.foot{text-align:center;font-size:12.5px;color:var(--ink3);padding:22px 10px}
.snack{position:fixed;left:24px;bottom:24px;background:#202124;color:#fff;border-radius:8px;box-shadow:var(--sh);
       padding:12px 18px;z-index:60;font-size:14px;max-width:min(520px,90vw)}
/* ---- unggah dari halaman share (18 Agu 2026) ----
   Peserta dengan tautan ber-peran Editor boleh menaruh berkas di sini,
   lewat tombol Upload atau dengan menyeret berkas ke atas kartu. */
.card.drop{outline:2px dashed var(--blue);outline-offset:-8px;background:rgba(11,87,208,.04)}
/* Panel kemajuan unggah, mengambang di kanan bawah (pola Google Drive).
   Snack duduk di kiri bawah, jadi keduanya tidak pernah bertabrakan. */
.uppanel{position:fixed;right:24px;bottom:24px;z-index:50;overflow:hidden;
  width:min(360px,calc(100vw - 32px));background:var(--panel);
  border-radius:12px 12px 8px 8px;box-shadow:var(--sh)}
.uphead{display:flex;align-items:center;gap:2px;background:#202124;color:#fff;padding:8px 8px 8px 16px}
.uphead .t{flex:1;min-width:0;font-size:14px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upx{width:32px;height:32px;border-radius:50%;flex-shrink:0;color:#fff;
  display:inline-flex;align-items:center;justify-content:center}
.upx:hover{background:rgba(255,255,255,.14)}
.upx .ms{font-size:20px}
.upbody{max-height:min(320px,40vh);overflow-y:auto}
.uppanel.min .upbody{display:none}
.uprow{display:flex;align-items:center;gap:12px;padding:10px 16px;font-size:13px;
  color:var(--ink2);border-bottom:1px solid var(--line)}
.uprow:last-child{border-bottom:none}
.uprow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* BUKAN flex. Dengan display:inline-flex + justify-content:flex-end, teks yang
   kepanjangan meluber ke KIRI dan terpotong di awal kalimat - pesan galat
   terbaca "hat file type is not allowed". Sebagai blok biasa, text-overflow
   bekerja sebagaimana mestinya dan titik-titiknya jatuh di ujung kanan.
   Ketahuan saat uji 18 Agu 2026. */
.uprow .st{flex-shrink:0;max-width:52%;text-align:right;color:var(--ink3);font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uprow .st.err{color:var(--danger)}
.uprow .st .ms,.uprow .st .spin{vertical-align:-4px}
.uprow .okmark{font-size:18px;color:#188038}
.spin{width:16px;height:16px;border-radius:50%;display:inline-block;
  border:2px solid var(--line);border-top-color:var(--blue);animation:upspin .8s linear infinite}
@keyframes upspin{to{transform:rotate(360deg)}}
@media (max-width:520px){
  .uppanel{right:8px;left:8px;bottom:8px;width:auto}
}
/* Kolom ikon sampah di folder pengumpulan tugas. Lebarnya WAJIB sama dengan
   .rowhd .tr, kalau tidak judul kolom dan isinya tidak lurus. */
.row .tr{width:40px;flex-shrink:0}
.rowhd .tr{width:40px;flex-shrink:0}
.row .tr:hover{background:var(--hover)}
.row .tr .ms{color:var(--ink3)}
.row:hover .tr .ms{color:var(--danger)}
.pill.danger{background:var(--danger);color:#fff}
.pill.danger:hover{box-shadow:0 1px 2px rgba(0,0,0,.3)}
.mask{position:fixed;inset:0;background:rgba(32,33,36,.5);z-index:70;
      display:flex;align-items:center;justify-content:center;padding:20px}
.dlg{background:var(--panel);border-radius:16px;box-shadow:var(--sh);width:min(420px,100%);padding:24px}
.dlg h3{font-size:18px;font-weight:500;margin-bottom:8px}
.dlg p{font-size:13.5px;color:var(--ink3);margin-bottom:14px}
.dlg input{width:100%;height:44px;border:1px solid var(--line);border-radius:8px;
           padding:0 14px;font:inherit;outline:none;background:var(--panel);color:var(--ink)}
.dlg input:focus{border-color:var(--blue)}
.dlg .act{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* ===== dari css/logo.css ===== */
/* ============================================================
   skorika.com — css/logo.css
   SUMBER TUNGGAL WARNA LOGO. 12 Agustus 2026.

   Sebelum berkas ini ada, warna logo ditulis di 43 berkas dan 112
   aturan yang berbeda. Akibatnya satu permintaan ganti warna selalu
   jadi belasan suntingan, dan beberapa kali aturan yang satu diam-diam
   dikalahkan aturan yang lain (aturan ganda di admin/live.html,
   !important di css/admin-shell.css). Seluruh aturan itu sudah dihapus;
   warna logo sekarang HANYA ditulis di sini.

   CARA PAKAI
   Halaman memilih variannya lewat satu kelas di <body>:
       (tanpa kelas)   pink   — halaman berlatar gelap, ini bawaannya
       .logo-hitam            — halaman berlatar terang (konsol admin,
                                konsol owner, Drive, sertifikat, cetak)
       .logo-putih            — halaman yang logonya duduk di batang
                                gelap (lobby, live, podium, learn,
                                student/dashboard)
       .logo-plum             — admin/preview.html

   Berkas ini WAJIB dimuat paling akhir di <head>, sesudah style.css,
   admin-shell.css, auth.css, dan owner.css. Kalau tidak, aturan di
   berkas-berkas itu yang menang dan warnanya kembali kacau.

   Badan gelembung memakai fill="currentColor", jadi cukup 'color'.
   Tiga titik di dalamnya memakai fill="var(--mark-dot,#FFFFFF)".
   Nilai favicon disamakan dengan varian pink di /img/favicon.svg —
   favicon berkas statis, tidak bisa membaca variabel ini, jadi kalau
   --logo-pink atau --logo-krem diubah, berkas itu ikut diperbarui.
   ============================================================ */
:root{--logo-pink:#0078D4;   /* merah muda merek */
  --logo-krem:#FFFFFF;   /* titik di atas gelembung pink/plum */
  --logo-hitam:#0F172A;  /* logo di halaman terang */
  --logo-putih:#FFFFFF;  /* logo di batang gelap; titik di gelembung hitam */
  --logo-plum:#121F3D;   /* plum kop halaman pratinjau */}
/* ---- pilihan varian ---- */
body{--logo-ink:var(--logo-pink);  --logo-dot:var(--logo-krem)}
body.logo-hitam{--logo-ink:var(--logo-hitam); --logo-dot:var(--logo-putih)}
body.logo-putih{--logo-ink:var(--logo-putih); --logo-dot:var(--logo-hitam)}
body.logo-plum{--logo-ink:var(--logo-plum);  --logo-dot:var(--logo-krem)}
/* ---- satu-satunya tempat warna logo dipasang ----
   Daftar ini memuat SEMUA wadah logo yang ada di situs. Yang memuat
   tulisan merek sekalian diwarnai (nama merek sewarna tandanya);
   yang hanya membungkus tanda cukup mewarnai tandanya.
   :hover disertakan supaya warna tidak berubah saat disentuh. */
.brand, .brand:hover, .brand-sm, .brand-sm:hover, .sb-brand, .sb-brand:hover, .auth-logo, .auth-logo:hover, .ws-brand, .dw-brand, .dw-brand:hover, .brand-row a, .brand-row a:hover, .pdf-logo, .sb-logo, .pv-icon, .qz-icon, .wsbar .title, .login-card > svg.mark{color:var(--logo-ink);
  --mark-dot:var(--logo-dot);}
/* Tanda di dalam pembungkus yang juga memuat teks lain: yang diwarnai
   hanya SVG-nya, bukan wadahnya, supaya tulisan di sebelahnya tetap
   memakai warnanya sendiri. */
.foot-brand svg.mark, .af-brand svg.mark, .auth-brand svg.mark{color:var(--logo-ink); --mark-dot:var(--logo-dot)}
/* titik pemisah di dalam wordmark ikut warna logo.
   Catatan: .auth-brand, .foot-brand, dan .af-brand SENGAJA tidak ada di
   daftar warna logo di atas. Ketiganya pembungkus yang juga memuat teks
   lain (tagline panel masuk, baris hak cipta di kaki halaman); kalau ikut
   diwarnai, tulisan itu ikut berubah. Yang diwarnai hanya tandanya. */
.brand .dot-id, .brand-sm .dot-id, .sb-brand .dot-id, .auth-brand .brand .dot-id{color:var(--logo-ink);}
/* ---- pengecualian yang disengaja ----
   Kop laporan cetak memakai warna homepage walau halamannya terang. */
body.logo-hitam .pdf-logo{color:var(--logo-pink); --mark-dot:var(--logo-krem)}
/* Bentuk lama logo (empat kotak dalam grid) sudah tidak dipakai sejak
   tanda gelembung diberlakukan; sisa gayanya dinetralkan di sini supaya
   tidak ada kotak, jarak, atau latar yang ikut tergambar. */
svg.mark{display:inline-block; grid-template-columns:none; gap:0;
  background:none; padding:0; border:none; box-shadow:none;}