html,body{ height:100%; }
body{
margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell, Arial;
background:radial-gradient(1200px 800px at 110% -10%, rgba(14,165,233,.10), transparent 60%),
radial-gradient(900px 700px at -10% 110%, rgba(239,68,68,.08), transparent 50%),
var(--bg);
color:var(--text);
}
.muted{ color:var(--muted); }
.app{ position:relative; height:100vh; padding:16px; }
.content{ position:absolute; inset:16px; border-radius:24px; background:#fff;
border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; }
.content-header{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:16px 20px; border-bottom:1px solid var(--border);
}
.title{ font-weight:900; letter-spacing:.02em; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tools{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.badge{
display:inline-flex; align-items:center; gap:6px;
padding:7px 10px; border-radius:999px; font-weight:900; font-size:12px;
border:1px solid var(--border); background:#fff;
}
.badge.ok{ color:var(--ok); }
.badge.warn{ color:var(--warn); }
.btn{ all:unset; padding:10px 14px; border-radius:12px; cursor:pointer; user-select:none;
background:#fff; border:1px solid var(--border); font-weight:800; font-size:13px; color:var(--text); }
.btn:hover{ transform:translateY(-1px); background:#fdfdfd; }
.btn.primary{ background:linear-gradient(180deg,#38bdf8,#0ea5e9); color:#fff; border:none; }
.btn.danger{ background:linear-gradient(180deg,#f87171,#ef4444); color:#fff; border:none; }
.btn.small{ padding:8px 10px; font-size:12px; border-radius:10px; }
.input,.select{
padding:10px 12px; border-radius:12px; background:#fff; color:var(--text);
border:1px solid var(--border); font:inherit; font-size:13px;
}
.content-body{ position:absolute; inset:78px 0 0 0; overflow:auto; padding:16px; }
section[data-module]{ display:none; } section[data-module].visible{ display:block; }
.drawer-toggle{ all:unset; display:flex; gap:8px; align-items:center; padding:10px 12px; border-radius:12px;
border:1px solid var(--border); background:#fff; cursor:pointer; font-weight:900; }
.hamburger{ width:20px; display:grid; gap:3px; }
.hamburger span{ display:block; height:2px; background:var(--text); border-radius:2px; }
.drawer{
position:absolute; right:0; top:0; height:100%; width:96px;
background:linear-gradient(180deg,var(--panel),var(--panel-acc));
border-left:1px solid var(--border); box-shadow:var(--shadow);
transform:translateX(100%); transition:transform .25s ease;
display:flex; flex-direction:column; align-items:center; padding:10px 8px; z-index:10;
}
.drawer.open{ transform:translateX(0); }
.brand{ width:100%; text-align:center; font-weight:900; letter-spacing:.06em; margin-bottom:8px; }
.menu{ display:flex; flex-direction:column; gap:8px; width:100%; }
.menu button{
all:unset; display:flex; align-items:center; justify-content:center; width:100%; height:56px;
border-radius:16px; cursor:pointer; color:var(--text); background:#fff; border:1px solid var(--border);
font-size:18px;
}
.menu button.active{ outline:2px solid var(--accent); border-color:transparent; }
/* NOTES */
.notes-header{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.hour-col{ display:flex; flex-direction:column; gap:12px; }
.hour-card{
background:#fff; border:1px solid var(--border); border-radius:18px; padding:12px;
position:relative; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.hour-card.tall .hour-content{ min-height:66vh; }
.hour-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.hour{ font-weight:900; letter-spacing:.04em; color:var(--accent); }
.hour-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.expand-toggle{ position:absolute; right:10px; top:10px; }
.hour-content{ margin-top:8px; display:none; }
.hour-topic-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.topic-input{ min-width:220px; flex:1; font-weight:800; }
.hour-text{ white-space:pre-wrap; color:#111827; font-size:14px; min-height:70px; padding:6px; border-radius:10px; background:#fafafa; border:1px dashed var(--border); }
.hour-textarea{ width:100%; min-height:130px; resize:vertical; border-radius:12px; background:#fff; color:#111827; border:1px solid var(--border); padding:10px; font:inherit; }
.reminder-box{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.hour-reminder-bottom{ display:none; margin-top:auto; padding-top:10px; border-top:1px dashed var(--border); }
body.lock-scroll{ overflow:hidden; }
.hour-card.full{
position:fixed; left:12px; right:12px; top:86px; bottom:12px;
z-index:999; border-radius:22px; overflow:auto;
}
/* CALC */
.calc-wrap{ display:grid; grid-template-rows:auto auto 1fr auto; gap:12px; }
.calc-screen{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:var(--shadow); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
/* Equal size & bold, +30% bigger */
.calc-expr, .calc-result{
font-weight:900; color:#111827; word-break:break-word;
font-size:42px; line-height:1.15;
}
.calc-expr{ color:#0f172a; opacity:.88; margin-bottom:6px; }
.calc-result{ color:#111827; }
.calc-keys{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.key{
all:unset; text-align:center; padding:14px; background:#fff; border:1px solid var(--border);
border-radius:12px; font-weight:900; cursor:pointer; box-shadow:var(--shadow);
font-size:18px;
}
.key.op{ color:var(--accent); font-size:24px; } /* bigger operators */
.key.eq{ background:linear-gradient(180deg,#38bdf8,#0ea5e9); color:#fff; border:none; font-size:22px; }
.history{ border-top:1px dashed var(--border); padding-top:10px; max-height:280px; overflow:auto; }
.history-item{
display:flex; justify-content:space-between; gap:10px; padding:10px 12px;
border-radius:14px; background:#f9fafb; margin-bottom:10px; border:1px solid var(--border);
cursor:pointer;
}
.history-item:hover{ background:#fff; }
.history-left{ display:flex; flex-direction:column; gap:4px; }
.history-right{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:140px; }
.hist-val{ font-weight:900; font-size:18px; }
.hist-time{ font-size:12px; color:var(--muted); }
.card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:12px; box-shadow:var(--shadow); }
.report-ta{ width:100%; min-height:180px; resize:vertical; border-radius:14px; border:1px solid var(--border); padding:10px; font:inherit; }
.report-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
/* RECORDER */
.audio-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
audio{ width:100%; }
/* TABLES */
table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:14px; }
thead th{ text-align:left; font-size:12px; color:var(--muted); background:#f1f5f9; padding:10px; }
tbody td{ padding:10px; border-bottom:1px solid var(--border); }
/* INVOICE */
.invoice-grid{ display:grid; gap:12px; }
.right{text-align:right;}
.collapser{
display:flex; justify-content:space-between; align-items:center; gap:10px; cursor:pointer;
padding:10px 12px; border-radius:14px; background:#fff; border:1px solid var(--border);
font-weight:900;
}
.collapse-body{ display:none; margin-top:10px; }
.collapse-body.open{ display:block; }
.inv-rows input{ font-weight:700; }
.vat-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
top of page
bottom of page
