/* DogEar web app — Ether skin, matching the embed reader.
   Deep indigo surfaces, aquamarine accent, soft off-white type. */
:root{
  --bg:#081322; --panel:#0b1c33; --ink:#e9f2f1; --dim:rgba(190,225,220,.62);
  --accent:#6ff2dc; --ring:rgba(111,242,220,.4); --track:rgba(111,242,220,.15);
  --warn-bg:#3a2408; --warn-ring:#e8a33d; --danger:#ff9d8a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.55;
}
a{color:var(--accent)}
.top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 1rem; border-bottom:1px solid var(--ring);
  position:sticky; top:0; background:var(--bg); z-index:5;
}
.brand{display:flex; align-items:center; gap:.55rem; color:var(--ink);
  text-decoration:none; font-weight:800; font-size:1.15rem}
.brand img{border-radius:8px}
.top nav{display:flex; align-items:center; gap:1rem; font-size:.95rem}
.top nav a{text-decoration:none; border-bottom:1px dotted var(--ring)}
.install{
  font:inherit; font-weight:700; color:#042a28; background:var(--accent);
  border:0; border-radius:999px; padding:.4rem .95rem; cursor:pointer;
}
main{max-width:44rem; margin:0 auto; padding:1.2rem 1rem 2.5rem}
h1{font-size:2rem; line-height:1.15; margin:.6rem 0 .6rem}
.lede{font-size:1.1rem; color:var(--ink)}
.cost{color:var(--dim)}
.primary{
  font:inherit; font-size:1.05rem; font-weight:700; color:#042a28;
  background:var(--accent); border:0; border-radius:999px;
  padding:.7rem 1.5rem; cursor:pointer; margin:.6rem 0;
}
.primary:hover{filter:brightness(1.07)}
.primary:disabled{opacity:.5; cursor:wait}
.ghost{
  font:inherit; color:var(--accent); background:transparent;
  border:1px solid var(--ring); border-radius:999px; padding:.45rem .95rem; cursor:pointer;
}
.warn{
  background:var(--warn-bg); border:1px solid var(--warn-ring); color:#ffe1ae;
  border-radius:12px; padding:.8rem 1rem; margin:1rem 0;
}
.panel{
  background:var(--panel); border:1px solid var(--ring); border-radius:14px;
  padding:1rem; margin:1rem 0 1.4rem;
}
.tabs{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.9rem}
.tab{
  font:inherit; color:var(--accent); background:transparent;
  border:1px solid var(--ring); border-radius:999px; padding:.4rem .9rem; cursor:pointer;
}
.tab.on{background:var(--accent); color:#042a28; font-weight:700}
.tabpane label{display:block; margin:.7rem 0; font-weight:600}
.tabpane input[type="text"], .tabpane input[type="url"], .tabpane textarea{
  display:block; width:100%; margin-top:.3rem; font:inherit; font-weight:400;
  color:var(--ink); background:var(--bg); border:1px solid var(--ring);
  border-radius:10px; padding:.55rem .7rem;
}
.tabpane input[type="file"]{font:inherit; margin:.6rem 0}
.msg{min-height:1.4em; color:var(--accent)}
.msg.err{color:var(--danger)}
.fine{color:var(--dim); font-size:.88rem}
.docs{list-style:none; margin:.6rem 0; padding:0}
.docs li{
  display:flex; align-items:center; gap:.8rem; justify-content:space-between;
  background:var(--panel); border:1px solid var(--ring); border-radius:12px;
  padding:.7rem .9rem; margin:.5rem 0;
}
.docs .t{font-weight:700}
.docs .meta{color:var(--dim); font-size:.85rem}
.chip{
  font-size:.8rem; font-weight:700; color:#042a28; background:var(--accent);
  border-radius:999px; padding:.15rem .6rem; white-space:nowrap;
}
.chip.plain{background:transparent; color:var(--dim); border:1px solid var(--ring)}
#docBody{margin-top:1rem; font-size:1.05rem}
#docBody p{margin:.8rem 0}
#docBody h2{font-size:1.3rem; margin:1.2rem 0 .5rem}
.danger-row{margin-top:2rem}
.danger{color:var(--danger); border-color:rgba(255,157,138,.5)}
footer{
  max-width:44rem; margin:0 auto; padding:1rem 1rem 2.2rem;
  color:var(--dim); font-size:.88rem; border-top:1px solid var(--ring);
}
.rc-sent.rc-reading{background:rgba(111,242,220,.16); border-radius:3px}
@media (max-width:34rem){ h1{font-size:1.6rem} .top nav{gap:.6rem; font-size:.88rem} }