3SIM Organizer — Notebook 2.2 (Light • EN • Stable • Backup • Share)

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