/* Rings Bae – dark & gold theme */
:root {
  --rb-gold:#d4af37;          /* പ്രധാന സ്വർണ്ണ നിറം: ബട്ടൺ, ലിങ്ക്, ബോർഡർ, ഹൈലൈറ്റ് */
  --rb-gold2:#f5d76e;         /* ഇളം സ്വർണ്ണം: hover, ഗ്രേഡിയന്റ് */
  --rb-bg:#0d0d0d;            /* പേജ് പശ്ചാത്തലം (ഏതാണ്ട് കറുപ്പ്) */
  --rb-card:#141414;          /* കാർഡ്, ബോക്സ് പശ്ചാത്തലം */
  --rb-card2:#1a1a1a;         /* ഇൻപുട്ട് ഫീൽഡ്, ഡ്രോപ്ഡൗൺ */
  --rb-line:#2a2a2a;          /* സാധാരണ വരകൾ/ബോർഡർ */
  --rb-text:#d0d0d0;          /* സാധാരണ എഴുത്ത് */
  --rb-white:#ffffff;         /* തലക്കെട്ട്, പ്രധാന എഴുത്ത് */
  --rb-on-gold:#000000;       /* സ്വർണ്ണ ബട്ടണിന് മുകളിലെ എഴുത്ത് */
  --rb-gold-line:rgba(212,175,55,.6);
  --rb-gold-soft:rgba(212,175,55,.35);
  --rb-danger:#e0475b;
  --rb-success:#22c55e;
  --rb-mute:#9a9a9a;
}
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { margin:0; font-family:system-ui,-apple-system,"Noto Sans Malayalam",sans-serif; background:var(--rb-bg); color:var(--rb-text); }
h1, h2, h3, h4 { color:var(--rb-white); }
a { color:var(--rb-gold); } a:hover { color:var(--rb-gold2); }

.top { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 14px; background:var(--rb-card); border-bottom:1px solid var(--rb-gold-soft); flex-wrap:wrap; position:sticky; top:0; z-index:5; }
.brand { font-weight:700; font-size:17px; color:var(--rb-gold); letter-spacing:.5px; }
.conn { display:flex; align-items:center; gap:8px; font-size:13px; flex-wrap:wrap; color:var(--rb-text); }
.top-status { max-width:760px; margin:0 auto; padding:0 14px; }
main { max-width:760px; margin:0 auto; padding:12px 14px 40px; }

.card { background:var(--rb-card); border:1px solid var(--rb-gold-soft); border-radius:16px; padding:14px; margin-bottom:12px; }
.card h3 { margin:0 0 6px; font-size:16px; color:var(--rb-white); }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.row.between { justify-content:space-between; }
.row.tools { margin:0 0 10px; }

/* buttons: gold = main action, .sec = gold outline */
button, .btn { appearance:none; border:0; border-radius:50px; padding:13px 22px; font-size:16px; font-weight:700; cursor:pointer; background:var(--rb-gold); color:var(--rb-on-gold); display:inline-block; font-family:inherit; }
button:hover, .btn:hover { background:var(--rb-gold2); }
button.sec, .btn.sec { background:transparent; color:var(--rb-gold); border:1px solid var(--rb-gold-line); }
button.sec:hover, .btn.sec:hover { background:rgba(212,175,55,.12); color:var(--rb-gold2); }
button.sm, .btn.sm { padding:9px 15px; font-size:14px; }
button.danger { background:transparent; color:var(--rb-danger); border:1px solid var(--rb-danger); }
button.danger:hover { background:rgba(224,71,91,.15); color:var(--rb-danger); }
button:disabled { opacity:.4; cursor:not-allowed; }
button:disabled:hover { background:var(--rb-gold); }
button.sec:disabled:hover { background:transparent; }

.status { font-size:14px; color:var(--rb-mute); margin-top:8px; min-height:18px; }
.status.ok { color:var(--rb-success); } .status.err { color:var(--rb-danger); }
.hint { font-size:12.5px; color:var(--rb-mute); margin-top:6px; line-height:1.55; }
.hint b { color:var(--rb-gold); }
.hint.warn { color:var(--rb-danger); }
label { font-size:13px; color:var(--rb-mute); display:block; margin-bottom:4px; }
input[type=number], input[type=text], select, textarea { width:100%; padding:10px 12px; font-size:15px; border:1px solid var(--rb-gold-line); border-radius:12px; background:var(--rb-card2); color:var(--rb-white); font-family:inherit; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--rb-gold2); box-shadow:0 0 0 2px rgba(212,175,55,.25); }
input:disabled { opacity:.5; }
select option { background:var(--rb-card2); color:var(--rb-white); }
textarea { resize:vertical; }
::placeholder { color:#6d6d6d; }
.grid2 { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.grid4 { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:10px; }
@media (max-width:560px) { .grid4 { grid-template-columns:repeat(2,1fr); } }
.chk { display:flex; gap:8px; align-items:center; font-size:14px; color:var(--rb-text); margin:8px 0 0; }
.chk input { width:20px; height:20px; accent-color:var(--rb-gold); }

.tabs { display:flex; gap:6px; margin:4px 0 12px; }
.tabs button { flex:1; background:transparent; color:var(--rb-gold); border:1px solid var(--rb-gold-soft); padding:11px 6px; font-size:15px; }
.tabs button:hover { background:rgba(212,175,55,.12); }
.tabs button.on { background:var(--rb-gold); color:var(--rb-on-gold); border-color:var(--rb-gold); }
.hidden { display:none; }

.previews { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:10px; }
.previews canvas { width:100%; height:auto; border:1px solid var(--rb-gold-soft); background:#fff; border-radius:4px; }
.cvwrap { background:var(--rb-card2); border:1px solid var(--rb-line); padding:10px; border-radius:12px; text-align:center; overflow:auto; }
#cv { max-width:100%; height:auto; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.6); touch-action:none; cursor:move; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#555; }
.dot.on { background:var(--rb-success); box-shadow:0 0 6px var(--rb-success); }
.propgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:8px; }
.ptitle { font-weight:700; margin-bottom:8px; color:var(--rb-gold); }

/* language selector */
#langSel{width:auto;font-size:13px;padding:6px 8px}
body[data-lang=en] .l-ml,body[data-lang=en] .l-br{display:none}
body[data-lang=ml] .l-en,body[data-lang=ml] .l-br{display:none}

/* quick number bar */
.quick{align-items:center;margin:10px 0 4px}
.quick label{margin:0}
.quick input{flex:1;min-width:150px}