*{box-sizing:border-box}body{color:#0f172a;background:radial-gradient(circle at 15% 15%,#dbeafe 0%,#0000 42%),radial-gradient(circle at 85% 0,#ddd6fe 0%,#0000 40%),linear-gradient(#f8fbff 0%,#eef4ff 100%);margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#root{max-width:980px;margin:0 auto;padding:24px 16px 56px}.app-shell{gap:18px;display:grid;position:relative}.top-nav{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffa6;border:1px solid #94a3b852;border-radius:14px;flex-wrap:wrap;gap:10px;padding:8px;display:flex}.nav-button{color:#1e293b;box-shadow:none;background:#e2e8f0;border-color:#cbd5e1}.nav-button.active{color:#fff;background:linear-gradient(135deg,#2563eb,#4f46e5);border-color:#0000;box-shadow:0 10px 20px #4f46e542}.hero{color:#eff6ff;background:radial-gradient(circle at 85% 20%,#a78bfa66,#0000 45%),linear-gradient(135deg,#0f172a 0%,#1e3a8a 45%,#4f46e5 100%);border-radius:20px;padding:24px;position:relative;overflow:hidden;box-shadow:0 20px 45px #2563eb59}.hero:after{content:"";background:radial-gradient(circle,#ffffff40 0%,#0000 70%);border-radius:999px;width:180px;height:180px;position:absolute;bottom:-55px;right:-45px}.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:#bfdbfe;margin:0;font-size:.75rem;font-weight:700}h1{letter-spacing:-.02em;margin:10px 0 8px;font-size:clamp(1.5rem,3vw,2.25rem)}.hero-subtitle{color:#dbeafe;max-width:620px;margin:0}.hero-meta{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.hero-chip{background:#ffffff24;border:1px solid #ffffff40;border-radius:999px;padding:5px 10px;font-size:.84rem;font-weight:600}h2{color:#0f172a;margin:0 0 10px;font-size:1.06rem}.hint{color:#475569;margin:0 0 12px}.card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffc7;border:1px solid #94a3b84d;border-radius:18px;padding:16px;transition:transform .2s,box-shadow .2s;box-shadow:0 12px 35px #0f172a14}.card:hover{transform:translateY(-1px);box-shadow:0 18px 42px #0f172a1f}.list-grid{gap:10px;margin-bottom:10px;display:grid}.row{grid-template-columns:110px 1fr auto;align-items:center;gap:10px;display:grid}.row-pricing{grid-template-columns:80px 1fr 1fr auto}.row-discount{grid-template-columns:90px 1.3fr 1fr auto}.row-fee{grid-template-columns:80px 1.6fr 1fr auto}label{color:#334155;font-weight:700}input,select{color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:10px;width:100%;padding:9px 10px;font-size:.95rem;transition:border-color .2s,box-shadow .2s}input[type=file]{background:#f8fafc;padding:8px}input[type=color]{cursor:pointer;height:42px;padding:4px}input:focus,select:focus{border-color:#6366f1;outline:none;box-shadow:0 0 0 3px #6366f133}button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#2563eb,#4f46e5);border:1px solid #0000;border-radius:10px;padding:9px 13px;font-weight:700;transition:transform .16s,filter .16s,box-shadow .16s;box-shadow:0 10px 20px #4f46e542}button:hover{filter:brightness(1.04);transform:translateY(-1px)}button:active{transform:translateY(0)}button:disabled{opacity:.6;cursor:not-allowed}.ghost{color:#1e1b4b;box-shadow:none;background:#eef2ff;border-color:#c7d2fe}.ghost:hover{background:#e0e7ff}.result-list{gap:8px;margin-bottom:4px;display:grid}.result-row{color:#334155;border-bottom:1px dashed #d6dce7;justify-content:space-between;gap:14px;padding:7px 0;display:flex}.result-row strong{color:#0f172a}.total{border-top:2px solid #94a3b8;border-bottom:none;margin-top:10px;padding-top:12px;font-size:1.08rem}.error,.success{margin:10px 0 0;font-weight:600}.error{color:#b91c1c}.success{color:#047857}.row-actions{flex-wrap:wrap;gap:8px;display:flex}.stacked-area{gap:7px;margin-bottom:12px;display:grid}.section-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.section-head h2{margin:0}.template-form{grid-template-columns:1.1fr 1fr auto;gap:8px;margin-bottom:12px;display:grid}.inline-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.invoice-actions{margin-top:12px}.attachment-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:12px;display:grid}.attachment-card{background:#f8fafc;border:1px solid #dbe3f1;border-radius:12px;overflow:hidden}.attachment-card img{object-fit:cover;width:100%;height:120px;display:block}.attachment-footer{gap:8px;padding:8px;display:grid}.attachment-footer span{color:#334155;word-break:break-word;font-size:.82rem}.danger-ghost{color:#991b1b;background:#fef2f2;border-color:#fecaca}.danger-ghost:hover{background:#fee2e2}.invoice-preview{color:#1e3a8a;background:#dbeafe73;border:1px dashed #93c5fd;border-radius:12px;gap:4px;margin-top:12px;padding:12px;display:grid}.share-link-box{background:#eff6ffb8;border:1px dashed #93c5fd;border-radius:12px;gap:5px;margin-top:10px;padding:10px 12px;display:grid}.share-link-box a{color:#1d4ed8;word-break:break-all;text-decoration:none}.share-link-box a:hover{text-decoration:underline}.invoice-template-preview{background:#fff;border:1px solid #d8e1ef;border-radius:14px;margin-top:12px;overflow:hidden}.preview-header{background:var(--preview-header-bg);color:var(--preview-header-text);justify-content:space-between;gap:12px;padding:12px 14px;display:flex}.preview-meta{color:#475569;border-bottom:1px solid #e2e8f0;justify-content:space-between;gap:10px;padding:8px 14px;font-size:.85rem;display:flex}.preview-table-header{color:#fff;background:var(--preview-table-header-bg);grid-template-columns:.9fr 1.4fr .8fr;gap:8px;padding:8px 14px;font-size:.82rem;font-weight:700;display:grid}.preview-table-body{display:grid}.preview-row{color:#334155;border-bottom:1px dashed #d9e2ef;grid-template-columns:.9fr 1.4fr .8fr;gap:8px;padding:8px 14px;font-size:.86rem;display:grid}.preview-row span:last-child{text-align:right}.preview-summary{background:var(--preview-summary-bg);color:#334155;border:1px solid #cbd5e1;border-radius:10px;gap:5px;margin:12px;padding:10px 12px;display:grid}.history-list{gap:10px;display:grid}.history-row{background:#f8fafce6;border:1px solid #d8e1ef;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:10px;display:flex}.history-row.active{background:#eff6ffe6;border-color:#60a5fa;box-shadow:inset 0 0 0 1px #60a5fa}.history-meta{color:#475569;margin:2px 0;font-size:.84rem}@media (width<=700px){.hero{padding:18px}.row,.row-pricing,.row-discount{grid-template-columns:1fr}.row-actions{width:100%}.top-nav{grid-template-columns:1fr;display:grid}.inline-grid,.template-form{grid-template-columns:1fr}.history-row{flex-direction:column;align-items:stretch}.preview-meta{flex-direction:column}.preview-table-header,.preview-row{grid-template-columns:1fr}.preview-row span:last-child{text-align:left}button{width:100%}}