/* v3: icons, single-button nav, creative dashboard, settings widgets */
.ico { vertical-align: -3px; flex: none; }
.btn .ico, .pill .ico { vertical-align: -3px; margin-right: 2px; }

/* sidebar */
.sidebar summary { display: flex; align-items: center; gap: 10px; }
.sidebar summary::first-letter { opacity: 1; } .sidebar summary span { margin: 0; }
.sidebar a.single { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 4px; border-radius: 10px; color: #fff; font-weight: 500; opacity: .92; animation: slideIn .5s ease both; animation-delay: calc(var(--i) * 60ms); transition: background .2s, transform .2s; }
.sidebar a.single:hover { background: rgba(255, 255, 255, .1); transform: translateX(3px); color: #fff; }
.sidebar a.single.on { background: var(--blue); box-shadow: 0 4px 14px rgba(var(--blue-rgb), .5); opacity: 1; }
.brand.custom { background: #fff; border-radius: 14px; padding: 10px 12px; margin-bottom: 14px; }
.brand.custom img { max-height: 54px; width: auto; max-width: 100%; display: block; margin: 0 auto; }
button.ghost .ico { display: block; } .burger .ico { display: block; }

/* product suggestions must sit above the following lines (fix) */
.line { animation-fill-mode: backwards; position: relative; }
.line:focus-within { z-index: 60; }
.doc .card { overflow: visible; }
.sugg { z-index: 70; }

/* list helpers */
.tb { margin: 0; } .toolbar .btns { margin-top: 0; }
.pill { display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer; background: var(--sky); color: var(--deep); font: inherit; font-size: .82rem; font-weight: 500; padding: 4px 11px; border-radius: 999px; transition: all .2s; }
.pill:hover { background: var(--blue); color: #fff; transform: translateY(-1px); } .pill.ok { background: #e0f5ec; color: #11694a; } .pill.ok:hover { background: var(--ok); color: #fff; }
td.actions { align-items: center; }

/* dashboard */
.hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding: 24px 28px; border-radius: 20px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--deep), var(--blue) 70%, var(--blue-light)); box-shadow: 0 14px 34px rgba(var(--deep-rgb), .28); animation: fadeUp .5s ease both; }
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .09); animation: float 9s ease-in-out infinite; }
.hero::before { width: 220px; height: 220px; right: -50px; top: -90px; } .hero::after { width: 120px; height: 120px; right: 28%; bottom: -60px; animation-delay: -4s; }
.hero small { opacity: .8; } .hero h2 { margin: 2px 0 0; font-size: 1.7rem; }
.quick { display: flex; gap: 10px; position: relative; z-index: 1; flex-wrap: wrap; }
.quick a { background: rgba(255, 255, 255, .18); color: #fff; padding: 9px 16px; border-radius: 999px; backdrop-filter: blur(4px); transition: all .2s; display: inline-flex; gap: 6px; align-items: center; }
.quick a:hover { background: #fff; color: var(--deep); transform: translateY(-2px); }
.kpi { padding-top: 20px; }
.kico { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; z-index: 1; transition: transform .3s; }
.kpi:hover .kico { transform: rotate(-10deg) scale(1.12); }
.kpi.c1 .kico { background: var(--blue-soft); color: var(--blue); } .kpi.c2 .kico { background: #dff5ec; color: var(--ok); }
.kpi.c3 .kico { background: #fff1d3; color: var(--warn); } .kpi.c4 .kico { background: #fbe3e3; color: var(--bad); }
.kpi.c1 { border-top: 3px solid var(--blue); } .kpi.c2 { border-top: 3px solid var(--ok); } .kpi.c3 { border-top: 3px solid var(--warn); } .kpi.c4 { border-top: 3px solid var(--bad); }
.kpi .spark { display: block; margin-top: 8px; color: var(--blue); } .kpi.c2 .spark { color: var(--ok); }
.spark polyline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s ease .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.grid.dash { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 18px; align-items: stretch; }
.grid.dash .span2 { grid-column: span 2; } .grid.dash .card { margin: 0; }
.grid.dash3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 18px; } .grid.dash3 .card { margin: 0; }
.card h3 { display: flex; align-items: center; gap: 8px; } .card h3::before { content: ''; width: 4px; height: 16px; border-radius: 4px; background: linear-gradient(var(--blue), var(--deep)); }
@media (max-width: 700px) { .grid.dash .span2 { grid-column: auto; } }

/* import */
textarea.mono, .code { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.code { background: #0f2536; color: #cfe8fb; border-radius: 12px; padding: 14px 16px; overflow: auto; margin: 0 0 12px; }
.errs { max-height: 220px; overflow: auto; padding-left: 18px; color: #912a2a; font-size: .9rem; }

/* settings */
.logobox { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.logoprev { width: 160px; height: 90px; border: 2px dashed var(--line); border-radius: 14px; display: grid; place-items: center; padding: 8px; background: repeating-conic-gradient(#f3f6f9 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.logoprev img { max-width: 100%; max-height: 100%; }
.drop { display: flex !important; align-items: center; gap: 10px; border: 2px dashed var(--blue); border-radius: 12px; padding: 12px 16px; cursor: pointer; color: var(--blue) !important; transition: background .2s; position: relative; }
.drop:hover { background: var(--sky); } .drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }
.check { display: flex !important; gap: 8px; align-items: center; margin-top: 8px; font-weight: 400 !important; } .check input { width: auto; margin: 0; }
.switch { display: flex !important; align-items: center; gap: 14px; margin: 6px 0 16px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i { width: 46px; height: 26px; border-radius: 999px; background: #c9d6e0; position: relative; flex: none; transition: background .25s; }
.switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.switch input:checked + i { background: var(--blue); } .switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { box-shadow: 0 0 0 4px rgba(var(--blue-rgb), .2); }
.switch small { display: block; color: var(--muted); font-weight: 400; }
.lh { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; border: 1.5px solid var(--line); margin-bottom: 10px; transition: all .2s; }
.lh.main { border-color: var(--blue); background: var(--sky); } .lh img { width: 56px; height: 74px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.lh .actions { display: flex; gap: 8px; align-items: center; } .lh .actions form { margin: 0; }
.addlh { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); display: grid; gap: 12px; } .addlh .f { margin: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }