/* v2: floating-label forms, typeahead, chips, avatars */
.f { position: relative; margin: 0 0 14px; }
.fields .f { margin: 0; }
.f > input, .f > select, .f > textarea { padding: 20px 14px 7px; margin: 0; border-radius: 12px; background: #fbfdff; }
.f > textarea { padding-top: 22px; resize: vertical; }
.f > label { position: absolute; left: 15px; top: 14px; margin: 0; font-size: 1rem; font-weight: 400; color: var(--muted); pointer-events: none; transition: all .18s ease; }
.f > input:focus ~ label, .f > input:not(:placeholder-shown) ~ label, .f > textarea:focus ~ label, .f > textarea:not(:placeholder-shown) ~ label,
.f.sel > label, .f > input[type=date] ~ label { top: 5px; font-size: .72rem; color: var(--blue); font-weight: 500; }
.f.sel > select { appearance: none; background: #fbfdff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23157abe' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; }
.form h3 { margin-bottom: 14px; }
.login-card .f > input { background: #fff; }

/* document builder */
.doc .card { margin-bottom: 14px; }
.head { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; } .head .f { margin: 0; }
.line { display: grid; grid-template-columns: minmax(200px, 3fr) .8fr 1fr .7fr .7fr 1fr 32px; gap: 10px; align-items: center; margin-bottom: 10px; animation: fadeUp .3s ease both; }
.line .f { margin: 0; } .line .num { text-align: right; }
.lt { text-align: right; font-weight: 700; color: var(--deep); white-space: nowrap; }
.x { border: 0; background: #fbe6e6; color: var(--bad); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; transition: transform .2s; } .x:hover { transform: rotate(90deg) scale(1.1); }
.sugg { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border-radius: 12px; box-shadow: 0 14px 34px rgba(var(--deep-rgb), .22); display: none; max-height: 260px; overflow-y: auto; }
.sugg.open { display: block; animation: fadeUp .18s ease both; }
.sugg a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; color: var(--ink); cursor: pointer; }
.sugg a.on, .sugg a:hover { background: var(--sky); color: var(--deep); } .sugg a em { font-style: normal; color: var(--muted); } .sugg mark { background: var(--blue-soft); color: var(--deep); border-radius: 3px; }
.sugg .none { padding: 10px 14px; color: var(--muted); }
.foot2 { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; } .grow { flex: 1; min-width: 220px; margin: 0; }
.grandbox { background: linear-gradient(135deg, var(--deep), var(--blue)); color: #fff; border-radius: 14px; padding: 12px 22px; text-align: right; min-width: 200px; }
.grandbox span, .grandbox small { display: block; opacity: .8; font-size: .8rem; } .grandbox strong { font-size: 1.7rem; }

/* lists */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--deep); box-shadow: 0 2px 8px rgba(var(--deep-rgb), .06); transition: all .2s; }
.chip b { margin-left: 4px; background: var(--sky); border-radius: 999px; padding: 0 8px; font-size: .8rem; }
.chip:hover { transform: translateY(-2px); } .chip.on { background: var(--blue); color: #fff; } .chip.on b { background: rgba(255, 255, 255, .25); color: #fff; }
.who { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.av { width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center; font-style: normal; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--blue), var(--deep)); flex: none; transition: transform .2s; }
tr:hover .av { transform: rotate(-8deg) scale(1.08); }
.search input { width: 260px; border-radius: 999px; padding: 9px 18px; }
td.actions a, td.actions button { font-size: 1.05rem; padding: 4px 6px; border-radius: 8px; } td.actions a:hover, td.actions button:hover { background: var(--sky); }
@media (max-width: 860px) { .head { grid-template-columns: 1fr; } .line { grid-template-columns: 1fr 1fr 1fr; } .line .item { grid-column: 1 / -1; } .line .lt { grid-column: span 2; text-align: left; } }