@font-face {
     font-family: 'F37Beckett';
     src: url('https://oslophil.b-cdn.net/F37Beckett-Regular.woff2') format('woff2'),
         url('https://oslophil.b-cdn.net/F37Beckett-Regular.woff') format('woff');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'F37Beckett';
     src: url('https://oslophil.b-cdn.net/F37Beckett-Demi.woff2') format('woff2'),
         url('https://oslophil.b-cdn.net/F37Beckett-Demi.woff') format('woff');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'F37Beckett';
     src: url('https://oslophil.b-cdn.net/F37Beckett-Bold.woff2') format('woff2'),
         url('https://oslophil.b-cdn.net/F37Beckett-Bold.woff') format('woff');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 :root {
     --clr-neutral-800: #28252A;
     --clr-primary-800: #06433E;
     --clr-primary-700: #FF514A;
     --clr-primary-600: #91AB9E;
     --grey: #6D7784;
     --grey-light: #B9BFC7;
     --clr-neutral-200: #FFFFFF;
     --border: rgba(255, 255, 255, 0.10);
 }

 body {
     background: var(--clr-neutral-800);
     color: var(--clr-neutral-200);
     font-family: 'F37Beckett', Georgia, sans-serif;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
 }

 .logo {
     width: 15rem;
     height: auto;
     display: block;
     margin-bottom: 1.5rem;
 }

 .logo .cls-1 {
     fill: var(--clr-neutral-200);
 }

 .tool-label {
     font-size: 0.72rem;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--grey-light);
 }

 main {
     flex: 1;
     max-width: 660px;
     margin: 0 auto;
     width: 100%;
     padding: 4.5rem 1.5rem 3rem;
 }

 h1 {
     font-size: clamp(2.2rem, 6vw, 3.6rem);
     font-weight: 700;
     letter-spacing: -0.025em;
     line-height: 1.06;
     margin-bottom: 0.6rem;
 }

 .sub {
     color: var(--clr-primary-600);
     font-size: 0.95rem;
     margin-bottom: 2.75rem;
 }

 /* ─── Drop Zone ─── */
 .drop-zone {
     position: relative;
     border: 1.5px dashed rgba(255, 255, 255, 0.15);
     border-radius: 6px;
     padding: 2.5rem 1.5rem;
     text-align: center;
     cursor: pointer;
     transition: border-color 0.2s, background-color 0.2s;
     margin-bottom: 1.25rem;
 }

 .drop-zone input[type=file] {
     position: absolute;
     inset: 0;
     opacity: 0;
     width: 100%;
     height: 100%;
     cursor: pointer;
 }

 .drop-zone:hover,
 .drop-zone.over {
     border-color: var(--clr-primary-700);
     border-style: solid;
     background-color: rgba(255, 81, 74, 0.04);
 }

 .dz-icon {
     margin: 0 auto 1rem;
     display: block;
     opacity: 0.3;
 }

 .dz-text {
     font-size: 0.9rem;
     margin-bottom: 0.3rem;
 }

 .dz-sub {
     font-size: 0.78rem;
     color: var(--grey);
 }

 /* ─── File List ─── */
 .file-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     margin-bottom: 1.5rem;
 }

 .file-item {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.875rem 1rem;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid var(--border);
     border-radius: 6px;
     min-height: 56px;
     cursor: grab;
 }

 .file-item:active  { cursor: grabbing; }
 .file-item:hover   { background: rgba(255, 255, 255, 0.07); }
 .file-item.dragging { opacity: 0.2; }
 .file-item.over-top    { border-top: 2px solid var(--clr-primary-700); }
 .file-item.over-bottom { border-bottom: 2px solid var(--clr-primary-700); }

 .fi-grip {
     color: var(--grey);
     font-size: 1.1rem;
     opacity: 0.5;
     flex-shrink: 0;
     cursor: grab;
     padding: 0 0.1rem;
 }

 .fi-num {
     font-size: 0.75rem;
     color: var(--grey);
     font-weight: 600;
     min-width: 18px;
     text-align: right;
     flex-shrink: 0;
 }

 .fi-info {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 0.15rem;
     min-width: 0;
 }

 .fi-name {
     font-size: 0.9rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .fi-size {
     font-size: 0.75rem;
     color: var(--grey);
 }

 .fi-reorder {
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
 }

 .fi-btn {
     background: none;
     border: none;
     color: var(--grey);
     cursor: pointer;
     font-size: 1rem;
     line-height: 1;
     padding: 0.3rem 0.6rem;
     border-radius: 3px;
     transition: color 0.12s, background 0.12s;
     font-family: inherit;
     min-width: 36px;
     min-height: 26px;
 }

 .fi-btn:hover:not(:disabled) {
     color: var(--clr-neutral-200);
     background: rgba(255, 255, 255, 0.08);
 }

 .fi-btn:disabled {
     opacity: 0.2;
     cursor: default;
 }

 .fi-del {
     background: none;
     border: none;
     color: var(--grey);
     cursor: pointer;
     font-size: 1.3rem;
     line-height: 1;
     padding: 0.4rem 0.5rem;
     border-radius: 4px;
     transition: color 0.12s;
     font-family: inherit;
     flex-shrink: 0;
     min-width: 40px;
     min-height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .fi-del:hover {
     color: var(--clr-primary-700);
 }

 /* ─── Actions ─── */
 .actions {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     flex-wrap: wrap;
 }

 .btn {
     font-family: 'F37Beckett', Georgia, serif;
     font-size: 1rem;
     font-weight: 600;
     letter-spacing: 0.04em;
     padding: 0.95rem 2rem;
     border-radius: 100vw;
     border: 2px solid transparent;
     cursor: pointer;
     transition: background 0.18s, border-color 0.18s, transform 0.12s;
     line-height: 1;
 }

 .btn-red {
     background: var(--clr-primary-700);
     color: var(--clr-neutral-200);
     border-color: var(--clr-primary-700);
 }

 .btn-red:hover:not(:disabled) {
     background: #ff6560;
     border-color: #ff6560;
     transform: translateY(-1px);
 }

 .btn-red:active:not(:disabled) {
     transform: translateY(0);
 }

 .btn-red:disabled {
     opacity: 0.22;
     cursor: not-allowed;
 }

 .btn-outline {
     background: transparent;
     color: var(--clr-neutral-200);
     border-color: rgba(255, 255, 255, 0.35);
 }

 .btn-outline:hover {
     border-color: rgba(255, 255, 255, 0.65);
 }

 #status {
     font-size: 0.8rem;
     color: var(--clr-primary-600);
 }

 #status.err {
     color: var(--clr-primary-700);
 }

 /* ─── Desktop: drag tilgjengelig, skjul opp/ned-knapper ─── */
 @media (pointer: fine) {
     .fi-reorder { display: none; }
 }

 /* ─── Touch: skjul drag-håndtak ─── */
 @media (pointer: coarse) {
     .fi-grip   { display: none; }
     .file-item { cursor: default; }
 }