/* PicPad V0.1.0: shared design tokens and responsive, keyboard-accessible layout. */
:root{--navy:#062e52;--muted:#566a79;--cyan:#007e91;--bright:#00b8ca;--line:#dce5e8;--paper:#f6f8fa;--white:#fff;--radius:16px;--shadow:0 12px 35px #16344909;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--navy);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button,a,input{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--cyan)}button{transition:background .15s,box-shadow .15s}button:not(:disabled):hover{box-shadow:0 3px 10px #062e5215}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.skip{position:fixed;top:-80px;left:20px;z-index:20;background:white;padding:15px}.skip:focus{top:10px}.header{position:sticky;top:0;z-index:10;background:#fffffff5;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.header-inner{max-width:1400px;margin:auto;min-height:88px;display:flex;align-items:center;justify-content:space-between;padding:12px 40px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}.brand img{object-fit:contain;border-radius:10px}.brand strong{font-size:29px;letter-spacing:-1.3px;line-height:1.1}.brand-dot{color:var(--cyan)}.brand small{display:block;font-size:11px;font-weight:500;letter-spacing:.35px;margin-top:5px;color:var(--muted)}.header-meta{display:flex;align-items:center;gap:12px;font-size:12px}.version{font-variant-numeric:tabular-nums;color:var(--muted)}.concept-tag,.sample-label{font-size:11px;letter-spacing:.4px;font-weight:600;padding:6px 10px;border:1px solid #cbdde2;border-radius:5px;background:#f1f8f9}.shell{max-width:1400px;margin:auto;padding:24px 40px 0}.prototype-note{display:flex;align-items:center;gap:10px;color:#42606d;font-size:12px}.prototype-note p{margin:0;flex:1;line-height:1.6}.note-dot{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--cyan)}.text-button{border:0;background:transparent;color:var(--cyan);padding:8px 2px;font-size:12px;font-weight:600;min-height:36px;text-decoration:underline;text-underline-offset:3px}.intro{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:49px 0 43px}.eyebrow,.step-label{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--muted);margin:0 0 13px}.eyebrow{color:var(--cyan)}h1{font-size:clamp(28px,3vw,43px);line-height:1.19;letter-spacing:-1.5px;margin:0;font-weight:650}h1 span{color:#637584;font-weight:450}.lead{color:var(--muted);line-height:1.6;font-size:14px;margin:18px 0 0}.intro-aside{display:flex;align-items:center;gap:22px;border-left:1px solid var(--line);padding-left:38px;flex-shrink:0}.big-number{font-size:78px;font-weight:350;color:#b8dadd;letter-spacing:-5px;line-height:1}.intro-aside strong{font-size:12px}.intro-aside p{font-size:12px;color:var(--muted);line-height:1.6;margin:8px 0 0}.view-tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:28px}.view-tabs button{border:0;background:transparent;padding:15px 0;color:var(--muted);font-size:13px;border-bottom:3px solid transparent}.view-tabs button[aria-selected=true]{color:var(--navy);border-bottom-color:var(--cyan);font-weight:700}.workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:30px}.connect-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:25px;height:fit-content;box-shadow:var(--shadow)}h2{font-size:23px;letter-spacing:-.7px;font-weight:650;margin:10px 0 12px}.connect-card p{font-size:13px;color:var(--muted);line-height:1.65}.device-symbol{margin:30px 0 22px;width:54px;height:65px;border:2px solid #9cced4;border-radius:13px;display:grid;place-items:center;font-size:38px;color:var(--cyan);background:#effafb;transform:rotate(-7deg)}.primary,.secondary{min-height:43px;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:12px;font-weight:650;border-radius:8px;line-height:1.4}.primary{background:var(--navy);border:1px solid var(--navy);color:white}.primary:not(:disabled):hover{background:#10446f}.secondary{background:white;color:var(--navy);border:1px solid #cbd8df}.secondary:not(:disabled):hover{background:#edf5f7}.connect-card .primary{width:100%;margin-top:10px}.connection-state{font-size:10px;line-height:1.5;color:var(--muted);margin-top:12px;display:flex;gap:7px;align-items:center}hr{border:0;border-top:1px solid var(--line);margin:25px 0}.steps{list-style:none;padding:0;counter-reset:step;display:grid;gap:17px}.steps li{counter-increment:step;display:flex;align-items:center;gap:10px;font-size:11px;line-height:1.5;color:var(--muted)}.steps li:before{content:counter(step);border-radius:50%;height:23px;min-width:23px;display:grid;place-items:center;background:#eef4f6;color:var(--navy);font-size:10px}.privacy-note{background:#f2f8f8;border-radius:10px;padding:16px;margin-top:24px}.privacy-note strong{font-size:12px}.privacy-note p{font-size:11px;margin:7px 0 0}.library{min-width:0}.library-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.library-heading h2{margin:0}.library-heading .step-label{margin:0 0 8px}.count{display:inline-block;vertical-align:middle;border-radius:6px;background:#e4ebef;font-size:12px;padding:4px 8px;margin-left:7px;letter-spacing:0}.library-subline{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px;margin:15px 0 20px}.sample-label{font-size:10px}.filters{display:flex;gap:12px;align-items:flex-end;background:#eef2f5;border:1px solid var(--line);border-radius:10px;padding:14px}.date-field{flex:1;min-width:0}.date-field label{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}.date-field input{display:block;width:100%;min-width:0;min-height:41px;background:white;color:var(--navy);border:1px solid #cedae1;border-radius:6px;padding:8px 10px;font-size:12px}.selection-row{display:flex;align-items:center;gap:20px;margin:14px 0;font-size:11px;min-height:34px}.selection-row strong{margin-left:auto;color:var(--cyan);font-size:11px}.selection-row .text-button{font-size:11px}.select-all{display:flex;align-items:center;gap:7px;cursor:pointer}input[type=checkbox]{width:18px;height:18px;accent-color:var(--cyan);cursor:pointer}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.picture-card{border:1px solid var(--line);background:white;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 3px 10px #062e5203;min-width:0}.picture-card.is-selected{border-color:var(--cyan);box-shadow:0 0 0 2px #007e9120}.picture-preview{position:relative;aspect-ratio:1.42;background:#e5edf0;overflow:hidden}.picture-preview img{width:100%;height:100%;object-fit:cover;display:block}.picture-check{position:absolute;top:9px;left:9px;width:34px;height:34px;background:#fffffff0;border-radius:7px;display:grid;place-items:center;box-shadow:0 2px 8px #0001}.picture-check input{margin:0}.picture-badge{position:absolute;right:9px;top:10px;padding:5px 7px;background:#fffffff0;border-radius:4px;font-size:9px;color:#304e61}.picture-body{padding:13px}.picture-name{font-size:12px;margin:0 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:650}.picture-date{font-size:10px;color:var(--muted);margin:0 0 5px}.picture-expiry{font-size:9px;color:#596b76;margin:0;line-height:1.5}.picture-actions{display:flex;gap:5px;border-top:1px solid #edf1f3;padding-top:10px;margin-top:10px}.picture-actions button{min-height:34px;font-size:10px;border:0;border-radius:5px;background:#f0f5f7;color:var(--navy);padding:6px 8px}.picture-actions .copy{margin-right:auto}.picture-actions button:hover{background:#dfedf0}.download-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#e8f1f3;border:1px solid #c9dfe3;border-radius:12px;margin-top:24px;padding:18px}.download-bar strong{font-size:12px;display:block}.download-bar small{font-size:10px;display:block;color:var(--muted);margin-top:5px}.download-actions{display:flex;gap:8px}.download-actions .primary{background:var(--cyan);border-color:var(--cyan)}.quiet{color:var(--muted);font-size:12px;line-height:1.65}.browser-note{font-size:10px;margin:12px 0}.empty{padding:45px 20px;text-align:center;border:1px dashed #adc2cd;border-radius:14px}.empty>span{font-size:45px;color:var(--cyan)}.empty h3{font-size:18px}.empty p{font-size:12px;color:var(--muted)}footer{display:flex;align-items:flex-start;gap:30px;border-top:1px solid var(--line);margin-top:42px;padding:25px 0;color:var(--muted);font-size:11px}footer>span{font-weight:700;white-space:nowrap;padding-top:5px}footer b{padding:0 6px;color:#9cb5c3}footer p{margin:0;max-width:640px;line-height:1.7;font-size:10px}footer button{margin-left:auto;white-space:nowrap}.error{font-size:12px;color:#a12d24}.mobile-concept{display:grid;grid-template-columns:1fr 370px;gap:80px;max-width:920px;margin:40px auto 50px;align-items:center}.mobile-explanation h2{font-size:38px;line-height:1.18}.mobile-explanation>p:not(.eyebrow){font-size:14px;color:var(--muted);line-height:1.75}.mobile-explanation ul{padding-left:20px;font-size:13px;line-height:2.5}.phone-card{padding:29px;background:white;border:1px solid #cfdde3;border-radius:28px;box-shadow:0 15px 60px #143f5210}.phone-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px}.brand-mini{font-size:22px;font-weight:700;letter-spacing:-1px}.phone-top>span:last-child{font-size:8px;color:var(--muted);letter-spacing:1px}.phone-card h2{font-size:33px;line-height:1.2}.phone-card>p{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:24px}.phone-card>.primary,.phone-card>.secondary{width:100%;margin-bottom:10px}.phone-card>small{display:block;text-align:center;font-size:10px;color:var(--muted);margin-top:5px}.pending{padding:18px 0;display:grid;gap:10px}.pending>p{font-size:11px;color:var(--muted);text-align:center}.pending-row{display:flex;align-items:center;gap:10px;font-size:11px}.pending-row img{width:40px;height:40px;object-fit:cover;border-radius:6px}.pending-row span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-button{border:0;background:#eef3f6;border-radius:7px;min-width:36px;min-height:36px;font-size:22px;color:var(--navy)}dialog{border:1px solid var(--line);border-radius:20px;max-width:540px;width:calc(100% - 32px);padding:28px;color:var(--navy);box-shadow:0 30px 100px #062e5230}dialog::backdrop{background:#05223b77;backdrop-filter:blur(3px)}.dialog-head{display:flex;gap:20px;align-items:center;justify-content:space-between}.dialog-head h2{margin:0;font-size:23px}#dialog-content{font-size:14px;color:var(--muted);line-height:1.8;margin:22px 0}#dialog-content h3{color:var(--navy);font-size:15px;margin:20px 0 6px}#dialog-content ul{padding-left:20px}.flow{background:#edf6f7;padding:16px;border-radius:10px;color:var(--navy);text-align:center;font-weight:600}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:30;background:var(--navy);color:white;padding:14px 20px;border-radius:10px;box-shadow:0 5px 20px #0002;font-size:13px;max-width:calc(100% - 30px);width:max-content;line-height:1.5}
@media(min-width:1500px){.shell{padding-top:30px}.intro{padding-top:60px;padding-bottom:50px}}
@media(max-width:1100px){.intro-aside{display:none}.workspace{grid-template-columns:220px minmax(0,1fr);gap:22px}.connect-card{padding:20px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.filters{flex-wrap:wrap}.filters>.secondary{width:100%}.header-inner,.shell{padding-left:28px;padding-right:28px}.mobile-concept{gap:40px}}
@media(max-width:760px){.header-inner{min-height:75px;padding:10px 18px}.brand img{width:46px;height:46px}.brand strong{font-size:25px}.brand small{font-size:9px}.header-meta{gap:7px;font-size:10px}.concept-tag{font-size:10px}.shell{padding:18px 18px 0}.prototype-note{align-items:flex-start;flex-wrap:wrap;font-size:10px;gap:8px}.note-dot{margin-top:6px}.prototype-note .text-button{margin-left:15px;padding-top:0;min-height:24px;font-size:10px}.intro{padding:27px 0 28px;gap:0}.eyebrow{font-size:8px;letter-spacing:1.3px}h1{font-size:30px;letter-spacing:-1px}.lead{font-size:12px}.view-tabs{gap:20px;margin-bottom:22px}.view-tabs button{font-size:11px;padding:13px 0}.workspace{grid-template-columns:1fr;gap:24px}.connect-card{display:grid;grid-template-columns:1fr auto;column-gap:20px;padding:18px}.connect-card .step-label{grid-column:1}.connect-card h2{font-size:19px;margin:0}.connect-card>p{grid-column:1;font-size:11px;margin:8px 0}.connect-card>.primary{grid-column:2;grid-row:1/4;margin:0;align-self:center;width:auto;font-size:10px;padding:10px;max-width:124px}.connection-state{grid-column:1/-1;margin-top:6px}.device-symbol,.connect-card hr,.connect-card .steps,.connect-card .privacy-note,.connect-card hr+.step-label{display:none}.library-heading{align-items:center;gap:10px}.library-heading h2{font-size:21px}.library-heading .secondary{font-size:10px;padding:9px 10px}.step-label{font-size:8px;letter-spacing:1.3px}.count{font-size:10px}.library-subline{font-size:10px;flex-wrap:wrap}.sample-label{font-size:9px}.gallery{gap:11px}.picture-body{padding:10px}.picture-name{font-size:11px}.picture-date{font-size:9px}.picture-expiry{font-size:8px}.picture-badge{font-size:8px;padding:4px}.picture-actions{gap:4px;flex-wrap:wrap}.picture-actions button{padding:5px 7px;min-height:36px}.picture-actions .copy{width:100%;margin:0}.picture-actions button:not(.copy){flex:1}.selection-row{gap:10px;flex-wrap:wrap}.selection-row,.selection-row .text-button,.selection-row strong{font-size:10px}.download-bar{align-items:stretch;flex-direction:column;padding:16px;gap:13px}.download-actions>*{flex:1}.mobile-concept{display:flex;flex-direction:column;gap:24px;margin:28px auto}.mobile-explanation{max-width:400px}.mobile-explanation h2{font-size:29px}.phone-card{width:100%;max-width:370px}footer{flex-wrap:wrap;gap:12px;margin-top:28px;padding-bottom:22px}footer>span{width:100%}footer button{margin:0}.filters{padding:12px;gap:10px}dialog{padding:22px}.dialog-head h2{font-size:20px}}
/* Keep functional labels readable and touch targets usable on compact screens. */
.picture-date,.picture-expiry{font-size:11px;line-height:1.55}.picture-actions button{font-size:12px;min-height:40px}.selection-row,.selection-row .text-button,.selection-row strong{font-size:12px}.browser-note,footer p{font-size:11px}
@media(max-width:760px){.picture-name{font-size:12px}.picture-actions button{min-height:44px}.picture-date,.picture-expiry{font-size:11px}.selection-row strong{flex-basis:100%;margin:0}.selection-row{row-gap:2px}.connect-card>.primary{min-height:48px}.prototype-note{font-size:11px}.view-tabs button{min-height:44px}.picture-check{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* V1.0.0: live sessions, QR code and upload feedback. */
#qr{display:block;width:100%;max-width:220px;height:auto;margin:20px auto 12px;image-rendering:pixelated;background:white;border-radius:8px}.live-connect #sharing .secondary{width:100%;margin-top:8px}.secret-note{font-size:11px!important;line-height:1.55!important}.danger{color:#a52c28}.dialog-actions{display:flex;justify-content:flex-end;gap:12px}.pending-detail{min-width:0;flex:1}.pending-detail span{display:block}.pending-detail small{display:block;white-space:normal;line-height:1.5;margin-top:4px}.secret-input{width:100%;padding:12px;border:1px solid #bbcdd5;border-radius:8px}#upload-progress label{font-size:11px;line-height:1.5;display:block}progress{accent-color:var(--cyan);width:100%;height:12px;margin:10px 0}.picture-preview:has(img[hidden]):after{content:'Vorschau wird geladen …';position:absolute;left:15px;bottom:15px;font-size:11px;color:var(--muted)}#connection-status.error{color:#a12d24}.selection-row #refresh{margin-left:auto}.live-connect .privacy-note{margin-bottom:15px}
@media(max-width:760px){.live-connect{display:block}.live-connect>h2{margin-top:12px}.live-connect>.primary{max-width:none;width:100%;margin-top:8px}.live-connect #sharing{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center}.live-connect #qr{grid-row:1/4;margin:0}.live-connect #sharing .primary,.live-connect #sharing .secondary{font-size:11px;margin:0}.live-connect .secret-note{grid-column:1/-1;margin:4px 0 0;font-size:11px!important}.live-connect #end-session{margin-top:12px}.mobile-concept{margin-top:16px}.mobile-explanation{display:none}.phone-card{border-radius:18px}.phone-top{margin-bottom:20px}.intro{padding-top:22px;padding-bottom:20px}.intro .lead{display:none}h1{font-size:26px}.picture-check{width:40px;height:40px}}

/* V1.1.0: accessible language switch without moving the fixed header. */
.language-switch{display:flex;gap:2px;padding:3px;border:1px solid #cadbe1;border-radius:8px;background:#edf4f6}.language-switch button{min-height:34px;min-width:36px;padding:5px;border:0;border-radius:5px;color:var(--navy);background:transparent;font-size:12px;font-weight:700}.language-switch button[aria-pressed=true]{background:var(--navy);color:#fff}.language-switch button:focus-visible{outline:3px solid var(--cyan)}html[lang=en] .picture-preview:has(img[hidden]):after{content:'Loading preview …'}
@media(max-width:760px){.header-meta{display:grid;grid-template-columns:auto auto;gap:4px 8px;justify-items:end}.language-switch{grid-column:1/-1}.header-inner{gap:8px}.brand{gap:8px}.brand img{width:42px;height:42px}.brand strong{font-size:23px}.header-meta .concept-tag{font-size:9px;padding:4px 6px}.language-switch button{min-height:30px;min-width:35px}.view-tabs{gap:14px}.view-tabs button{font-size:11px}}

/* V1.1.1: make deletion explicit and keep every action usable on narrow cards. */
.picture-actions{flex-wrap:wrap}
.picture-actions button{min-height:44px;min-width:44px}
.picture-actions .delete-image{flex:0 0 100%;border:1px solid #d8aaa5;background:#fff8f7;color:#912b23;font-size:12px;font-weight:600}
.picture-actions .delete-image:hover{background:#fbe9e6}

.picture-actions{display:grid;grid-template-columns:minmax(0,1fr) 44px}.picture-actions .copy{margin-right:0}.picture-actions .delete-image{grid-column:1 / -1}