/* Gaya dasar Pembukuan WS. Warna diambil dari peubah yang dipasang tema.js. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font: 600 14px/1.5 "Inter", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ kerangka */
.bingkai { display: flex; min-height: 100vh; }

.sisi {
  width: 208px; flex: 0 0 208px; padding: 18px 12px;
  background: var(--putih); border-right: 1px solid var(--garis);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sisi h1 { font-size: 15px; margin: 0 0 2px; color: var(--birutua); }
.sisi .sub { font-size: 11.5px; color: var(--redup); margin-bottom: 16px; }
.sisi label { display: block; font-size: 11px; color: var(--redup);
  margin: 14px 0 5px; letter-spacing: .04em; text-transform: uppercase; }
.sisi select {
  width: 100%; padding: 7px 9px; border-radius: 8px; font: inherit;
  font-size: 13px; border: 1px solid var(--garis);
  background: var(--langit3); color: var(--teks);
}

nav { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
nav button {
  text-align: left; padding: 7px 11px; border: 0; border-radius: 8px;
  background: transparent; color: var(--teks); font: inherit; font-size: 13px;
  cursor: pointer;
}
nav button:hover { background: var(--langit2); }
nav button.aktif { background: var(--biru); color: #fff; }

.isi { flex: 1; min-width: 0; padding: 18px 26px 40px; zoom: var(--zoom); }

/* bilah kontrol tema & ukuran */
.bilah { display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  flex-wrap: wrap; }
.bilah .judul { font-size: 19px; color: var(--birutua); font-weight: 700;
  margin-right: auto; padding-left: 11px; border-left: 3px solid var(--biru); }
.pil { display: inline-flex; gap: 2px; background: var(--langit2);
  border: 1px solid var(--garis); border-radius: 999px; padding: 3px; }
.pil button {
  border: 0; border-radius: 999px; padding: 0 14px; height: 26px;
  background: transparent; color: var(--redup); font: inherit;
  font-size: 12.5px; cursor: pointer;
}
.pil button:hover { color: var(--birutua); }
.pil button.aktif { background: var(--putih); color: var(--birutua);
  box-shadow: 0 1px 2px rgba(20, 56, 79, .16); }
.pil .nilai { min-width: 46px; text-align: center; color: var(--birutua);
  font-size: 12.5px; line-height: 26px; }

h4, h5 { color: var(--birutua); letter-spacing: .01em; padding-left: 11px;
  border-left: 3px solid var(--biru); margin: 1.3rem 0 .55rem; }
h5 { font-size: 14px; }
.ket { color: var(--redup); font-size: 12px; margin: -.2rem 0 .6rem; }

/* ------------------------------------------------------------- angka */
.angka { display: flex; gap: 10px; flex-wrap: wrap; margin: .3rem 0 1rem; }
.angka .kotak { background: var(--putih); border: 1px solid var(--garis);
  border-radius: 11px; padding: 10px 14px; min-width: 150px; }
.angka .lbl { color: var(--redup); font-size: .78rem; }
.angka .val { color: var(--birutua); font-size: 1.32rem; font-weight: 700;
  white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- tabel */
.mtab { margin: .2rem 0 1rem; position: relative; }
/* Lebar tabel mengikuti isinya, tidak dipaksa selebar panel: kalau dipaksa,
   ruang sisanya dibagi rata ke semua kolom dan kolom yang isinya cuma titik
   ikut melebar. Yang lebih lebar dari layar tetap bisa digulung. */
.mtab .gulung { overflow-x: auto; border-radius: 10px;
  box-shadow: 0 1px 3px rgba(20, 56, 79, .05);
  display: inline-block; max-width: 100%; vertical-align: top; }
.mtab table { border-collapse: collapse; font-size: 13px;
  background: var(--putih); width: max-content; }
.mtab th, .mtab td {
  border: 1px solid var(--garis); padding: 6px 12px; text-align: left;
  white-space: nowrap;
}
/* judul panjang dipatahkan sendiri lewat judul(), jadi cukup dibolehkan
   turun baris dan diratakan ke bawah supaya sejajar dengan judul pendek */
.mtab th { white-space: normal; line-height: 1.25; vertical-align: bottom;
  background: var(--biru); color: #fff; border-color: var(--biru);
  font-weight: 700; font-size: 12px; }
/* Judul kolom ditengahkan, termasuk kolom angka -- isinya tetap rata kanan
   supaya digitnya masih sejajar. Ditulis sesudah aturan .n di bawah agar
   tidak tertimpa olehnya. */
.mtab th, .mtab th.n { text-align: center; }
.mtab th + th { border-left-color: #FFFFFF40; }
.mtab td { color: var(--teks); }
.mtab td.n { text-align: right; font-variant-numeric: tabular-nums; }
.mtab th.n { font-variant-numeric: tabular-nums; }
.mtab tbody tr:nth-child(even) td { background: var(--langit3); }
.mtab tbody tr:hover td { background: var(--langit2); }
.mtab tr.tot td { background: var(--langit); color: var(--birutua);
  font-weight: 700; }
.mtab tr.tot:hover td { background: var(--langit); }

/* sel status bercentang: hijau muda, supaya kelihatan sekilas mana yang sudah */
.mtab td.ok, .mtab tbody tr:hover td.ok, .mtab tbody tr:nth-child(even) td.ok {
  background: var(--centang); color: var(--centangteks);
  text-align: center; font-weight: 700;
}
/* baris yang hitungan fisiknya tidak cocok dengan catatan */
.mtab tr.beda td, .mtab tbody tr.beda:hover td,
.mtab tbody tr.beda:nth-child(even) td {
  background: var(--beda); color: var(--bedateks);
}

/* tabel berblok, seperti berkas Numbers */
.bloktab table { width: max-content; }
.bloktab tr.grup th { text-align: center; font-size: 12px;
  letter-spacing: .03em; padding: 7px 12px; }
.bloktab tr.kol th { font-size: 11.5px; padding: 5px 12px; }
.bloktab .sp { background: transparent !important; border: 0 !important;
  padding: 0 !important; min-width: 15px; width: 15px; }
.bloktab tr.kosong td { height: 26px; }
.bloktab td.ml { white-space: normal; line-height: 1.5; min-width: 150px;
  vertical-align: top; padding-top: 8px; padding-bottom: 8px; }
.bloktab tr.simpul td, .bloktab tr.simpul:hover td {
  background: transparent !important; border: 0 !important; }
.bloktab td.sj { font-weight: 700; text-align: right; }
.bloktab td.sn { text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; }
.bloktab tr.simpul.awal td.sj,
.bloktab tr.simpul.awal td.sn { border-top-width: 1px !important;
  border-top-style: solid !important; }

/* kategori yang bisa dilipat */
.lipat tr.kat { cursor: pointer; user-select: none; }
.lipat tr.kat td { background: var(--langit2); font-weight: 700; }
.lipat tr.kat:hover td { background: var(--langit); }
.lipat .tri { display: inline-block; width: 15px; font-size: 15px;
  transition: transform .12s ease; opacity: .75; }
.lipat tr.kat.buka .tri { transform: rotate(90deg); }
.lipat tr.anak.sembunyi { display: none; }
.lipat td.isi { padding-left: 34px; }

/* pemilih warna kepala & kaki tabel */
.wsw { position: relative; display: inline-block; line-height: 0; }
.rst { display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-left: 8px; border-radius: 4px;
  cursor: pointer; border: 1px solid rgba(255, 255, 255, .5);
  background: transparent; font-size: 11px; line-height: 1; opacity: .65;
  color: #fff; padding: 0; vertical-align: middle; }
.rst:hover { opacity: 1; background: rgba(255, 255, 255, .22); }
.swpop { display: none; position: absolute; top: 150%; left: -7px; z-index: 60;
  padding: 6px; border-radius: 8px; gap: 5px;
  grid-template-columns: repeat(8, 17px);
  background: var(--putih); border: 1px solid var(--garis);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.wsw:focus-within .swpop, .wsw:hover .swpop { display: grid; }
.swpop .sw { width: 17px; height: 17px; border-radius: 4px; cursor: pointer;
  padding: 0; border: 1px solid rgba(0, 0, 0, .2); overflow: hidden;
  display: block; position: relative; transition: transform .1s ease; }
.swpop .sw i { position: absolute; left: 0; right: 0; bottom: 0; height: 47%;
  display: block; }
.swpop .sw:hover { transform: scale(1.18); }

/* ------------------------------------------------------- buku besar */
.bb { margin: .2rem 0 1rem; }
.bbakun { border: 1px solid var(--garis); border-radius: 9px;
  background: var(--putih); margin-bottom: 6px; overflow: hidden; }
.bbakun > summary { display: flex; align-items: center; gap: 10px;
  padding: 8px 13px; cursor: pointer; font-size: 13px;
  background: var(--langit2); color: var(--birutua); font-weight: 700; }
.bbakun > summary:hover { background: var(--langit); }
.bbsisa { margin-left: auto; font-variant-numeric: tabular-nums; }
.bbakun .mtab { margin: 0; }
.bbakun tr.rc td { opacity: .78; font-style: italic; }

/* ------------------------------------------------------------- grid */
.grid { margin: .3rem 0 .8rem; }
.grid .gulung { overflow-x: auto; border-radius: 9px;
  border: 1px solid var(--garis); background: var(--putih); }
/* selebar isinya saja: grid dua kolom seperti Input Masak jadi tidak
   melar memenuhi layar, sedangkan grid lebar tetap bisa digulung */
.grid table { border-collapse: collapse; width: max-content;
  font-size: 13px; }
.grid .gulung { display: inline-block; max-width: 100%; vertical-align: top; }
.grid th, .grid td { border: 1px solid var(--garis); padding: 0; }
.grid th {
  background: var(--biru); color: #fff; border-color: var(--biru);
  padding: 5px 9px; font-size: 11.5px; font-weight: 700;
  white-space: normal; line-height: 1.25; vertical-align: bottom;
  text-align: center; position: sticky; top: 0; z-index: 2;
}
.grid th + th { border-left-color: #FFFFFF40; }
.grid th.n { text-align: center; }
.grid td.no, .grid th.no { width: 30px; min-width: 30px; text-align: center;
  color: var(--redup); font-size: 11px; padding: 0 4px;
  background: var(--langit3); }
.grid td.aksi, .grid th.aksi { width: 28px; min-width: 28px;
  background: var(--langit3); }
/* Lebar kolom ditentukan min-width di <th>, bukan oleh isian.
   Tanpa min-width:0 tiap <input> membawa lebar bawaan sekitar 20 huruf dan
   semua kolom jadi selebar itu, sehingga gridnya melebar jauh dari perlunya. */
.grid input, .grid select {
  width: 100%; min-width: 0; border: 0; padding: 5px 9px; font: inherit;
  font-size: 13px; background: transparent; color: var(--teks);
}
.grid table { table-layout: fixed; }
.grid td.n input { text-align: right; font-variant-numeric: tabular-nums; }
.grid input:focus, .grid select:focus {
  outline: 2px solid var(--biru); outline-offset: -2px;
  background: var(--langit3);
}
.grid td.ro { padding: 5px 9px; color: var(--redup); background: var(--langit3); }
.grid .hapus { width: 100%; border: 0; background: transparent; cursor: pointer;
  color: var(--redup); font-size: 15px; line-height: 1; padding: 4px 0; }
.grid .hapus:hover { color: #c0392b; background: rgba(200, 60, 60, .12); }
.gridkaki { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
.gridkaki .tambah { border: 1px dashed var(--garis); background: transparent;
  color: var(--biru); border-radius: 7px; padding: 4px 12px; cursor: pointer;
  font: inherit; font-size: 12.5px; }
.gridkaki .tambah:hover { background: var(--langit2); }
.gridkaki .petunjuk { color: var(--redup); font-size: 11.5px; }

/* ----------------------------------------------------------- tombol */
.tbl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: .2rem 0 .7rem; }
button.aksi2, .tbl button {
  border: 1px solid var(--garis); background: var(--putih); color: var(--teks);
  border-radius: 8px; padding: 6px 15px; font: inherit; font-size: 13px;
  cursor: pointer;
}
.tbl button:hover { background: var(--langit2); }
.tbl button.utama { background: var(--biru); border-color: var(--biru);
  color: #fff; }
.tbl button.utama:hover { filter: brightness(1.08); }
.tbl button.aktif { background: var(--biru); border-color: var(--biru);
  color: #fff; }

.form { background: var(--putih); border: 1px solid var(--garis);
  border-radius: 11px; padding: 14px 16px; margin: .3rem 0 1rem; }
.form .baris { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.form .medan { display: flex; flex-direction: column; gap: 3px; min-width: 130px; }
.form .medan > span { font-size: 11px; color: var(--redup);
  text-transform: uppercase; letter-spacing: .04em; }
.form input, .form select, .form textarea {
  padding: 6px 9px; border: 1px solid var(--garis); border-radius: 7px;
  font: inherit; font-size: 13px; background: var(--langit3); color: var(--teks);
}
.form input:focus, .form select:focus { outline: 2px solid var(--biru);
  outline-offset: -1px; }
/* baris uang di bawah tabel pesanan: subtotal - potongan + ongkir = total bayar */
.form .baris.bayar { align-items: flex-end; background: var(--langit);
  border: 1px solid var(--garis); border-radius: 9px; padding: 8px 12px; margin-top: 8px; }
.form output.nilai { display: inline-block; padding: 6px 9px; min-width: 96px; text-align: right;
  font-size: 13px; font-weight: 600; color: var(--birutua); border: 1px solid transparent; }
.form output.nilai.total { font-size: 17px; font-weight: 700; color: var(--birutua);
  background: var(--putih); border-color: var(--garis); border-radius: 7px; min-width: 130px; }
.form output.nilai.total.minus { color: #a3342b; }

/* ------------------------------------------------------------ pesan */
.pesan { padding: 9px 13px; border-radius: 9px; margin: .4rem 0;
  font-size: 13px; }
.pesan.salah { background: rgba(200, 60, 60, .13); color: #a3342b;
  border: 1px solid rgba(200, 60, 60, .3); }
.pesan.baik { background: var(--centang); color: var(--centangteks);
  border: 1px solid var(--centang); }
.pesan.info { background: var(--langit2); color: var(--teks);
  border: 1px solid var(--garis); }

.muat { color: var(--redup); font-size: 13px; padding: 20px 0; }

@media (max-width: 820px) {
  .bingkai { flex-direction: column; }
  .sisi { width: auto; flex: none; height: auto; position: static;
    border-right: 0; border-bottom: 1px solid var(--garis); }
  nav { flex-direction: row; flex-wrap: wrap; }
  .isi { padding: 14px; }
}

/* baris Total di kaki grid isian */
.grid tfoot td { background: var(--langit); color: var(--birutua);
  font-weight: 700; padding: 5px 9px; border-top: 2px solid var(--garis); }
.grid tfoot td.n { text-align: right; font-variant-numeric: tabular-nums; }
.grid tfoot td.lbl { color: var(--redup); font-weight: 700; }

/* alasan entri tidak bisa dihapus, ditulis apa adanya */
.bbakun .kunci { color: var(--redup); font-size: 12px; }
.bbakun button.batalsortir { border: 1px solid var(--garis); border-radius: 7px;
  background: var(--putih); color: var(--teks); font: inherit; font-size: 12px;
  padding: 3px 9px; cursor: pointer; margin-left: 6px; white-space: nowrap; }
.bbakun button.batalsortir:hover { background: var(--langit2); }

/* sel dan baris yang disembunyikan sementara oleh admin */
.mtab .sembunyi { display: none; }
.mtab.sembunyi th .x, .mtab.sembunyi td .x { opacity: 0; margin-left: 6px;
  transition: opacity .1s; }
.mtab.sembunyi th:hover .x, .mtab.sembunyi tr:hover td .x { opacity: .55; }
.mtab .x { display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 3px; cursor: pointer;
  font-size: 12px; line-height: 1; border: 1px solid rgba(128, 128, 128, .4);
  background: transparent; color: inherit; padding: 0; vertical-align: middle; }
.mtab .x:hover { opacity: 1 !important; background: rgba(200, 60, 60, .18); }
.lipat th .rst.semua { margin-left: 4px; }

/* sel untung rugi: hijau kalau untung, merah kalau rugi */
.mtab td.untung, .mtab tbody tr:hover td.untung,
.mtab tbody tr:nth-child(even) td.untung, .mtab tr.tot td.untung {
  background: var(--centang) !important; color: var(--centangteks);
}
.mtab td.buntung, .mtab tbody tr:hover td.buntung,
.mtab tbody tr:nth-child(even) td.buntung, .mtab tr.tot td.buntung {
  background: var(--rugi) !important; color: var(--rugiteks);
}
.bloktab td.sn.untung { background: var(--centang) !important;
  color: var(--centangteks); }
.bloktab td.sn.buntung { background: var(--rugi) !important;
  color: var(--rugiteks); }
.angka .kotak.untung { border-color: var(--centangteks); }
.angka .kotak.untung .val { color: var(--centangteks); }
.angka .kotak.buntung { border-color: var(--rugiteks); }
.angka .kotak.buntung .val { color: var(--rugiteks); }

/* panel hitungan sementara di formulir proses */
.kira { display: flex; gap: 2.2rem; flex-wrap: wrap;
  margin: .6rem 0; font-size: .82rem; line-height: 1.5; }
.kira > div > b { display: block; margin-bottom: .15rem; }
.kira .untung { color: var(--centangteks); }
.kira .buntung { color: var(--rugiteks); }

/* Keep Customer di tab Dist: terlipat, dan barisnya bisa diklik untuk membuka
   Input Penjualan atas nama pelanggan itu */
.keeplipat { margin: .6rem 0; }
.keeplipat tr.bisaklik { cursor: pointer; }
.keeplipat tr.bisaklik:hover td { background: var(--langit) !important; }

/* medan formulir yang disembunyikan program (mis. "Uang masuk ke" waktu
   pengambilan keep): atribut hidden harus menang atas display .medan */
label.medan[hidden] { display: none !important; }

/* ------------------------------------------------------------ struk */
/* kolom Cetak di Riwayat Penjualan dan tombol Struk di Riwayat entri */
[data-ws-id="riwayat_jual"] td[data-kol="Struk"]:not(:empty) { color: var(--biru); cursor: pointer;
  font-weight: 600; white-space: nowrap; text-decoration: underline; }
button.cetakstruk, button.setentri, button.setlepas, button.setubah, button.lanjutan, button.pakai,
button.keluar, button.masuk, button.bayar, button.terima {
  font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid var(--garis);
  border-radius: 6px; background: var(--langit3); color: var(--birutua); cursor: pointer; }
button.cetakstruk:hover, button.setentri:hover, button.setlepas:hover, button.setubah:hover,
button.lanjutan:hover, button.pakai:hover, button.keluar:hover, button.masuk:hover,
button.bayar:hover, button.terima:hover { background: var(--langit2); }
button.bayar { color: #a3342b; }
button.terima { color: var(--centangteks); }
button.keluar { color: #a3342b; }
button.masuk { color: var(--centangteks); }
.bb .mtab td.aksi { white-space: nowrap; padding: 3px 8px; }
.bb .setringkas { margin: 4px 2px 2px; }
.setlabel { white-space: nowrap; }
img.logostruk { max-width: 140px; max-height: 64px; background: #fff; border: 1px solid var(--garis);
  border-radius: 6px; padding: 4px; vertical-align: middle; }

/* bukti foto: tombol di riwayat dan kolom Bukti di tabel jurnal */
button.bukti { font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid var(--garis);
  border-radius: 6px; background: var(--langit3); color: var(--birutua); cursor: pointer; }
button.bukti:hover { background: var(--langit2); }
[data-ws-id="jurnal"] td[data-kol="Bukti"]:not(:empty) { color: var(--biru); cursor: pointer;
  white-space: nowrap; text-align: center; }

/* ------------------------------------------------------------ panel kiri dilipat */
.sisi { position: sticky; }
.sisi-tombol { font: inherit; font-size: 15px; line-height: 1; width: 26px; height: 26px;
  border: 1px solid var(--garis); border-radius: 7px; background: var(--langit3); color: var(--birutua);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sisi-tombol:hover { background: var(--langit2); }
#sisi_tutup { position: absolute; top: 10px; right: 8px; }
#sisi_buka { display: none; margin-right: 4px; }
body.sisi-tutup .sisi { display: none; }
body.sisi-tutup #sisi_buka { display: inline-flex; }

/* tabel lebar penuh: mengisi lebar panel (pembungkusnya jadi blok, bukan
   inline-block), sisa ruang dibagi ke kolom-kolomnya; keterangan boleh melipat */
.mtab.penuh .gulung { display: block; width: 100%; }
.mtab.penuh table { width: 100%; }
/* sisa ruang lebih banyak ke kolom angka (5% per kolom) daripada ke Keterangan */
.mtab.penuh th.sempit, .mtab.penuh td.sempit { min-width: 44px; }
.mtab.penuh th.sempit { width: 5%; }
.mtab.penuh td[data-kol="Keterangan"] { white-space: normal; min-width: 140px; line-height: 1.35; }
.mtab.penuh td[data-kol="Aksi"] { white-space: nowrap; }
.mtab.penuh td[data-kol="Aksi"] button { margin-right: 3px; }

/* kolom sempit: judul dua baris, sel rapat */
.mtab th.sempit { padding: 5px 5px; font-size: 11.5px; line-height: 1.15; min-width: 0; }
.mtab td.sempit { padding: 5px 6px; }

/* akun dibayar dimuka: satu baris per pos, kalimat-kalimat di satu sel */
.bb .mtab tr.pos td.multi { white-space: normal; line-height: 1.45; padding: 6px 12px; min-width: 320px; }
.bb .mtab tr.pos td.multi .sub { display: flex; gap: 10px; align-items: baseline; }
.bb .mtab tr.pos td.multi .tglsub { flex: 0 0 82px; color: var(--redup); font-variant-numeric: tabular-nums; }
.bb .mtab tr.pos td.multi .jml { color: var(--redup); }
.bb .mtab tr.pos td.multi a { color: var(--biru); text-decoration: underline dotted; }
.bb .mtab tr.pos td.n { vertical-align: bottom; }
.bb .mtab tr.pos td.aksi { vertical-align: bottom; }

/* x kecil untuk menghapus entri dari kalimat baris pos */
.bb .mtab tr.pos button.hapussub { font: inherit; font-size: 12px; line-height: 1; padding: 0 5px; margin-left: 4px;
  border: 1px solid var(--garis); border-radius: 5px; background: var(--langit3); color: #a3342b; cursor: pointer;
  vertical-align: baseline; }
.bb .mtab tr.pos button.hapussub:hover { background: rgba(200, 60, 60, .15); }

/* buku besar: keterangan panjang melipat di kolomnya (maks ~70 huruf per baris),
   supaya kolom Debit / Kredit / Saldo tidak terdorong keluar layar */
.bb .mtab td:nth-child(2) { white-space: normal; max-width: 62ch; min-width: 220px; line-height: 1.35; }
.bb .mtab td:nth-child(2) .setlabel { white-space: normal; }

/* baris set di buku besar: judul set di atas kalimat-kalimat anggotanya */
.bb .mtab tr.pos td.multi .sub.setjudul { color: var(--birutua); font-weight: 600; margin-bottom: 2px; }

/* tab Modal: Kas 2026 dan Sisa Stok Keseluruhan berdampingan (melipat kalau sempit) */
.berdampingan { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.berdampingan .kiri { flex: 0 1 auto; min-width: 0; }
.berdampingan .kanan { flex: 0 1 auto; min-width: 320px; }