/* 精油計算器網路版：登入、帳號視窗、提示列（顏色沿用桌面版 app.css 的變數） */
html:not(.w-ready) body > header, html:not(.w-ready) body > main, html:not(.w-ready) body > section,
html:not(.w-ready) body > footer { visibility: hidden; }

#wAcct { margin-left: .4rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wView { position: sticky; top: 0; z-index: 50; background: #fff4d6; color: #6b4a10; border-bottom: 2px solid #f0a020;
  padding: .45rem 1rem; text-align: center; font-size: .95rem; }
#wView .btn { margin-left: .6rem; }
#wStale { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 9000; background: var(--card);
  border: 2px solid var(--sage); border-radius: 12px; padding: .6rem 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
#wStale .btn { margin-left: .6rem; }

.w-back { position: fixed; inset: 0; z-index: 10000; background: rgba(40,38,34,.45); display: flex; align-items: flex-start;
  justify-content: center; overflow-y: auto; padding: 4vh 1rem; }
.w-back.w-full { background: var(--bg); }
.w-modal { position: relative; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 1.4rem 1.5rem; width: 100%; max-width: 26rem; line-height: 1.6; }
.w-modal.wide { max-width: 56rem; }
.w-modal h3 { margin: .2rem 0 .6rem; }
.w-modal h4 { margin: 0 0 .4rem; }
.w-modal p { margin: .4rem 0; }
.w-x { position: absolute; top: .6rem; right: .7rem; border: 0; background: transparent; font-size: 1.1rem; cursor: pointer; color: var(--sub); }
.w-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.w-brand img { width: 52px; height: 52px; border-radius: 12px; }
.w-brand b { display: block; font-size: 1.3rem; color: var(--sage-d); }
.w-brand small { color: var(--sub); }
.w-f { display: block; margin: .55rem 0; }
.w-f > span { display: block; font-size: .85rem; color: var(--sub); margin-bottom: .15rem; }
.w-f input, .w-f select { width: 100%; box-sizing: border-box; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: #fff; color: var(--ink); }
.w-f.inline { display: flex; align-items: center; gap: .6rem; }
.w-f.inline > span { margin: 0; }
.w-f.inline select { width: auto; }
.w-f input:focus, .w-f select:focus { outline: 2px solid var(--sage-l); border-color: var(--sage); }
.w-pw { display: flex; gap: .3rem; }
.w-eye { border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; padding: 0 .55rem; }
.w-msg { min-height: 1.2em; color: var(--red); font-size: .92rem; margin: .4rem 0; white-space: pre-line; }
.w-msg.good { color: var(--sage-d); }
.w-btns { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .6rem; flex-wrap: wrap; }
.w-btns.left { justify-content: flex-start; }
.w-btns:not(.left) .btn { min-width: 6.5rem; }
.w-links { text-align: center; margin-top: .8rem; }
.w-links a { color: var(--sage-d); }
.w-sub { color: var(--sub); font-size: .88rem; }
.w-sec { border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; margin: .7rem 0; background: #fff; }
.w-sec .w-f { max-width: 24rem; }
.w-tag { font-size: .78rem; padding: .05rem .5rem; border-radius: 99px; background: #eee; color: var(--sub); vertical-align: middle; }
.w-tag.on { background: var(--sage-l); color: var(--sage-d); }
.w-tabs { display: flex; gap: .3rem; border-bottom: 2px solid var(--line); margin: -.3rem 0 .6rem; padding-right: 2rem; flex-wrap: wrap; }
.w-tab { border: 0; background: transparent; padding: .5rem .9rem; cursor: pointer; font: inherit; color: var(--sub); border-radius: 8px 8px 0 0; }
.w-tab.on { background: var(--sage-l); color: var(--sage-d); font-weight: 700; }
.w-tbl { overflow-x: auto; }
.w-tbl table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.w-tbl th, .w-tbl td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.w-tbl th { color: var(--sub); font-weight: 400; font-size: .85rem; }
.w-act { white-space: nowrap; text-align: right !important; }
.w-act .btn { margin: .1rem 0 .1rem .2rem; }
tr.w-off td { opacity: .55; }
tr.w-viewing td { background: #fff8e6; }
.w-red { color: var(--red); }
.w-qr svg { width: 200px; height: 200px; background: #fff; }
.w-code { user-select: all; word-break: break-all; background: var(--sage-l); padding: .1rem .4rem; border-radius: 6px; }

@media (max-width: 640px) {
  .w-modal { padding: 1.1rem 1rem; }
  .w-back { padding: 2vh .5rem; }
  #wView { font-size: .85rem; padding: .4rem .6rem; }
}