.hantera { display: grid; gap: 1.25rem; padding-top: 2rem; padding-bottom: 5rem; max-width: 56rem; }
.ruta { display: grid; gap: 1.25rem; justify-items: start; padding: 2rem; border-radius: 24px; background: var(--vit); }
.knapprad { display: flex; flex-wrap: wrap; gap: .6rem; }

.dela { display: grid; gap: 1rem; padding: 2rem; border-radius: 24px; background: var(--blaeck); color: var(--papper); }
.dela .etikett { color: rgba(240, 235, 226, .7); }
.dela-lank a { font-size: clamp(1.1rem, 3.5vw, 1.6rem); letter-spacing: -.02em; color: var(--papper); word-break: break-all; text-underline-offset: 4px; }
.dela .knapp-kontur { color: var(--papper); box-shadow: inset 0 0 0 1px rgba(240, 235, 226, .35); }
.dela .knapp-kontur:hover { background: rgba(240, 235, 226, .08); }
.dela .knapp:not(.knapp-rod):not(.knapp-kontur) { background: var(--papper); color: var(--blaeck); }
.dela .meddelande.ok { color: #9fd3ad; }

.summa { display: grid; gap: 1.5rem; padding: 2rem; border: 1px dashed rgba(33, 12, 2, .3); border-radius: 24px; background: var(--vit); }
@media (min-width: 700px) { .summa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: end; } }
.kvitto-etikett { font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--etikett); }
.summa-siffra { margin-top: .5rem; font-size: clamp(3.5rem, 12vw, 5.5rem); line-height: 1; letter-spacing: -.03em; }
.summa-rader { margin: 0; display: grid; gap: .55rem; }
.summa-rader div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px dashed rgba(33, 12, 2, .2); }
.summa-rader dt { color: var(--dampad); }
.summa-rader dd { margin: 0; }

.svar-yta, .farozon { display: grid; gap: 1rem; padding: 2rem; border-radius: 24px; background: var(--vit); }
.svar-topp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.svar-knappar { display: flex; flex-wrap: wrap; gap: .5rem; }
.tomt { color: var(--dampad); }

/* Mina inbjudningar */
.konto-topp { display: grid; gap: .5rem; padding: .5rem 0 .25rem; }
.konto-topp .textknapp { margin-left: .25rem; }
.kontolista { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 760px) { .kontolista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kontokort { display: grid; gap: .5rem; align-content: start; padding: 1.4rem 1.5rem; border-radius: 20px; background: var(--vit); }
.kontokort-topp { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.kontokort-namn { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.kontokort-status { flex: none; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 9999px; }
.kontokort-status.upplast { background: #e4efe7; color: #1f5133; }
.kontokort-status.utkast { background: var(--papper); color: var(--dampad); }
.kontokort-info { color: var(--dampad); font-size: .92rem; }
.kontokort-lank { font-size: .9rem; color: var(--blaeck); word-break: break-all; }
.kontokort .knapprad { margin-top: .4rem; }
.konto .farozon { margin-top: 1rem; }
.avisering { padding: .35rem .9rem; border-radius: 16px; background: var(--papper); }
.avisering .kryss { color: var(--blaeck); }
.avisering small { display: block; font-size: .8rem; color: var(--dampad); word-break: break-all; }
.avisering .meddelande:empty { display: none; }
.svarlista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.svar { display: grid; gap: .4rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--papper); border-left: 4px solid var(--gron); }
.svar-nej { border-left-color: var(--etikett); }
.svar-rad { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
.svar-namn { font-weight: 600; }
.svar-status { color: var(--dampad); }
.svar-detalj { font-size: .92rem; }
.svar-meddelande { font-style: italic; color: var(--dampad); }
.svar-fot { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--etikett); }
.hjalp { font-size: .85rem; color: var(--dampad); }
.skicka { display: grid; gap: .6rem; margin-top: .75rem; padding-top: 1.25rem; border-top: 1px solid rgba(240, 235, 226, .14); }
.skicka-rubrik { font-weight: 600; font-size: .85rem; letter-spacing: .04em; color: rgba(240, 235, 226, .8); }
.dela .knapp-liten { background: var(--papper); color: var(--blaeck); }
.dela .knapp-liten.knapp-kontur { background: transparent; color: var(--papper); box-shadow: inset 0 0 0 1px rgba(240, 235, 226, .35); }