.app-shell{background:radial-gradient(circle at 0 0,#0b1120 0,#111827 30%,#020617 70%);justify-content:center;min-height:100vh;padding:.75rem;display:flex}.app-shell>*{flex:1}.app-shell .app-inner{display:flex}.app-header{z-index:20;width:100%;max-width:var(--app-max-width);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-soft);background:linear-gradient(90deg,#0f172af5,#0f172af0);border-radius:1rem;margin-top:.35rem;padding:.5rem .85rem;position:fixed;top:0;left:50%;transform:translate(-50%)}.app-header-left{align-items:center;gap:.75rem;display:flex}.app-header-logo{background:radial-gradient(circle at 30% 30%,#fbbf24 0,#f59e0b 40%,#92400e 100%);border-radius:.75rem;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;display:flex;overflow:hidden;box-shadow:0 8px 18px #00000059}.app-header-logo-img{object-fit:cover;width:100%;height:100%}.app-header-text{flex-direction:column;gap:.15rem;display:flex}.app-title{letter-spacing:.03em;text-transform:uppercase;color:#e5e7eb;font-size:.98rem;font-weight:600}.app-subtitle{color:#9ca3af;font-size:.78rem}.app-main{margin:calc(var(--header-height) + .75rem)auto calc(var(--bottom-nav-height) + .75rem)auto;width:100%;max-width:var(--app-max-width);padding:.85rem}.page{background-color:var(--color-bg);border-radius:var(--radius-lg);padding:.75rem;box-shadow:0 0 0 1px #0f172a08}@media (min-width:768px){.page{padding:1.2rem 1.4rem 1.4rem}}.page-title{letter-spacing:.01em;color:#111827;margin:0 0 .75rem;font-size:1.25rem;font-weight:600}.page-header-with-brand{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.page-brand-chip{color:#e5e7eb;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;background:linear-gradient(90deg,#0f172af5,#1f2937e6);border:1px solid #f9fafb0f;border-radius:999px;padding:.35rem .6rem;font-size:.72rem}.section-title{color:#4b5563;margin:1.4rem 0 .75rem;font-size:.9rem;font-weight:600}.cards-grid{grid-template-columns:1fr;gap:.75rem;display:grid}.card{background-color:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-subtle);border:1px solid #0f172a0a;padding:.85rem .9rem}.card-title{text-transform:uppercase;letter-spacing:.09em;color:var(--color-text-muted);margin-bottom:.35rem;font-size:.8rem}.card-value{color:var(--color-text);margin-bottom:.25rem;font-size:1.15rem;font-weight:600}.card-sub{color:var(--color-text-muted);font-size:.78rem}.card--good{background:linear-gradient(to bottom right,var(--color-positive-soft),#fff);border-color:#16a34a47}.card--bad{background:linear-gradient(to bottom right,var(--color-negative-soft),#fff);border-color:#dc262652}@media (min-width:640px){.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.list{flex-direction:column;gap:.5rem;display:flex}.list-item{border-radius:var(--radius-md);background-color:var(--color-surface);box-shadow:var(--shadow-subtle);border:1px solid #0f172a0a;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:.7rem .8rem;display:flex}.list-item-main{flex:1;min-width:0}.list-item-title{color:var(--color-text);margin-bottom:.15rem;font-size:.9rem;font-weight:500}.list-item-sub{color:var(--color-text-muted);font-size:.78rem;line-height:1.3}.list-item-right{flex-direction:column;align-items:flex-end;gap:.25rem;font-size:.78rem;display:flex}.badge{color:#374151;background-color:#e5e7eb;border-radius:999px;align-items:center;padding:.15rem .5rem;font-size:.72rem;font-weight:500;display:inline-flex}.form{margin-bottom:1.25rem}.form-group{flex-direction:column;gap:.3rem;margin-bottom:.7rem;display:flex}.form-group label{color:#374151;font-size:.8rem;font-weight:500}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{border-radius:var(--radius-sm);border:1px solid var(--color-border);width:100%;color:var(--color-text);background-color:#f9fafb;outline:none;padding:.45rem .6rem;font-size:.82rem;transition:border-color .12s,box-shadow .12s,background-color .12s}input:focus,select:focus,textarea:focus{border-color:var(--color-brand-accent);background-color:#fff;box-shadow:0 0 0 1px #f59e0b80}textarea{resize:vertical}.form-item-row{grid-template-columns:minmax(0,2.5fr) .9fr 1.1fr auto;gap:.45rem;margin-bottom:.45rem;display:grid}@media (max-width:640px){.form-item-row{grid-template-columns:minmax(0,2fr) 1fr 1.2fr auto}}.form-total{text-align:right;margin-top:.4rem;font-size:.85rem;font-weight:500}button{font-family:inherit}.btn-primary,.btn-secondary,.btn-small{cursor:pointer;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:.25rem;padding:.45rem .85rem;font-size:.8rem;font-weight:500;transition:transform 80ms,box-shadow .1s,background-color .1s,border-color .1s;display:inline-flex}.btn-primary{background:linear-gradient(to right,var(--color-brand-accent),#fcd34d);color:#1f2933;box-shadow:0 8px 18px #f59e0b66}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 20px #f59e0b80}.btn-secondary{color:#e5e7eb;background-color:#111827;border-color:#f9fafb1f}.btn-secondary:hover{background-color:#020617;transform:translateY(-1px);box-shadow:0 6px 14px #0f172a99}.btn-small{color:#111827;background-color:#e5e7eb;padding:.1rem .45rem;font-size:.75rem}.btn-small:hover{background-color:#d1d5db}.bottom-nav{z-index:20;width:100%;max-width:var(--app-max-width);background:#0f172afa;border-radius:.9rem;gap:.15rem;padding:.25rem .35rem;display:flex;position:fixed;bottom:.35rem;left:50%;overflow-x:auto;transform:translate(-50%);box-shadow:0 10px 28px #0000008c}.bottom-nav__link{color:#9ca3af;border-radius:999px;flex:auto;justify-content:center;align-items:center;min-width:72px;padding:.35rem;font-size:.72rem;text-decoration:none;transition:background-color .12s,color .12s;display:flex;position:relative}.bottom-nav__link--active{color:#f9fafb;background:linear-gradient(90deg,#0f172a,#1e40afe6)}.bottom-nav__label{white-space:nowrap}.bottom-nav::-webkit-scrollbar{height:4px}.bottom-nav::-webkit-scrollbar-track{background:0 0}.bottom-nav::-webkit-scrollbar-thumb{background:#94a3b8cc;border-radius:999px}@media (min-width:1024px){.app-main{margin-top:calc(var(--header-height) + 1.2rem);margin-bottom:calc(var(--bottom-nav-height) + 1.2rem)}.bottom-nav{max-width:720px}}.design-intro{color:var(--color-text-muted);margin:0 0 .85rem;font-size:.85rem}.design-layout{flex-direction:column;gap:.9rem;display:flex}@media (min-width:768px){.design-layout{flex-direction:row;align-items:flex-start}}.design-front-wrapper{min-width:0;box-shadow:var(--shadow-subtle);background:radial-gradient(circle at top,#e5e7eb 0,#d1d5db 40%,#9ca3af 100%);border-radius:1.1rem;flex:1.4;margin:0 auto;padding:.6rem}.design-front{background-color:#f9fafb;border:1px solid #94a3b880;border-radius:.95rem;width:100%;overflow:hidden;box-shadow:0 10px 20px #0f172a1f}.design-front-grid{width:100%;height:260px;min-height:200px;max-height:40vh;display:grid}@media (max-width:480px){.design-front-grid{height:220px}}.design-front-cell{cursor:pointer;background:linear-gradient(#f9fafb,#e5e7eb);border:1px solid #94a3b866;flex-direction:column;justify-content:center;align-items:center;gap:.2rem;padding:.2rem .3rem;transition:background .12s,transform 80ms,box-shadow .12s,border-color .12s,color .12s;display:flex}.design-front-cell-index{text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);font-size:.65rem}.design-front-cell-size{color:var(--color-text);font-size:.78rem;font-weight:500}.design-front-cell-type{color:var(--color-text-muted);font-size:.72rem}.design-front-cell--active{background:linear-gradient(#0f172afa,#1e40afe6);border-color:#0f172ae6;transform:translateY(-1px);box-shadow:0 10px 24px #0f172a8c}.design-front-cell--active .design-front-cell-index,.design-front-cell--active .design-front-cell-size,.design-front-cell--active .design-front-cell-type{color:#e5e7eb}.design-front-cell--note:not(.design-front-cell--active){box-shadow:inset 0 0 0 1px #f59e0bb3}.design-front-caption{color:var(--color-text-muted);text-align:center;margin-top:.4rem;font-size:.78rem}.design-sidebar{background-color:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-subtle);border:1px solid #0f172a0d;flex:1;padding:.8rem .9rem}@media (min-width:768px){.design-sidebar{max-width:280px}}.design-field{margin-bottom:.6rem}.design-field-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.2rem;font-size:.78rem}.design-field-value{font-size:.9rem;font-weight:500}.design-hint{color:var(--color-text-muted);margin:0 0 .8rem;font-size:.8rem}.design-notes-list{flex-direction:column;gap:.45rem;margin:.6rem 0 0;padding:0;list-style:none;display:flex}.design-notes-item{border:1px solid var(--color-border);background-color:#f9fafb;border-radius:.6rem;padding:.4rem .55rem}.design-notes-header{margin-bottom:.2rem;font-size:.78rem;font-weight:500}.design-notes-text{color:var(--color-text-muted);font-size:.78rem}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}:root{--color-bg:#f3f4f6;--color-surface:#fff;--color-border:#e5e7eb;--color-text:#111827;--color-text-muted:#6b7280;--color-brand:#0f172a;--color-brand-soft:#1f2937;--color-brand-accent:#f59e0b;--color-brand-accent-soft:#f59e0b1f;--color-positive:#16a34a;--color-positive-soft:#16a34a1f;--color-negative:#dc2626;--color-negative-soft:#dc26261a;--radius-sm:.4rem;--radius-md:.9rem;--radius-lg:1.25rem;--shadow-soft:0 8px 20px #0f172a14;--shadow-subtle:0 1px 3px #0f172a14;--app-max-width:1120px;--header-height:72px;--bottom-nav-height:64px}body{color:var(--color-text);-webkit-font-smoothing:antialiased;background-color:#020617;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}a:hover{text-decoration:none}button,input,textarea,select{font-family:inherit}