claude-finops 0.13.0 → 0.14.0

package/web/styles.css

@@ -605,3 +605,74 @@ table.tbl .sub { font-size:10.5px; color:var(--muted); }
 .actnow-it .ai .i { width:17px; height:17px; vertical-align:middle; }
 .focus-hd .i { align-self:center; }
 .status .glyph .i { display:block; width:10px; height:10px; }
+
+/* ---------- budgets form ---------- */
+.cfg .sec { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em;
+            font-weight:620; margin:0 0 6px; }
+.cfg .fld { margin-bottom:12px; }
+.cfg .fld > .hd { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
+                  padding:5px 2px 3px; font-weight:600; }
+.cfg input[type=text], .cfg input[type=password], .cfg select {
+  width:100%; padding:5px 7px; border-radius:6px; border:1px solid var(--border); background:var(--surface-2); }
+.cfg input.bad, .cfg select.bad { border-color:var(--critical); box-shadow:0 0 0 1px var(--critical); }
+.cfg .sugg { display:flex; flex-wrap:wrap; gap:4px; margin:5px 0 0; align-items:center; }
+.cfg .sugg .chip { font-size:11px; padding:2px 9px; }
+.cfg .fld-hint { font-size:11px; color:var(--muted); margin:3px 2px 0; }
+.cfg .fld-err { font-size:11.5px; color:var(--critical-ink); margin:3px 2px 0; font-weight:550; }
+.cfg .fld-hint:empty, .cfg .fld-err:empty { display:none; }
+.cfg .save-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:14px 0 4px; }
+.cfg .save-row .chip { padding:6px 18px; }
+.cfg .ok, .cfg #cfg-msg.ok { color:var(--good-ink); font-size:12px; }
+.cfg #cfg-msg.err { color:var(--critical-ink); font-size:12px; font-weight:550; }
+
+/* ---------- budgets: numbered blocks ---------- */
+.cfg .blk { border:1px solid var(--border); border-radius:10px; padding:12px 14px 4px; margin:0 0 12px; }
+.cfg .blk h4 { display:flex; align-items:center; gap:8px; margin:0 0 2px; font-size:14px; }
+.cfg .blk .num { color:var(--s1); font-size:16px; }
+.cfg .blk-intro { margin:0 0 8px; color:var(--text); font-size:12.5px; }
+.cfg .blk-sub { color:var(--muted); font-weight:450; font-size:12px; }
+.cfg .blk-help { width:20px; height:20px; border-radius:50%; border:1px solid var(--border);
+  background:var(--surface-2); color:var(--muted); font-size:11px; font-weight:700; cursor:pointer; line-height:1; }
+.cfg .blk-help:hover, .cfg .blk-help:focus-visible { color:var(--text); border-color:var(--border-strong); }
+.cfg details.adv > summary { cursor:pointer; list-style:none; padding-bottom:8px; }
+.cfg details.adv > summary::-webkit-details-marker { display:none; }
+.cfg details.adv > summary h4::before { content:'▸'; color:var(--muted); }
+.cfg details.adv[open] > summary h4::before { content:'▾'; }
+.cfg .livebox { border:1px dashed var(--border-strong); border-radius:8px; padding:10px 12px; margin:4px 0 10px;
+  background:var(--surface-2); }
+.cfg .livebox p { margin:6px 0 0; font-size:12.5px; }
+.cfg .lb-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
+.cfg .lb-state { font-size:12px; color:var(--muted); }
+.cfg .lb-state.on { color:var(--good-ink); }
+.cfg .lb-state.warn { color:var(--warning-ink); font-weight:550; }
+
+/* ---------- guide popup ---------- */
+.guide-layer { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.45);
+  display:flex; align-items:center; justify-content:center; padding:16px; }
+.guide { width:min(760px, 100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--surface);
+  border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); outline:none; }
+.guide header { display:flex; align-items:center; gap:10px; padding:14px 16px 6px; }
+.guide h2 { margin:0; font-size:18px; }
+.guide .g-step { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
+.guide .g-x { margin-left:auto; }
+.guide .g-pic { position:relative; margin:6px 16px; border:1px solid var(--border); border-radius:10px;
+  overflow:hidden; background:var(--bg, var(--surface-2)); }
+.guide .g-pic { text-align:center; }
+.guide .g-fig { position:relative; display:inline-block; max-width:100%; line-height:0; }
+.guide .g-fig img { display:block; max-width:100%; max-height:45vh; width:auto; height:auto; }
+.guide .g-live { text-align:left; padding:12px; pointer-events:none; user-select:none; }
+.guide .g-mark { position:absolute; transform:translate(-50%,-50%); width:26px; height:26px; border-radius:50%;
+  background:var(--s1); color:#fff; font-weight:700; font-size:14px; display:flex; align-items:center;
+  justify-content:center; box-shadow:0 0 0 3px var(--surface); }
+.guide .g-text { padding:4px 18px 2px; font-size:15px; line-height:1.5; }
+.guide .g-text p { margin:6px 0; }
+.guide footer { display:flex; align-items:center; gap:8px; padding:10px 16px 14px; flex-wrap:wrap; }
+.guide .g-dots { display:flex; gap:5px; }
+.guide .g-dots i { width:7px; height:7px; border-radius:50%; background:var(--border-strong); }
+.guide .g-dots i.on { background:var(--s1); }
+.guide .g-cc { margin-top:10px; padding:10px 12px; border-radius:8px; background:#1e1e1e; color:#e6e6e6; font:12.5px/1.5 ui-monospace, Menlo, monospace; }
+.pulse { animation: guide-pulse 1s ease-in-out 2; border-radius:10px; }
+@media (prefers-reduced-motion: reduce) { .pulse { animation: none; outline: 3px solid var(--s1); } }
+.guide .g-ex { text-align:left; padding:8px 12px 0; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
+@keyframes guide-pulse { 50% { box-shadow:0 0 0 4px color-mix(in srgb, var(--s1) 55%, transparent); } }
+@media (max-width: 600px) { .guide .g-text { font-size:14px; } .guide footer .spacer { display:none; } }